How to use Washed Template

Tutorial yang zira nak buad ni hanya untuk membantu sesiapa yang masih baru untuk guna Washed Template. Ramai yang tanya. Takkan zira nak buat satu-satu :)

FYI, zira buat tuto ni by my own. Tiada copy  dari mana-mana blogger laen. Harap maklum.

Amaran keras : 

• Pastikan edit guna Denim ni kat blog sampingan korang dulu.

• Teruskan tuto ni kat Edit HTML.    

 1) Dashboard > Design > edit HTML

 2) Scroll page hingga ke bawah. Then, korang akan jumpa ni.

 3) Klik tempat zira anak panahkan tu. Lepas tu korang akan jumpa macam kat bawah.

 4) Pilih Washed Denim. Denim saja pun boleh sebab ziera rasa coding dia sama je. Hasilnya :

 

HEADER

1) CTRL+F dan cari code <Variable name="headerBgColor" description="Page Header Background Color"

2) Then, di bawah tu akan keluar code macam kat bawah ni

<Variable name="headerBgColor" description="Page Header Background Color"

           type="color" default="#ffffff" value="#ffffff">

 <Variable name="headerTextColor" description="Page Header Text Color"

           type="color" default="#333333" value="#333333"> 

 <Variable name="headerCornersColor" description="Page Header Corners Color"

           type="color" default="#ffffff" value="#ffffff">

3) Delete code tu dan paste code ni.

<Variable name="headerBgColor" description="Page Header Background Color"

           type="color" default="transparent" value="transparent">

 <Variable name="headerTextColor" description="Page Header Text Color"

           type="color" default="transparent" value="transparent"> 

 <Variable name="headerCornersColor" description="Page Header Corners Color"

           type="color" default="transparent" value="transparent">

BACKGROUND

1) Pergi ke Edit HTML > Tick Expand Widget.

2) CTRL+F dan cari code body {.

3) CTRL+C code di bawah dan pastekan di bawah code di atas.

Background-image:url(URL IMAGE);
background-repeat: repeat;

UBAH LEBAR

1) CTRL+F dan cari code #content-wrapper {

2) Then di bawah dia ada code ni

width: 760px;

3) Tukar saja sebesar mana yang korang nak :)

LINK

1) CTRL+F dan cari code a:link {

2) Tukarkan color: $linkColor; dengan code di bawah.

text-decoration: none;
color: #000000;
}

WARNA TEXT

1) CTRL+F cari code body {

2) Tukarkan code color: $textColor; kepada

color: CODE COLOR;

HOVER

1) CTRL+F code /* Header

2) Copy code di bawah dan pastekan saja di bawah code tadi.

a:hover {
text-decoration:none;
}

SAIZ POST TITLE @ SIDEBAR TITLE

1) CTRL+F dan cari code .post-title { @ .sidebar h2 {

2) Refer code di bawah dia. Kat bawah tu dia ada anak-anak macam kat bawah.

font-size: 125%;