More PunBB Styling

Want to style the usertitles in PunBB based on their usertype (as in styling admins, moderators, members and guests)? Open up viewtopic.php and after this line
<div class="postleft">

We are going to modify the DL to this:

<dl class="<?php
if ($user_title == 'Administrator')
echo 'usertype_admin';
else if ($user_title == 'Moderator')
echo 'usertype_mod';
else if ($user_title == 'Member')
echo 'usertype_member';
else if ($user_title == 'Guest')
echo 'usertype_guest';
?>">

I added it a little higher than you might of assumed, so you can style the username and avatars if you want also. Its easy to add new types if you have more groups than the standard ones.

Now for more CSS to make PunBB not so boring:

/*styles for the usertype hack*/
dd.usertitle {padding-left:20px; height:16px;}
dl.usertype_admin dd.usertitle {background:url(../img/award_star_gold_3.png) no-repeat left;}
dl.usertype_mod dd.usertitle {background:url(../img/bronze_medal.png) no-repeat left;}
dl.usertype_member dd.usertitle {background:url(../img/vcard.png) no-repeat left;}
dl.usertype_guest dd.usertitle {background:url(../img/status_offline.png) no-repeat left;}
/*style your announcements*/
DIV#announce H2 {BACKGROUND-COLOR:#ffc}
DIV#announce DIV.box {BORDER-COLOR:#f90 #f90 #f90}
DIV#announce DIV.inbox {BACKGROUND-COLOR:#ffc}
/*style errors*/
DIV#posterror H2 {BACKGROUND-COLOR:#bf3030; color:#ff0;}
DIV#posterror DIV.box {BORDER-COLOR:#bf3030 #bf3030 #bf3030}
DIV#posterror DIV.inbox {BACKGROUND-COLOR:#592d2d}
#posterror LI STRONG {COLOR:#ff0}
/*style messages (info boxes from punbb)*/
DIV#msg {color:#fff;}
DIV#msg H2 {BACKGROUND-COLOR:#bfbf8f; color:#000;}
DIV#msg DIV.box {BORDER-COLOR:#bfbf8f #bfbf8f #bfbf8f}
DIV#msg DIV.inbox {BACKGROUND-COLOR:#808060}
DIV#msg a {color:#89d9ff;}
DIV#msg a:hover {color:#b8ffff;}
/*style even row posts, odd posts will get default styling already set to them*/
DIV.roweven DIV.box, DIV.roweven DIV.postright, DIV.roweven DIV.postfootright {BACKGROUND-COLOR:#c9c}
DIV.roweven DIV.postright, DIV.roweven DIV.postfootright {BORDER-LEFT-COLOR:#dad}
DIV.roweven DIV.postleft, DIV.roweven DIV.postfootleft, DIV.roweven DIV.blockpost LABEL {BACKGROUND-COLOR:#dad;}
DIV.roweven H2 {BACKGROUND-COLOR:#fcc}
DIV.roweven DIV.box {BORDER-COLOR:#fcc #fcc #fcc}
/*style first post*/
DIV.firstpost DIV.box, DIV.firstpost DIV.postright, DIV.firstpost DIV.postfootright {BACKGROUND-COLOR:#c96 !important;}
DIV.firstpost DIV.postright, DIV.firstpost DIV.postfootright {BORDER-LEFT-COLOR:#da7 !important}
DIV.firstpost DIV.postleft, DIV.firstpost DIV.postfootleft, DIV.firstpost DIV.blockpost LABEL {BACKGROUND-COLOR:#da7 !important}
DIV.firstpost DIV.box {BORDER-COLOR:#fc9 #fc9 #fc9 !important}
DIV.firstpost H2 {BACKGROUND-COLOR:#fc9 !important;}
div.firstpost h2 span a, div.firstpost h2 span a:link, div.firstpost h2 span a:visited {color:#ccc !important;}
DIV.firstpost DIV.postright .postmsg {background:url(../../img/firstpost.png) no-repeat top right;}

Tags: ,

Leave a Comment

Comments are reviewed before publishing to prevent spam.