Topic: PunBB - More Styles and Less Tables
Further to previous discussions on another thread I have been having a rethink regarding the styling of this board.
The situation it seems is that a significant number of users and potential users people would like to do some more advanced stying or thier own or download distributed styles (this is an assumption on my part largely because of the popularity of skinning forums for other boards). Using templating or anything else which either bloats PunBB or makes it harder to achieve site integration is out. Pure CSS is a possibility but my instinct is that is not something for v.1.2. That leaves one option, styling purely through the stylesheet. The good news is that it is possible to come up with some tasty styles with just a stylesheet to work with. The bad news is it is not possible with the stylesheet as it is now. In order to style something you have to have something to style. That means rather more board elements getting thier own class or id. The key is to identify what are distinct elements which are worthy of individual styling. It also means less use of a particular class for a large number of elements, punhead and punmain for example. To avoid people having to hack about with the php files it would also be desirable to move as many of the inline styles as can be achieved to the stylesheet.
I have made a start on this and quite by accident discovered I could also remove whole chunks of code particularly nested tables without affecting the boards appearance or functioning in any way. In particular viewtopic.php generates a new table for each post which also contains 3 nested tables. On a page with 20 posts thats 80 tables (including nested tables) plus two tables for the header row. With a bit of tinkering I seem to have got this down to a grand total of 1 table irrespective fo the number of posts. In terms of file size the generated page from viewtopic.php with 5 posts is 12.5kb, my version 10.7kb. This is not a huge difference but the difference increases with the number of posts and removing the number of tables in itself should lead to a spead increase.
If you want to take a look go to
Be warned though, there is nothing exciting there, the whole point of the demo is to show that the board still looks the same despite my pruning of markup. Tested in IE5(win) IE5.5(win) Mozilla 1.4, Firebird 0.7, IE6(win) and Opera 7. Can anybody can test it in IE5(Mac), Safari or Linux browsers I would be grateful. The idea is that you should look at the source not just the page.
This is a list of the total changes to the board so far for those who may be even remotely interested.
1. Replace cellpadding="4" with cellpadding="0" throughout. All padding is now handled by the stylesheet.
2. Remove tables from viewtopic. The loop now renders each post in a new row rather than a new table. Nested tables removed. As a nice side effect, the double border between the header row and the first post has vanished.
3. Rewrite the functions for creating the main navbar and links appearing at the bottom of posts so all of the separator characters are handled by the implode function. The menu seperator character is now in the language file so it can be changed easily.
4. New classes/ids' introduced. At the moment there are only a couple the most significant of which is #punpostactions. This allows the styling of the links at the foot of each post. As a demo I have styled them as rollovers using nothing more than the stylesheet.
Split up .punmain into punmain_head, punmain_main, punmain_foot and punmain_copyright. This will allow seperate styling of the main board elements. Also makes it easier to seperate board elements using margin settings thus diposing of spacer tables (less tables = more speed).
New classes for the board header, .punheader, punlogo, puninfo.
New id for primary navigation .punnavbar.
A new class for the New Post links etc.
Get rid of all the other nested tables and replace them with Divs, Spans and paragraphs as appropriate and then assign appropriate new classes and id's. Users don't have to use the new classes and id's but if they are there to be used if required.
Apologies for another unduly verbose post. It may be of interest to someone and to others I offer it as a cure for insomnia