Cara Edit Header Cmssekolahku Menjadi Tidak Full

Masih dalam edisi modifikasi template cmssekolahku, kali ini aku mulai dari atas dulu yaitu serpihan header, sebab serpihan ini ialah serpihan yang pertama kali dilihat oleh pengunjung.  Modifikasi header dalam hal ini akan kita buat semoga header tidak full.

Lebar header akan kita rubah ukurannya dari 960px menjadi 980px, jadi ada pelengkap 20px .  Ukuran ini menurutku cukup, tidak terlalu lebar atau terlalu sempit.
Ok, eksklusif saja kita mulai:
1. Buka file custom.css lokasinya di assets\frontend\css\custom.css
Cari arahan ini:

/* Pengaturan blok warna background body */
body {
background: #fff;
}
/* Pengaturan blok warna background top header */
#top-bar {
background: #20303f;
}

/* Pengaturan blok warna background header */
#primary-header {
background: #2ecc71;
}

/* Pengaturan blok warna background samping kanan kiri tree sajian / dropdown sajian */
#fixed-wrapper {
background: #34495e;
}

/* Pengaturan blok warna background sajian */
#primary-navigator {
background:#20303f;
}

2. Ganti dengan code ini:

/* Pengaturan blok warna background body */
body {
background: #dddddd;
}
/* Pengaturan blok warna background top header */
#top-bar {
background: transparent;
}

/* Pengaturan blok warna background header */
#primary-header {
background: transparent;
}

/* Pengaturan blok warna background samping kanan kiri tree sajian / dropdown sajian */
#fixed-wrapper {
background: transparent;
}

/* Pengaturan blok warna background sajian */
#primary-navigator {
background:transparent;
}

Kode diatas ialah untuk merubah backround header menjadi transparan.

3. Cari arahan ini:

#primary-header .header{
position: relative;
width: 960px;
margin: 0 auto -5px auto;
padding: 0;
}

Ganti dengan arahan ini:

#primary-header .header{
position: relative;
width: 980px;
margin: 0 auto -5px auto;
padding: 0;
}

4. Buka file style.css lokasinya di assets\frontend\css\style.css
Cari arahan ini:

#top-bar {
width: 100%;
border-bottom: 1px #ddd solid;
}

Ganti dengan arahan ini:

#top-bar {
width: 100%;
}
#top-bar .container{
width: 980px;
background: #34495E;
}

Kode di atas bertujuan untuk menghilangkan border bawah top-bar, menambah wadah untuk sajian dengan ukuran 980px

5. Cari kode:

#primary-navigator-list {
width: 960px;
}

Ubah menjadi

#primary-navigator-list {
width: 980px;
background:#20303F}

6. Cari arahan ini:

#news-ticker li{ list-style: none;
color: #dcdcdc;
width: 960px;
padding: 0;
}

Ganti dengan arahan ini:

#news-ticker li{ list-style: none;
color: #dcdcdc;
width: 970px;
padding-left: 10px;
}

7. Cari Kode ini:

#clock{ position: absolute;
left: 0;
top: 6px;
font-size: 10px;
color: #fff;
text-transform: uppercase;
}

Ganti dengan arahan ini:

#clock{ position: absolute;
left:10px;
top: 6px;
font-size: 10px;
color: #fff;
text-transform: uppercase;
}

8. Buka file typography.css lokasinya di assets\frontend\css\ typography.css
Cari arahan ini:

.container{
position: relative;
width: 960px; margin: 0 auto;
padding: 0; }

Ganti dengan arahan ini:

.container{
position: relative; width: 960px;
margin: 0 auto; padding: 0 10px; }

Itulah tadi tutorial Cara Edit Header cmssekolahku Menjadi Tidak Full.
Selamat Berkreasi.

Sumber http://www.notesku.com/

Share this post