Add a logo to the header via css

From PunBB Resource Wiki

Jump to: navigation, search

This article explains how to add a logo to you header via CSS as shown in the image.

CSS-Logo header.png

Make your logo with photoshop or any other suitable tool. Save it as


Add this to your style_cs.css:

/* header logo */
.pun H1 
/* your logo and position */
background-image: url(../../img/yourstylename/logo.gif);
background-repeat: no-repeat;
background-position: left; /* you set your logo position here */
display: block;
height: 70px; /* logo height in here add width: size px if u need*/
/*header title*/
.pun H1 span
/* your font style */
color: #0066B9;
font-size: 20px; /* title size */
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
text-transform: none ; /* transform text: uppercase, capitalise */
text-decoration: underline; /* decoration: none, overline */
/* position for your text (board title) with the logo */
position: absolute; 
top: 40px; 
left: 90px; 

Find: .pun H1 in stylename.css and remove the line.

Personal tools