0 Menambah Lebar Kolom Header

Oleh sabia | Sabtu, Mei 14, 2011 | Tags:

  Setelah menambah lebar bagian kolom Content seperti telah di tulis disini dengan judul " Menambah Lebar Bagian Outer, Main, Dan Sidebar " selanjutnya yang perlu di sesuaikan lebarnya adalah bagian header. Untuk merubah bagian Header kode yang perlu dilihat adalah kode seperti ini yang merupakan kode Header yang masih bawaan default template minima :


/* Header
-----------------------------------------------
 */

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}

#header {
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
}

#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}

#header a {
  color:$pagetitlecolor;
  text-decoration:none;
  }

#header a:hover {
  color:$pagetitlecolor;
  }

#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:700px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont;
  color: $descriptioncolor;
 }

#header img {
  margin-$startSide: auto;
  margin-$endSide: auto;
}

Bila ingin merubah lebarnya cukup mudah, tinggal menambah atau mengganti nilai dalam property Width yang asalnya 660px ganti menjadi 950px, atau bila ingin lebih mudah tinggal ganti atau hapus kode header yang diatas, ganti dengan kode header dibawah ini :


/* Header
-----------------------------------------------
 */

#header-wrapper {
  width:950px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}

#header {
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
}

#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}

#header a {
  color:$pagetitlecolor;
  text-decoration:none;
  }

#header a:hover {
  color:$pagetitlecolor;
  }

#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:700px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont;
  color: $descriptioncolor;
 }

#header img {
  margin-$startSide: auto;
  margin-$endSide: auto;
}

Setelah selesai biar perubahannya di proses jangan lupa untuk meng klik Simpan Template .


KOLOM TUTORIAL BELAJAR
Garut, 14 Mei 2011

Ada 0 komentar Untuk: Menambah Lebar Kolom Header

Posting Komentar Untuk Artikel Ini :