Tutorial : Border yang Ohsem untuk Sidebar

SalamAlaykum semua !! hari nie terpanggil nak buat tutorial lagi hari nie..sebab ade permintaan dari someone..na tahu macam mana ghupa border kat sidebar..haaa sila tengok gambar gedabak kat bawah nie..so sekarang nie tak payah nak berjela-jela membebel kan..kita teruskan tutorial ini..

1.Dashboard > Design > Edit HTML > Tick Expand Widget Templates

2.Tekan Ctrl + f serentak dan cari code ni   

.sidebar .widget { 

3.Copy code kat bawah ni

border-top-left-radius: 25px 25px;
border-top-right-radius: 25px 25px;
border-bottom-left-radius: 25px 25px;
border-bottom-right-radius: 25px 25px;
border: 3pt groove #ADD8E6;
border-top:6px double#ADD8E6;
border-bottom:6px double #ADD8E6;
border-right:6px inset #ADD8E6;
border-left:6px outset #ADD8E6;
border-top-left-radius: 25px 25px;
border-top-right-radius: 25px 25px;
border-bottom-left-radius: 25px 25px;
border-bottom-right-radius: 25px 25px;
}

lepas tue paste di bawah code  .sidebar .widget {  ..nanti code tue akan kelihatan seperti di bawah nie..

.sidebar .widget {
border-top-left-radius: 25px 25px;
border-top-right-radius: 25px 25px;
border-bottom-left-radius: 25px 25px;
border-bottom-right-radius: 25px 25px;
border: 3pt groove #ADD8E6;
border-top:6px double#ADD8E6;
border-bottom:6px double #ADD8E6;
border-right:6px inset #ADD8E6;
border-left:6px outset #ADD8E6;
border-top-left-radius: 25px 25px;
border-top-right-radius: 25px 25px;
border-bottom-left-radius: 25px 25px;
border-bottom-right-radius: 25px 25px;
}

1) Code nombor 6px tue korang boleh ubah kepada sebarang nombor bagi ketebalan border.

2) code inset dan outset mewakili jenis BORDER.

3) Code  #ADD8E6  mewakili warna border..korang boleh ubah warna border..untuk warna yang lain korang boleh pergi --> SINI

4) Preview dan save kalau tiada error pada coding. 

thanks for reading this entry..

love,

aznishamsuddin