1 Topic by stiivn (edited by stiivn 2007-03-31 20:39)

  • stiivn
  • Junior Member
  • Offline
  • Registered: 2007-03-31
  • Posts: 3

Topic: I love PunBB, but CSS needs rework

First of all I absolutely love this bulletin board!

This is exactly the fast, light-weight, user-friendly, easy-to-modify, xhtml validating (the list goes on ... smile) board I've been looking for!

I'm currently adapting it for a planned site of mine, and it's great fun to work with in all aspects except CSS.

IMHO the way the CSS is laid out needs to be redesigned. I'll try to briefly address the problems:

1) Style tags are too spread out. For example I found 4 declarations for the <body> tag, some even in different files. This makes editing tiresome because you have to look for all snippets of a style tag to understand what's going on (also some could use a renaming, so you know what it does just by looking at the name). Why not have all <body> styles in one declaration?

2) Almost all base tags (table, td, ul, li, h1, h2, ...) start with a .pun in front of them. This causes user-defined styles to be overwritten. For example there was a .pun h2 and I had my custom h2 that just wouldn't react to my styles. Only an !important fixed the problem, but adding this everywhere isn't exactly efficient. What I did is remove all the .pun in front of base tags.

While these issues aren't game-breaking I think a single, easy-to-read CSS file would really improve the workflow. For example like this:


/*************** main ***************/
html {} 
body {}
..

/*************** tables ***************/
table {}
th {}
td {}
..


/*************** forms ***************/
form {}
input {}
..


/*************** links & headings ***************/
a {}
a:link {}
..

h1 {}
h1 a:link {}
..

h2 {}
h2 a:link {}
..



/*************** icons ***************/
...



/*************** header ***************/
#brdheader {}
#brdmenu {}
#brdmenu li {}
..


/*************** middle ***************/
#brdmiddle {}
..

            
/*************** footer ***************/
#brdfooter {}
..

Also support for BBCode lists (

  • ...

) would be nice.

Otherwise keep up the great work tongue


(Edit: while still editing the CSS I found about 10 different style declarations for #brdmenu, spread all over the place. Some things like font-weight were even declared multiple times.)

  • From: France
  • Registered: 2004-11-06
  • Posts: 695

Re: I love PunBB, but CSS needs rework

For the first question, IIRC it's a feature not a bug. The CSS files are properties oriented, not tag oriented (?set the font once and for all? instead of ?set all CSS properties for the lists once and for all?).

Jeu de rôle en ligne sur table virtuelle ⁂ Shadowrun France ⁂ Chez Blacky

Jérémie's Website

3 Reply by stiivn (edited by stiivn 2007-03-31 21:17)

  • stiivn
  • Junior Member
  • Offline
  • Registered: 2007-03-31
  • Posts: 3

Re: I love PunBB, but CSS needs rework

Jérémie wrote:

For the first question, IIRC it's a feature not a bug. The CSS files are properties oriented, not tag oriented (?set the font once and for all? instead of ?set all CSS properties for the lists once and for all?).

Ok I understand, but this really leads to confusing CSS ^^

Imagine how a user would go about changing the styles: "Hmm, I want to change the look of those tables ..."

User opens CSS file and looks for the <table>, <td>, <th> tags but instead of one nice group of declarations which
tells him everything he has to know, those style tags are spread all over the place. A little bit of background here,
some border over there, more color in another file, and a link yet in another file.

  • Registered: 2006-09-29
  • Posts: 39

Re: I love PunBB, but CSS needs rework

Thats not a feature, that's a hindrance to the end-user-developer who needs to simply edit the styles.

I think this was done on purpose, so that editing the style would be difficult, ie. to keep a consistent "approved" pubBB style intact.

The CSS code is very arcane, and this is the most annoying part of using punBB.

5 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: I love PunBB, but CSS needs rework

This discussion is somewhat moot since the next version of PunBB uses totally different stylesheets.

On the question of the .pun prefix. The reason for this is to prevent PunBB's stylesheets from interferring with a sites styesheet. There are far more problems caused by a site picking up PunBB's styles than by PunBB failing to pick up a sites styles. The idea is that it should be possible to dump PunBB into an existing page without it screwing up the styles for the page which surrounds it. If you need PunBB to pick up a site style then just add the style to PunBB's stylesheet.

  • From: France
  • Registered: 2004-11-06
  • Posts: 695

Re: I love PunBB, but CSS needs rework

To use custom personal styles, the easiest way would be to edit the template and give an id to the body of all forum pages: <body id="www-punbb-org"> for example, à la Eric Meyer. Then, it's quite simple to write custom sheets and apply them to the right website.

Jeu de rôle en ligne sur table virtuelle ⁂ Shadowrun France ⁂ Chez Blacky

Jérémie's Website

7 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: I love PunBB, but CSS needs rework

I have avoided doing that for the simple reason that if PunBB is part of a larger site the site owner might already be using an id on the body tag.

In any case it doesn't get around the problem. The problem I was trying to fix was where say a site was using lists in the default format with bullets and then punbb's stylesheets defined lists without bullets or padding. Suddenly all the lists on the site (or at least the pages where punbb was present) would be styled the punbb way.

  • stiivn
  • Junior Member
  • Offline
  • Registered: 2007-03-31
  • Posts: 3

Re: I love PunBB, but CSS needs rework

Ok I found an easy work-around for integrating my page into PunBB.
My layout looks like this:

--------------------------------------------------
|                     header (PunBB)                 |
--------------------------------------------------
|            ------------------------------           |
|   left     |        forum (PunBB)       |   right  |
|            |      or custom content     |           |
|            ------------------------------           |
|            ------------------------------           |
|            |        footer (PunBB)      |           |
|            ------------------------------           |
--------------------------------------------------
|                     footer                               |
--------------------------------------------------

Problem was that the custom left menu and the resulting custom content by clicking on the menu only reacted
to my custom styles if it wasn't already declared in PunBB or if I put an !important next to it.

The solution is to take out the class="pun" from the template and only wrap it around PunBB content, in this case
the header and middle part.

Problem 1) from the first post remains though tongue

  • From: France
  • Registered: 2004-11-06
  • Posts: 695

Re: I love PunBB, but CSS needs rework

Paul wrote:

I have avoided doing that for the simple reason that if PunBB is part of a larger site the site owner might already be using an id on the body tag.

I know, I was suggesting it to webmasters, not to you smile

In any case it doesn't get around the problem. The problem I was trying to fix was where say a site was using lists in the default format with bullets and then punbb's stylesheets defined lists without bullets or padding. Suddenly all the lists on the site (or at least the pages where punbb was present) would be styled the punbb way.

Yup I know.

Jeu de rôle en ligne sur table virtuelle ⁂ Shadowrun France ⁂ Chez Blacky

Jérémie's Website