Topic: Simplified CSS

Hi there.

I've just been messing around with the development version of punbb.  It's great to see that empty tables are no longer being used as spacing devices!  It looks like a great piece of software.  I chose it over phpbb2 because I could rewrite the authentication system more easily.  Our BB needs to have a link to a separate authentication server to keep users' usernames and passwords consistent.  I found that in punbb this was easy to do.

On that note: is it possible to distill the CSS classes/ids down to a smaller list?  Trying to write a theme/skin from scratch is impossible.  I understand that all the different classes and IDs make the whole thing infinitely more customisable, but so many?

I would propose having far fewer, and relying on the html types more.  The ones that are kept should be consistent, and easy to understand the meaning of.

I've spent the morning trying to reskin the development version, but haven't achevied any good results.

Anyway, keep up the good work!  You can see the board we are using at http://forum.bytemark.co.uk .

Patrick

Re: Simplified CSS

I'm gonna let Paul respond to this :)

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

3

Re: Simplified CSS

I'm thinking.

Re: Simplified CSS

The classes / ids I'm thinking of are basically along the lines of existing HTML markup -- i.e. H1-H6 for headings. 

for example:
H1                       -- can be for the page heading / site title &c. (as is already done)
H2  and THEAD TH -- can be for subheadings / table heads
H3  and TBODY TH -- can be for forum topics and  subsubheadings
  ... and so on.

but you get the idea.  Obviously there are things that need separate classes, e.g. left/right floats, div's containing the header / navbar / forum, topic and post levels / body / footers, but not too many.  I don't think that this would be much of a rewrite from the PHP side, since the XHTML is already well formed, but from the CSS side, the effort could be a bit more substatial.

This would make skinning the whole site with a simple stylesheet much easier.  I also wonder what the board looks like in less-educated browsers like IE (some people use it -- often without realising!).  Does anyone have an estimate for how many classes and ids there are in the current development code?

5

Re: Simplified CSS

The board looks the same (or close enough) in the following browsers
- IE5Win
- IE6Win
- Gecko (Firefox, Moz, Nutscrape)
- Opera
- Safari 1.2
- IE5.2Mac (subject to further testing)

Styling tags sounds fine in practice but it has it's problems. The same tag can take on different styles in different parts of the board. That means using descendant selectors which requires id's or classes on higher level containers. And what if you have the same tag within a container at the same level eg. <div><p></p><p></p></div> and you want to style the <p>'s differently, you require one of them to have a class.

Of course it can be simplified considerably but you end up with a design that is no more flexible than the current version. You also end up with a design which is a compromise; if you want everything to appear exactly as intended then you need to the markup and classes/id's to work with.

You will however be pleased to know that I have spent the last week rewriting the css and making alterations to the XHTML which will hopefully make the design even more flexible and simplify the css.

Re: Simplified CSS

Paul wrote:

The board looks the same (or close enough) in the following browsers
- IE5Win
- IE6Win
- Gecko (Firefox, Moz, Nutscrape)
- Opera
- Safari 1.2
- IE5.2Mac (subject to further testing)

It's good to know you're testing it thoroughly!

Paul wrote:

Styling tags sounds fine in practice but it has it's problems. The same tag can take on different styles in different parts of the board. That means using descendant selectors which requires id's or classes on higher level containers. And what if you have the same tag within a container at the same level eg. <div><p></p><p></p></div> and you want to style the <p>'s differently, you require one of them to have a class.

Yes, I would agree with that.. the classic example would be to have alternate lines in a table.  I was more concerned with the sheer quantity of classes/id I would need to write styles for.  I was hoping for a substantially boiled down version, with more consistency / intuitity (?sp) with the tag names.

paul wrote:

Of course it can be simplified considerably but you end up with a design that is no more flexible than the current version. You also end up with a design which is a compromise; if you want everything to appear exactly as intended then you need to the markup and classes/id's to work with.

I would say if the styles were simplified, you would end up with a design that was less flexible.  But then how much flexibility does one need? I think that the current level of flexibilty is overwhelming and unworkable.

paul wrote:

You will however be pleased to know that I have spent the last week rewriting the css and making alterations to the XHTML which will hopefully make the design even more flexible and simplify the css.

I'll look forward to seeing this!  Is there a public RCS repository somewhere?  I would be willing to help with this apsect if you like.

7 (edited by kin 2005-01-16 20:40)

Re: Simplified CSS

maybe i'm not so smart as you guys but it took me too much time to find out how the styles are linked to those layers. Why not combine those 3 files into 1 stylesheet? It would make it easier to modify the template.

8

Re: Simplified CSS

1. A lot of people will just want to alter the colour scheme and nothing else. It therefore makes sense to have all the colours in one easy to edit stylesheet.

2. Most people won't want to bother with the stuff in base.css so it is easier to seperate it out rather than complicating the main stylesheets.

9 (edited by Argyle 2005-01-16 20:54)

Re: Simplified CSS

Wheres the problem with 3 different CSS files, if the outcome is for example that all the color-related stuff is in one file and nothing else?

Get the web developer toolbar for Firefox and have 'outline block level elements' and 'display ID & class details' activated. It helps you a lot with understanding the structure and use of each tag.
Its Edit CSS functionality allows you live-edit the CSS. So you can work by trial and error. Or, alternatively, and even easier, use this http://punbb.org/forums/viewtopic.php?id=5868

With this and after reading a CSS-tutorial about how selectors work, even a total noob like me can create its own skin by modifying.


Also imho its not everybodies business to create own skins. Those who just cant do it have to wait and see what others create and publish. And i think with other board-systems and stuff the percentage of this group is remarkably higher.

One of the lessons of history is that nothing is often a good thing to do and always a clever thing to say.
~ Will Durant (1885 - 1981)

10

Re: Simplified CSS

Pual I love you , you are so smart!

Yours, Benny.

11 (edited by kin 2005-01-17 13:30)

Re: Simplified CSS

thnx for the tips guys. Ofcourse I don't forget the goal of the forum is to be runnin fast. I'm a graphical designer and I wanted to alter the layout to fit in it. If for example the background, box properties, font, fontcolor are grouped in like 3 lines in a stylesheet or in 1 line using ";", it would be easier to modify it.

But in all I'm very happy to use this forum. It's so clean, non-chaotic and easy to use. cool

Argyle, I used almost the same method to test the CSS but I personally prefer http://mamboforge.net/projects/msas/ (mambo stand alone server) to maintain the file roots and run the forum localy on my computer.

12

Re: Simplified CSS

One thing that should be remembered is that the stylesheets are done this way because this is the way I thought was best. Other people will have different views. In the end the purpose of the stylesheet is simply to apply styles to the tags that exist. There is nothing stopping people from tearing up the existing stylesheets and starting again with their own.

On a more general note. The way that css is applied to 1.2 is rather different to 1.1. In 1.1 styles were created to perform a particular task e.g. align something top/right and give the element a background colour. In 1.2 the classes and id's really do no more than identify particular elements. The classes and id's can then be used to do whatever you like with the undelying markup. For anybody having difficulty, the most important thing to learn is how to use descendant selectors which will allow you to style just about any individual board element.

TIP OF THE DAY.

If you are finding a particular selector does not seem to be doing what you wanted remember specificity. This is not strictly accurate but works in most cases

id = 100
class = 10
tag = 1

So #myid(100) DIV(1).myclass(10) = 111
To overrule it somewhere else you would need DIV(1)#myid(100) DIV(1).myclass(10) = 112

Re: Simplified CSS

Paul wrote:

TIP OF THE DAY.

If you are finding a particular selector does not seem to be doing what you wanted remember specificity. This is not strictly accurate but works in most cases

id = 100
class = 10
tag = 1

So #myid(100) DIV(1).myclass(10) = 111
To overrule it somewhere else you would need DIV(1)#myid(100) DIV(1).myclass(10) = 112

You lost me here.

Re: Simplified CSS

basically i think you add up the numbers and the bigger the number the more important that setting is e.g. id is the most important setting so a id setting would override the class setting (i think)

Re: Simplified CSS

I understand the math logic, but where do these numbers come from?  Maybe I am reading into it too deep.

Re: Simplified CSS

they are just numbers for all ids, classes, and tags its just a simple way of working out which settign with be dominant

17

Re: Simplified CSS

I just put the numbers in so you could see the value of each element, you would actually write #myid DIV.myclass