1 Topic by Paul (edited by ps21 2004-01-11 20:46)

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

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

http://www.post21.co.uk/punbb

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.

To Do

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 smile

2 Reply by Chacmool (edited by chacmool 2004-01-11 21:00)

  • From: Gothenburg, Sweden
  • Registered: 2002-07-03
  • Posts: 946

Re: PunBB - More Styles and Less Tables

Short answer to a long post: I think the tables has a certain purpose... noticed what happens if you post a LOOONG line (or a large image) in your forum now? It ruines the whole page. This was the first amazing thing I noticed when I first got here. Don't think its worth the page size if it can't be solved without tables (or can it?).

Other than that, good work! smile

3 Reply by Paul (edited by ps21 2004-01-11 22:37)

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

Re: PunBB - More Styles and Less Tables

Thanks. I knew there would be problems I hadn't considered. Some more work to do then. Though I still convinced that four tables per post is overkill.

I just tried using the code tag for a long post. I doesn't actually break the the board, it just causes the whole of the table to expand rather than just one row. However, I guess most people just want the one row to expand. I still think I can get it to work with a lot less tables than used currently but we shall see.

[edit]
It can be fixed using overflow:scroll/auto which gives a horizontal scrollbar or probably by using floats. The first solution is ugly and the second less stable than tables. I think I will put each post back into a table but only the one table, the inner tables stay out. Thats still a 75% reduction in the number of tables and associated tags so that will have to do. Anyway, the objective was to improve styling options, this was just a sideline.

  • From: Gothenburg, Sweden
  • Registered: 2002-07-03
  • Posts: 946

Re: PunBB - More Styles and Less Tables

Yeah, one table per post should be enough to fix it. On CSpotkill's page the table have the right size, but the text expands outside the table instead (it's not finished yet either though).

5 Reply by Paul

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

Re: PunBB - More Styles and Less Tables

chacmool wrote:

Yeah, one table per post should be enough to fix it. On CSpotkill's page the table have the right size, but the text expands outside the table instead (it's not finished yet either though).

That's probably the same solution I was thinking of. You let a box containing long text or an image expand beyond the side of the table. Much easier to do if you don't have any tables in the first place of course. Tables are remarkly robust at trapping elements inside them, which is why people like them.

  • From: 127.0.0.1
  • Registered: 2001-11-02
  • Posts: 9,167

Re: PunBB - More Styles and Less Tables

I like the fact that all the cellpadding and cellspacing attributes can be removed. I really hate them.

Removing the nested tables from viewtopic is another good thing. However, if a side-effect of that is that one wide post extends the rest of the posts, I'm not so convinced.

Making it easier to change the separator character(s) is great. I really don't know why I haven't implemented it with implode() everywhere in the first place :)

Adding a few new classes is probably another good idea.

I'm looking forward to seeing a more complete solution before I make any decisions. This might be an alternative to CSpotkill's suggestion.

"Programming is like sex: one mistake and you have to support it for the rest of your life."

Rickard's Website

7 Reply by Paul

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

Re: PunBB - More Styles and Less Tables

I now have each post in a separate table again but still no inner tables so thats still a decent reduction in tables. I have tested it and it works perfectly with wide posts. I will upload it after some more tinkering.

I am interested in seeing how the great CSS experiment ends up though I am not entirely optomistic largely because the only board to use pure css is a bit of a dogs breakfast and isn't even that quick. PunBB v.1.4 quite possibly, but not v.1.2. I am all in favour of designing websites using CSS but a BBS system isn't just a website, it's an interface to a database.

You might be interest in this
http://css.nu/articles/table-in-css.html
The three column example can be adapted to recreate index.php and probably viewforum.php without tables. I have tried it and came up with a reasonbly accurate rendition of index.php at least at a fixed width.

  • Registered: 2004-01-12
  • Posts: 14

Re: PunBB - More Styles and Less Tables

ps21 wrote:

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.

This is a good point that I agree with. You can get the code as clean and tidy as you can, but some skinners and those that aren't as up to snuff with the current compliant coding will always rip it up and make it do what they want it to do. They are going to want to wrap categories with border images create tons of buttons for the text links......etc..etc; and alot will be screaming for an individual set of templates for each style so that they can make changes to the look of the templates and not have it effect all the others at the same time.

A clean cut board may be great for some, but with the diversity of people out there ("Hey, but this board does this...and that other board does that") even the most pristine coding in time becomes cluttered by needs and wants of users.

It's great to see a group that are trying their best to produce something sleak and clean. Have to find a happy medium in the coding or a flex point where public opinion comes into play (therefore trying not to alienate potential users in the long run).

Just my 2 cents
Peace

9 Reply by Louis (edited by CSpotkill 2004-01-12 14:03)

  • Louis
  • Senior Member
  • Offline
  • From: Toronto, Canada
  • Registered: 2003-12-24
  • Posts: 197

Re: PunBB - More Styles and Less Tables

Kennel wrote:

Removing the nested tables from viewtopic is another good thing. However, if a side-effect of that is that one wide post extends the rest of the posts, I'm not so convinced.

CSS could solve this. Every post is a separate item, so if one post extends past the standard width of the page, the rest will stay inside the page. You just haven't seen it in my PunCSS page since I've only posted the same post, 6 times ;)

Kennel wrote:

I'm looking forward to seeing a more complete solution before I make any decisions. This might be an alternative to CSpotkill's suggestion.

It sounds nearly exactly like what I did, except with a barebones table still inside the HTML. Maybe if you come up with something similar to my PunCSS, we could code PunBB to have this way as default, with a table-less design as another option in the admin interface, for those who want complete control over the design with CSS or those who want true standards compliance?

10 Reply by Paul

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

Re: PunBB - More Styles and Less Tables

Hi CSpotKill. One thing I would say is that I am not trying to compete with your efforts. In any event, my skills are not upto it. I am just suggesting some easy to implement changes which would give end users far more options and more control via the stylsheet and hopefully streamline the markup in the process. I am actually becoming more convinced that your approach is the best way to go in the long run. Think of my suggestions as a quick fix to what I percieve as PunBB's only weakness i.e. limited styling possibilities rather than a suggested design strategy.

P.S. You should have called yourself CSpotSkill smile

P.P.S. I just realised I could reduce each table to two cells instead of 4 or maybe even one cell. That would enable the easy use of borders and dispose of cellspacing="1". If I float the contents of the cell it would even allow for user info and the post to be transposed right to left (do I hear the sound of 1.2 Billion Chinese chearing). In other words, use the table as no more than a rigid frame.

Have to go now. Lunch break over. I seem to have an email from somebody called Yana in the Ukraine who wants to get acquainted. I think I will forward her email to that nice bunch of Nigerian bankers who have kindly offered to make me rich.

11 Reply by Paul (edited by ps21 2004-01-12 15:46)

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

Re: PunBB - More Styles and Less Tables

Hi CSpotKill. One thing I would say is that I am not trying to compete with your efforts. In any event, my skills are not upto it. I am just suggesting some easy to implement changes which would give end users far more options and more control via the stylsheet and hopefully streamline the markup in the process. I am actually becoming more convinced that your approach is the best way to go in the long run. Think of my suggestions as a quick fix to what I percieve as PunBB's only weakness i.e. limited styling possibilities rather than a suggested design strategy.

P.S. You should have called yourself CSpotSkill smile

P.P.S. I just realised I could reduce each table to two cells instead of 4 or maybe even one cell. That would enable the easy use of borders and dispose of cellspacing="1". If I float the contents of the cell it would even allow for user info and the post to be transposed right to left (do I hear the sound of 1.2 Billion Chinese cheering). In other words, use the table as no more than a rigid frame around a pure css interior.

Have to go now. Lunch break over. I seem to have an email from somebody called Yana in the Ukraine who wants to get acquainted. I think I will forward her email to that nice bunch of Nigerian bankers who have kindly offered to make me rich.

12 Reply by Louis (edited by CSpotkill 2004-01-12 18:35)

  • Louis
  • Senior Member
  • Offline
  • From: Toronto, Canada
  • Registered: 2003-12-24
  • Posts: 197

Re: PunBB - More Styles and Less Tables

ps21 wrote:

One thing I would say is that I am not trying to compete with your efforts. ... I am actually becoming more convinced that your approach is the best way to go in the long run. Think of my suggestions as a quick fix ... I just realised I could reduce each table to two cells instead of 4 or maybe even one cell. ... In other words, use the table as no more than a rigid frame.

I know that. Kennel said it might be a good alternative. All I was suggesting was that perhaps we could shove a few tables into my barebones layout and remove the layout CSS, then call that a compromise for the 1.1 code, with an option to remove the tables for those who want a pure CSS layout. (It's just another suggestion, of course. I see nothing wrong with pure CSS myself, just for those who still want a few tables, we could offer both.)

ps21 wrote:

P.S. You should have called yourself CSpotSkill :)

The name is a gaming alias. I made the CSpotkill.com forums for a few (47+) friends I met while playing a game called Counter-Strike. From there, I started modding PunBB and so registered as "CSpotkill" on these forums. My real name's Louis (pronounced like in french, lu-ee).

ps21 wrote:

... forward her email to that nice bunch of Nigerian bankers who have kindly offered to make me rich.

That reminds me of one more mod that must be written for PunBB ? the addition of email protection javascript, or perhaps just replace symbols with textual equivalents, like the ASP.NET forum does (I think it was the forum; maybe it was the blogging software).

As for other mods I'm working on, I'm developing  an error reporting feature for them. It will let me give better support for any issues that may crop up and to fix bugs faster.

It just occurred to me that while we're doing major redesigns of the PunBB interface and re-writing huge chunks of PunBB, it might be good to look at the debugging "features", such as sprinkling in plenty of assertions and possibly adding error reporting with a database of support articles ... What do you use for testing PunBB, Kennel? [If you're curious, I've been reading a huge 600 page book on debugging, so it's on my brain]