1

Topic: can someone help re-write my CSS?

in punbb 1.2, I had a nice css style setup, matching the rest of my site. Now with 1.3, it doesn't work anymore. And I'm completely overwhelmed in trying to convert it.

Is there an easy way to update the style file? maybe someone can help? smile

here is it:

/* *************************** SpinkBB ****************** */
/*              SKIN GENERE PAR SPINKBB                   */
/*    http://www.jsand.net/spinkbb                        */
/* ********************************** SpinkBB *********** */

/****************************************************************/
/* 1. BACKGROUND AND TEXT COLOURS */
/****************************************************************/

/* 1.1 Default background colour and text colour */

BODY {BACKGROUND-COLOR: #FAFAFA}

.pun {COLOR: #606060}

DIV.box, .pun BLOCKQUOTE, DIV.codebox, #adminconsole FIELDSET TH, .rowodd, .roweven {BACKGROUND-COLOR: #D6D6D6}
#adminconsole TD, #adminconsole TH {BORDER-COLOR: #D6D6D6}

/* 1. 2 Darker background colours */

TD.tc2, TD.tc3, TD.tcmod, #postpreview, #viewprofile DD, DIV.forminfo,
#adminconsole FIELDSET TD, DIV.blockmenu DIV.box, #adstats DD {BACKGROUND-COLOR: #C5C5C5}

/* 1.3 Main headers and navigation bar background and text colour */

.pun H2, #brdmenu {BACKGROUND-COLOR: #818181; COLOR: #FDFDFD}

/* 1.4 Table header rows */

.pun TH {BACKGROUND-COLOR: #B4B4B4}

/* 1.5 Fieldset legend text colour */

.pun LEGEND {COLOR: #505050}

/* 1.6 Highlighted text for various items */

.pun DIV.blockmenu LI.isactive A, #posterror LI STRONG {COLOR: #333}

/****************************************************************/
/* 2. POST BACKGROUNDS AND TEXT */
/****************************************************************/

/* 2.1 This is the setup for posts. */

DIV.blockpost DIV.box, DIV.postright, DIV.postfootright {BACKGROUND-COLOR: #C5C5C5}
DIV.postright, DIV.postfootright {BORDER-LEFT-COLOR: #D6D6D6}
DIV.postleft, DIV.postfootleft, DIV.blockpost LABEL {BACKGROUND-COLOR: #D6D6D6}

/* 2.2 Background for post headers and text colour for post numbers in viewtopic */

DIV.blockpost H2 {BACKGROUND-COLOR: #818181}
DIV.blockpost H2 SPAN.conr {COLOR: #A3A3A3}

/* 2.3 This is the line above the signature in posts. Colour and background should be the same */

.pun HR {BACKGROUND-COLOR: #333; COLOR: #333}

/****************************************************************/
/* 3. BORDER COLOURS */
/****************************************************************/

/* 3.1 All external borders */

DIV.box {BORDER-COLOR: #818181}

/* 3.2 Makes the top border of posts match the colour used for post headers */

DIV.blockpost DIV.box {BORDER-COLOR: #818181 #818181 #818181}

/* 3.3 Table internal borders. By default TH is same as background so border is invisible */

.pun TD {BORDER-COLOR: #A3A3A3}
.pun TH {BORDER-COLOR: #B4B4B4}

/* 3.4 Creates the inset border for quote boxes, code boxes and form info boxes */

.pun BLOCKQUOTE, DIV.codebox, DIV.forminfo, DIV.blockpost LABEL {BORDER-COLOR: #ACA899 #FFF #FFF #ACA899}

/* 3.5 Gecko's default fieldset borders are really nasty so this gives them a colour
without interferring with IE's rather nice default */

.pun DIV>FIELDSET {BORDER-COLOR: #ACA899}

/****************************************************************/
/* 4. LINK COLOURS */
/****************************************************************/

/* 4.1 This is the default for all links */

.pun A:link, .pun A:visited {COLOR: #505050}
.pun A:hover {COLOR: #929292}

/* 4.2 This is the colour for links in header rows and the navigation bar */

.pun H2 A:link, .pun H2 A:visited, #brdmenu A:link, #brdmenu A:visited {COLOR: #FDFDFD}
.pun H2 A:hover, #brdmenu A:hover {COLOR: #FBFBFB}

/* 4.3 This is for closed topics and "hot" links */

LI.postreport A:link, LI.postreport A:visited, TR.iclosed TD.tcl A:link, TR.iclosed TD.tcl A:visited {COLOR: #888}
LI.postreport A:hover, TR.iclosed TD.tcl A:hover {COLOR: #AAA}
LI.maintenancelink A:link, LI.maintenancelink A:visited {COLOR: #B42000}
LI.maintenancelink A:hover {COLOR: #B42000}

/****************************************************************/
/* 5. POST STATUS INDICATORS */
/****************************************************************/

/* These are the post status indicators which appear at the left of some tables. 
.inew = new posts, .iredirect = redirect forums, .iclosed = closed topics and
.isticky = sticky topics. The default is "icon". By default only .inew is different.*/

DIV.icon {BORDER-COLOR: #E7E7E7 #C5C5C5 #B4B4B4 #C5C5C5}
TR.iredirect DIV.icon {BORDER-COLOR: #D6D6D6 #D6D6D6 #D6D6D6 #D6D6D6}
DIV.inew {BORDER-COLOR: #A3A3A3 #818181 #707070 #818181}

Re: can someone help re-write my CSS?

Looks like you used SpinkBB for 1.2.

You could use the 1.3 version: http://spinkbb.jsand.net/punbb/?spkEn

3

Re: can someone help re-write my CSS?

i've tried, but it just seems so complicated. I was wondering if there was a guide to the changes in the css files. ie, .pun is now .brd OR #punwrap is now #brd-wrap, so that I could just do some find and replaces to get it working again? hmm

4

Re: can someone help re-write my CSS?

egg wrote:

i've tried, but it just seems so complicated. I was wondering if there was a guide to the changes in the css files. ie, .pun is now .brd OR #punwrap is now #brd-wrap, so that I could just do some find and replaces to get it working again? hmm

You could try this, open the index of your forum in a browser, and right click >veiw source. Read the div ID that you want to change. Look is style.css for that ID and edit as you would a style sheet.

Re: can someone help re-write my CSS?

@tbint: Not every element has an ID and for someone that doesn't know how to work with CSS, styling isn't that simple.

Re: can someone help re-write my CSS?

eh..whats spinkbb?

7

Re: can someone help re-write my CSS?

Garciat wrote:

@tbint: Not every element has an ID and for someone that doesn't know how to work with CSS, styling isn't that simple.

My bad,

I have to do things the hard way like start at the top of css and change the first background color to #000 and go back to the forum and see what it changed. Then the next. man that took a long time.
cheers