Mempercantik default theme phpBB3 (Prosilver)

Alzea | 0 comments




Ok... tutor kali ini gak berhubungan ama Linux, tp CMS forum yang sangat terkenal yaitu PHPBB3. Konon katanya phpbb ini adalah CMS forum open source pertama, wow!. Sekarang kita bakal membuat default theme phpbb ini menjadi cantik, jadi kita gak perlu lg download theme lain. Nama theme nya Prosilver.


Yang belum tau prosilver seperti apa, cek link berikut. Terlihat theme nya masih agak jelek, terutama karena lebar nya itu loh... sampai penuh. Nah, hal pertama yang akan kita lakukan adalah memperkecil ukuran (Width) dari theme ini, lalu memberikan borders dan rounded corners agar lbh cantik. Nanti hasil akhir nya akan seperti ini,




Live Demo: http://komunitas.jejepangan.com


Udah gak sabar? oke cukup basa-basi nya... ini tutor nya


Bismillah


---------------------------------------------------------------------------------


1. Pertama, kita kecilkan dulu lebar dari Prosilver ini, kita buat menjadi Fixed.


Buka file  /styles/prosilver/theme/common.css, lalu cari




#wrap {
   padding: 0 20px;
   min-width: 650px;
}

Lalu ganti dengan




#wrap {
   padding: 0 20px;
   min-width: 650px;
   width: 760px;
   margin: 0 auto;
}

Coba refresh theme dan template dan lihat hasil nya



Hmm... masih jelek yah gak ada border ama corner nya... oke lanjut mang!

2. sekarang kita buat border dan rounded corner. Download 2 file ini: borders_forum.zip dan css_borders.zip


3. Upload file yang barusan kita download ke forum,


Di FTP, masuk ke direktori /style /prosilver /theme /images / , lalu upload semua isi borders_forum.zip.


Setelah itu masuk ke direktori  /style/prosilver/theme/ dan upload semua isi dari css_borders.zip


4. Modifikasi kode


Kemudian buka file overall_header.html dalam folder template :


Cari:




<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

Di bawah nya tambahkan




<div class="outside">
   <div class="top-left"></div><div class="top-center"></div><div class="top-right"></div>
      <div class="inside">
         <div class="notopgap">

Sekarang buka overall_footer.html, masih dalam direktori template:


Cari baris berikut




<!-- IF U_ACP --><br /><strong><a href="{U_ACP}">{L_ACP}</a></strong><!-- ENDIF -->

Di bawah nya tambah kan




</div>

Lalu cari baris berikut (masih di file yg sama)




<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->

Lalu di bawah nya tambahkan




    </div>
    <div class="nobottomgap"></div>
          </div>
       <div class="bottom-left"></div><div class="bottom-center"></div><div class="bottom-right">
    </div>

---------------------------------------------


5. Setelah semua beres, masuk ke admin >> styles >> template, lalu refresh. Jangan lupa theme nya jg di refresh, admin >> styles >> theme.



Sekarang coba buka phpBB kamu. Semoga bermanfaat... :)



» Mise en place des bordures sur le forum

Décompressez les fichiers zip sur votre ordinateur.

Allez sur votre FTP dans le dossier suivant : styles/prosilver/theme/images/
et ajouter le contenu du dossier contenant les bordures (borders_forum)

Allez ensuite dans le dossier : styles/prosilver/theme/ et ajoutez le fichier shoots_boarders.css contenu dans l'archive css_borders.zip

  • Si vous n'avez jamais modifié la feuille de style stylesheet.css :Allez dans le dossier : styles/prosilver/theme/
    et ajoutez la feuille de style stylesheet.css contenue dans l'archive css_borders.zip en écrasant l'ancienne.

  • Si vous avez déjà modifié votre stylesheet.css antérieurement :Ouvrez le fichier stylesheet.css dans styles/prosilver/theme/ et en fin de code, rajoutez :


Labels:  , ,

Author: Alzea

Date: Minggu, 03 Oktober 2010

0 comments  | Leave a comment

0 comments to "Mempercantik default theme phpBB3 (Prosilver)"

Posting Komentar