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.

Comments

  1. halo jumpa lagi..

    saya mencoba mengikuti turotial ini..ttapi tdk berhasil..hasilny headernya miring ke kiri 20px..

    klo bleh mnta..tutorial mmbuat menu baru beserta submenuny..krn saya mngikuti dri sumber asliny sllu gagal n saya mncoba brtany ttpi blum trjawab..

    btw..trmksih ats tutorialny..tetap berkarya !!

    ReplyDelete
    Replies
    1. dikembalikan ke semula lagi pak, lalu ulangi pelan-pelan, kalau sudah jangan lupa save, kalau css nya belum diubah sebelumnya pasti bisa karena saya memakai css yang aslinya dan saya rubah seperti diatas.

      Untuk tutorial membuat menu nanti lain kali insya Allah saya buat. Terima kasih atensinya.

      Delete
  2. oke agan Alip Saja..dtunggu tutorial2 lainnya..ttp smangt..!!

    ReplyDelete

Post a Comment

Popular posts from this blog

Tutorial Android Studio Mengganti Icon Launcher App

Cara Menambah gambar untuk project Android Studio

Mengenal Icon di tab Review MS.Word 2010