Tambah border,warna dan jenis2 border

cara nak tambah border sangat lah senang sebnarnya..apa yang penting korang kena fahami btol2 konsep HTML tu...klu tak paham tu..susah la sket...

mcm biasa...LAYOUT..edit HTML..pastikan korang save lu korang nyer HTML tu..mana la tau incase tak jadi ker..kan dah selamat...(click Download Full Template)

bila dah siap semua tu...click kat Expand Widget Templates(kadang2 ada templet yang tak der code kat bawah nie..)

1. carik code kat bawah nie(biru) 

#sidebar-wrapper {
width: 200px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

pastu...tambahkan code(merah) bawah nie di bawah code(biru) yang pertama tadi...

#Profile1 {
padding: 0 5px 0 5px;
background: #ffffff;
border: solid #b0b0b0 1px;
}

#HTML1, #HTML2, #HTML3, #HTML4, #HTML5, #HTML6, #HTML7, #HTML8, #HTML9, #HTML10, #HTML11, #HTML12, #HTML13 {
padding: 0 5px 0 5px;
border: solid #b0b0b0 1px;
background: #ffffff;

}

#Label1 {
padding: 0 5px 0 5
border: solid #b0b0b0 1px;
background: #ffffff;

}

#BlogArchive1 {
padding: 0 5px 0 5
border: solid #b0b0b0 1px;
background: #ffffff;

}

pastu Save Templates dan try Priview 

dah siap step 1.

seterusnya step 2...cari lak code kat bawah nie(biru)..

/* Headings
----------------------------------------------- */

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;

tambahkan code (merah) dibawah code biru tadi

padding: 0 5px 0 5
border: solid #b0b0b0 1px;
background: #F0F0F0;
}

hasilnya akan menjadi begini..

/* Headings
----------------------------------------------- */

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
padding: 0 5px 0 5
border: solid #b0b0b0 1px;
background: #F0F0F0;
}

step 3.

cari lak code kat bawah nie(biru)..

/* Posts
-----------------------------------------------
*/

.post {
margin:.5em 0 1.5em;
padding-bottom:1.5em;
padding: 0 5px 0 5

kemudian korang tambahkan code warna merah bawah code biru tadi

/* Posts
-----------------------------------------------
*/

.post {
margin:.5em 0 1.5em;
padding-bottom:1.5em;
padding: 0 5px 0 5
border: solid #b0b0b0 1px;
background: #FFFFFF;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
border: solid #b0b0b0 1px;
background: #F0F0F0;
}

last step... 

cari code biru seperti dibawah dan korang tambahkan code warna merah dibawahnya

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
border: solid #b0b0b0 1px;
background: #F0F0F0;
}

bila dah siap tu...boleh la save templates ...

dah siap penambahan border korang tu...

sekarang nie...nak ajo korang cam mana nak tukar warna background wadget sebab code2 diatas tadi telah disesuaikan ngan tamplet minima yang warna putih tu......

so untuk cari coding warna..

korang ble carik kat sini...

Click Here

kat situ korang akan nampak banyak warna..click ajer warna dalam kotak tu...bawah nyer(Selected color code is:) akan keluar coding warna yang korang click tadi..just copy and paste

jika nak tukar warna...

korang cuma perlu menukar code yang warna merah seperti dibawah nie..

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
border: solid #b0b0b0 1px;
background: #F0F0F0;
}

tak kira la...kat bahagian mana sekali pon sama ada step 1,2 atau 3..nampak ajer

ada tanda mcm nie #F0F0F0 (ada 6 huruf kebiasaannya)bermakna itu adalah coding utk warna...

just tukar saja coding tu mengikut warna kesukaan korang..

Wah..panjang gila tutorial nie...pasal border dan ketebalan border tu...korang ble carik kat next N3 la ek....

karang bosan lak korang baca tutorial nie...

hahahaha..

selamat mencuba!