1 (edited by downliner 2008-02-17 16:38)

Topic: Styling PunBB documentation - ideas welcome

In an effort to better understand the PunBB CSS myself I have started working on some unofficial styling documentation. My original idea was to simply work through each line of the PunBB CSS and show exactly what changed with each line. The results of my efforts can be found here.

I worked from a fresh copy of PunBB 1.2.16 consistently using style/imports/Oxygen_cs.css, and provided both the original CSS, altered CSS, and a screenshot documenting the change in appearance.

As this was only for testing purposes some of the screenshots are low quality, but from this experiment I've realised the documentation has probably been approached from the wrong direction anyway. If, for example, somebody wanted to change the Main Menu Link Colours they wouldn't actually know beforehand which line in the CSS should be referenced. As a result they would have to jump between all of the threads I've created and check each screenshot - not the most practical use of time.

My new idea would be to setup a feature such as FotoNotes, a demo I've created can be found here (Hover over the Title and Description). By hovering over sections of the style a user can see exactly which line of PunBBs CSS would need to be edited. Multiple pages of FotoNotes would be needed, possibly broken down into Background Colours, Text Colours, Borders, etc.

Any feedback on how best to approach this documentation would be more than welcome smile Anyone who may be struggling to style PunBB should certainly chip in their own thoughts on how some documentation would make it easier for them.

If we can find a decent format for outlining documentation for styling PunBB 1.2 then it should be a breeze to knock out similiar documentation for PunBB 1.3 Final (whenever that may be due), that is of course if official documentation isn't provided (other than the /* css notes */ )

So... ideas welcome smile

Re: Styling PunBB documentation - ideas welcome

Ooh, that looks really cool big_smile

Re: Styling PunBB documentation - ideas welcome

I like the FotoNotes version. Easier to quickly find what you're looking for.

~James
FluxBB - Less is more

Re: Styling PunBB documentation - ideas welcome

Dr.Jeckyl wrote:

I like the FotoNotes version. Easier to quickly find what you're looking for.

I have to agree on that smile I've been playing with fotonotes some more and layered a full punbb index page here. I'm still playing with it at the minute, there seems to be a problem with some html used though - sometimes the line breaks and links don't seem to show correctly. Showing the HTML instead so will have to see why that is.

Once I've played with the script a little more I'll plan what will be the best way to break down the CSS into seperate images - any ideas are welcome smile

Re: Styling PunBB documentation - ideas welcome

I don't see why it has AJAX in the title, as it doesn't use it.

But it looks fancy anyway smile

Re: Styling PunBB documentation - ideas welcome

elbekko wrote:

I don't see why it has AJAX in the title, as it doesn't use it.

But it looks fancy anyway smile

I forgot to change the title from the original FotoNotes example tongue When adding/editing/deleting a note the changes are immediately updated on the server so I think it may use Ajax - I've just temp disabled the ability for guests to use any of those features whilst still practising with it myself. Don't want some bugger coming along and deleting all the notes I just added lol

Re: Styling PunBB documentation - ideas welcome

All you need to style PunBB is Firefox and Firebug, nothing else.

Right click -> Inspect Element -> Look at Right panel and you'll see all the CSS info you need to know.

smile

Re: Styling PunBB documentation - ideas welcome

I suspect this project would be aimed toward the novice or someone not very familiar with styling PunBB.

~James
FluxBB - Less is more

Re: Styling PunBB documentation - ideas welcome

Dr.Jeckyl wrote:

I suspect this project would be aimed toward the novice or someone not very familiar with styling PunBB.

Most definately smile I picked up the basics of CSS through editing PunBB skins and spent many countless hours running trial-and-error changes. Nowadays I consider PunBB to have the most logical CSS I've seen (and I've used many open source scripts) so hats off to Paul for the logical approach but as a novice to both PunBB and CSS it can certainly be daunting to start editing files. Anything I can do to make the process easier is worth it in my opinion.

FTR, I have Firebug installed and have barely used it. It's first impression didn't strike me as novice-friendly so it has sat unused on my toobar ever since tongue I'm still a novice at heart lol