Replace post/reply buttons with images

From PunBB Resource Wiki

Jump to: navigation, search

This article explains how to replace the post/reply buttons with images through CSS as seen in the image.

CSS-post button.png

Make your background button (bg_button.gif) with photoshop or other suitable tool. Save it as:

img/<yourstylename>/bg_button.gif

Add this to your stylename_cs.css:

/* FACTICE BUTTON POST AND REPLY */
.pun p.postlink, #conr
{
/* align the text in button */
TEXT-ALIGN: CENTER;
 
/* aling the button on the border */
POSITION: RELATIVE; 
TOP : 0px;
LEFT: 6px;
 
/* added border to the button */
BORDER: #0066B9 1PX SOLID;
 
/* color the button */
BACKGROUND-COLOR: #F1F1F1;
 
/* added an image background */
BACKGROUND-IMAGE: url(../../img/yourstylename/bg_button.gif);
 
/* create a shadow under the button */
filter: progid:DXImageTransform.Microsoft.shadow(direction=135,color=#666666,strength=2);
}
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox