Cara Edit Header cmssekolahku Menjadi Tidak Full

Masih dalam edisi modifikasi template cmssekolahku, kali ini saya mulai dari atas dulu yaitu bagian header, karena bagian ini adalah bagian yang pertama kali dilihat oleh pengunjung.  Modifikasi header dalam hal ini akan kita buat agar header tidak full.

Lebar header akan kita rubah ukurannya dari 960px menjadi 980px, jadi ada tambahan 20px .  Ukuran ini menurutku cukup, tidak terlalu lebar atau terlalu sempit.
Ok, langsung saja kita mulai:
1. Buka file custom.css lokasinya di assets\frontend\css\custom.css
Cari kode 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 menu / dropdown menu */
#fixed-wrapper {
background: #34495e;
}

/* Pengaturan blok warna background menu */
#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 menu / dropdown menu */
#fixed-wrapper {
background: transparent;
}

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

Kode diatas adalah untuk merubah backround header menjadi transparan.

3. Cari kode ini:

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

Ganti dengan kode 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 kode ini:

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

Ganti dengan kode 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 menu dengan ukuran 980px

5. Cari kode:

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

Ubah menjadi

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

6. Cari kode ini:

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

Ganti dengan kode 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 kode 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 kode ini:

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

Ganti dengan kode ini:

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

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