Salam cmsF, kali ini kita akan belajar bagaimana mendesain tampilan cmsF agar lebih terlihat enak dilihat dan terkesan elegan. Tema yang anakn kita padukan pada saat ini adalah senandung cacaban karya pak alip dan blue campus. Untuk mendapatkan 2 tema tersebut, silakan kunjungi ke
tema.formulasi.or.id
Pada prinsipnya dalam mendesain tema cmsF, yang dapat anda lalkukan adalah editing pada css/style, home.php, menu.php (jika diperlukan), dan /img. Adapun bagian yang lain dapat kita modif dalam bentuk blok.
Untuk kerangka tema yang kita pake saat ini adalah menggunakan senandung cacaban, silakan buka folder tema senandung cacaban dan akan terlihat seperti ini,
Sekarang mari kita belajar menadukan 2 tema tersebut menjadi satu tema yang saling melengkapi keindahan dan fiture keduanya.
Sebagai contoh:
<div class="clear"></div>
<div id="martabaktabs">
<ul>
<li><a target="_blank" href="#">Artikel</a></li>
<li><a target="_blank" href="#">Blogging</a></li>
<li><a target="_blank" href="#">Internet</a></li>
<li><a target="_blank" href="#">Tools</a></li>
<li><a target="_blank" href="#">Link Satu</a></li>
<li><a target="_blank" href="#">Link Dua</a></li>
</ul>
</div>
Ini menunjukkan, jika anda mau edit bagian ini, misal warna huruf, warna menu maka anda akan diarahkan ke style.css pada
Buka style.css dan cari baris ini
martabaktabs{ background:#02024d;background:-moz-linear-gradient(45deg, #02024d 25%,#005ea2 100%)
nah #02024d >> adalah warna menu.
silakan pada bagian ini andapun bisa mengedit warna dan jenis font pada bagian martabaktabs
2. Mengganti kolom sambutan kepala sekolah
Pada home.php anda akan menemukan baris ini
<div class='kolom-bawah-header1'>
<div class='jujulan'>Sambutan Kepala Sekolah</div>
<div class='isikolom-bawah-header1'>
Maka jika mau edit bagian ini anda buka style.css dan temukan 'kolom-bawah-header1'
kolom-bawah-header1{padding:0px;height:320px;width:690px;float:left;margin:0}.kolom-bawah-header2{padding:0px;width:269px;float:left}
silahkan anda atur tinggi sambutan jika dirasa bagian ini terlalu tinggi, sebagai contoh saya ganti menjadi spt ini :
kolom-bawah-header1{padding:0px;height:250px;width:690px;float:left;margin:0}.kolom-bawah-header2{padding:0px;width:269px;float:left}
Selanjutnya
isikolom-bawah-header1{height:280px;line-height:1.4;align:left;margin:0px;background:url(img/liswhd.png)
kita ganti menjadi :
isikolom-bawah-header1{height:200px;line-height:1;align:left;margin:0px;background:url(img/liswhd.png)
Isi header untuk pengumuman
isikolom-bawah-header2{height:280px;line-height:1.4;align:left;margin:0px;padding:0px 15px}
kita ganti menjadi
isikolom-bawah-header2{height:200px;line-height:1;align:left;margin:0px;padding:0px 15px}
Dan hasil yang Anda edit akan menjadi tampilan di bawah ini:
Cukup mudah bukan ??
Oke sekarang kita akan belajar bagaimana mendesain id kategori dengan bacground warna soft
1. Konten
Buka style.css pada senandung caacaban dan temukan baris ini
klepon{background:#f2f2f2;padding:0px;width:672px;float:left;margin:0 4px 10px 8px;-moz-border-radius:0 0 3px 3px;-webkit-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px}
diganti
klepon{background:#dde6ec;padding:px;width:672px;float:left;margin:0 4px 10px 8px;-moz-border-radius:0 0 3px 3px;-webkit-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px}
Temukan juga baris ini
kupat_blengong{line-height:1.4;align:left;margin:0px;padding:5px 10px}.kupat_blengong ul{list-style:none;padding:0;margin-top:0}.kupat_blengong ul li{list-style:none;padding-top:5px;padding-bottom:10px;background:url(img/lislbr.png)
diganti
kupat_blengong{line-height:1.1;align:left;margin:0px;padding:5px 8px}.kupat_blengong ul{list-style:none;padding:0;margin-top:0}.kupat_blengong ul li{list-style:none;padding-top:5px;padding-bottom:2px;background:url(img/lislbr.png)
Jika anda berhasil maka tampilan akan menjadi seperti ini
3. Editing label
Pada bagian home.php temukan baris ini
<div id='tahu_kuping1'>
<div class='jujulan'>Agenda Sekolah</div>
<div class='kupat_blengong'>
<ul>
<?php
$agenda=mysql_query("SELECT * FROM ".$DB_KODE."_agenda ORDER BY id_agenda DESC limit 4");
$hitungagenda=mysql_num_rows($agenda);
global $ns;
if($hitungagenda > 0)
........
</div>
</div>
Kita edit menjadi id kategori berita
<div id='tahu_kuping2'>
<div class='jujulan'>Rubrik Civitas Mahasiswa</div>
<div class='kupat_blengong'>
<ul>
<?php
$berita=mysql_query("SELECT * FROM ".$DB_KODE."_berita, ".$DB_KODE."_kategori WHERE ".$DB_KODE."_berita.id_kategori=".$DB_KODE."_kategori.id_kategori AND tv9zay_berita.id_kategori='12' AND status_terbit='1' ORDER BY id_berita DESC LIMIT 2");
$hitungberita=mysql_num_rows($berita);
if($hitungberita > 0){
while($b=mysql_fetch_array($berita)){
$judul = strtolower(preg_replace("/s/","9a9z9",$b['judul_berita']));
$judul = preg_replace('#W#', '', $judul);
$judul = str_replace("9a9z9","-",$judul);
$url_link = "info-".$b['id_berita']."-".$judul.".html";
$url_tgl = "info-tanggal-".$b['tanggal_posting'].".html";
$url_kat = "info-kategori-".$b['id_kategori'].".html";
$url_penulis = "info-penulis-".$b['s_username'].".html";
?>
<li><a href="<?php echo $url_link;?>" title="<?php echo $b['judul_berita'];?>"><?php echo "<b>$b[judul_berita]</b>";?></a>
<br><small>
<?php
$isi_berita = strip_tags($b['isi_berita']);
$isi = substr($isi_berita,0,150);
if ($b['gambar_kecil']!= 'no_image.jpg'){
echo "<p><a href='$url_link' title=' $b[judul_berita]'><img src='images/$b[gambar_kecil]' width='70px' style='float:left; margin: 5px 10px 0 0; padding: 3px; background: #fff; border: 1px solid #dcdcdc'></a>$isi...<a href='$url_link' title='$b[judul_berita]'>Read More...</a></p><br>";}
else {
echo "<p>$isi...<a href='$url_link' title='$b[judul_berita]'>Baca Selengkapnya...</a></p>";
}
?>
</li>
<?php }}
else {?>
<li><a href=""><b>Data berita belum ada</b></a></li>
<?php } ?>
<div align="right"><a href='http://stembatema.sch.id/info-kategori-14.html' ><img src="file/tema/<?php echo $_SESSION['temaweb'];?>/css/img/more.png"></br></br>
</ul>
</div>
</div>
Lihat tv9zay_berita.id_kategori='12', ini menjukkan prevect dbase yang saya gunakan adalah tv9zay dan kategori='12' . Silakan disesuaikan dengan punya anda, Selanjutnya lakukan hal yang sama pada beberapa id kategori yang ingin anda tampilkan.
Selanjutnya anda buka style.css
Pada tahu kuping 2
#tahu_kuping2{background:#f2f2f2;padding:0px;width:332px;float:left;-moz-border-radius:0 0 3px 3px;-webkit-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px}
Kita ubah menjadi
#tahu_kuping2{background:#e8f3f7;padding:0px;width:330px;float:left;-moz-border-radius:0 0 5px 3px;-webkit-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px}
Dan hasilnya akan menjadi seperti ini
Langkah terakhir:
Kita akan membuat Galeri memanjang horizintal dengan 4 tampilan dan agenda sekolah. Pada bagian home.php setelah baris
<div id='amprut2'>
<div class='jujulan'>Kategori Berita</div>
<div class='isi-amprut2'>
<ul>
.....
</div>
</div>
Selanjutnya kita masukkan script ini (diambil dari tema blue campus)
<div id='klepon'>
<div class='jujulan'>Lihat Galeri Kampus</div>
<div class='isi-amprut1'>
<?php
$poto=mysql_query("SELECT * FROM ".$DB_KODE."_galeri ORDER BY id_galeri DESC LIMIT 4");
$hitungfoto=mysql_num_rows($poto);
if($hitungfoto > 0){
while($ph=mysql_fetch_array($poto)){
?>
<p class="thumb"><a id="thumb1" href="images/foto/galeri/<?php echo "$ph[nama_galeri]";?>" class="highslide" onclick="return hs.expand(this)">
<img src="images/foto/galeri/<?php echo "$ph[nama_galeri]";?>" alt="Highslide JS" title="Klik untuk memperbesar foto <?php echo "$ph[judul]";?> | <?php echo "$ph[deskripsi]";?>"/></a>
</p>
<?php }}
else {?>
<b>Foto belum ada</b>
<?php } ?>
</div>
</div>
<div id='amprut1'>
<div class='jujulan'>Agenda Kampus AK Temanggung</div>
<div class='isi-amprut1'>
<?php
$agenda=mysql_query("SELECT * FROM ".$DB_KODE."_agenda ORDER BY id_agenda DESC limit 2");
$hitungagenda=mysql_num_rows($agenda);
global $ns;
if($hitungagenda > 0){
while($ag=mysql_fetch_array($agenda)){
$judul=$ns['isi_pengaturan'];
$judul = strtolower(preg_replace("/s/","-",$judul));
?>
<H4><b><?php echo "<a href='agenda-$judul.html'>$ag[judul_agenda]</a>";?></b></h4>
<p style="font-size: 12px;color: #000;text-align: justify"> <b>Tempat : </b><?php echo "$ag[tempat_agenda]";?><br>
<b><a style="color: #111;font-size: 13px;">Informasi : </b><?php echo "$ag[keterangan_agenda]";?> </p>
<?php }}
else {?>
<p><b><a href="">Data agenda belum ada</a></b></p>
<?php } ?>
</table>
</div>
</div>
<div class="clear"></div>
Script yang kita masukkan diatas, akan menghasilkan tampilan seperti ini
Langkah Terakhir
Langkah terakhir
adalah mengganti bacground:
Silakan upload file jpg ini ke dalam folder style/img
Karena file bacground adalah blue.jpg
Maka atur style.css
body{margin:0;padding:0;background:url(img/backy.jpg)
repeat-x fixed center top
Menjadi
body{margin:0;padding:0;background:url(img/blue.jpg)
repeat-x fixed center top
Silakan anda refresh browsing anda dan selesailah tema anda
menjadi seperti ini. Klik icon DEMO dibawah ini
Nah selesai dah kita sudah bisa menciptakan tema cmsF yang bernuasa soft dan elegan jika anda berhasil. Tema ini kita kasih nama cacaban magazine
Selamat berkreasi,
dan salam cmsF
