Extended_CSS_classes - e107inc/e107v1 GitHub Wiki
With .7 sees the start of the implementation of extended css classes. This allows the theme designer to style individual elements of their site as well as styling groups of elements.
For example, all form elements within e107 have a css class of 'tbox'. This you to give all form elements a shared style by creating a tbox class in their themes style.css:
This gives a consistent style to all form elements on the website.
But now with .7 comes the ability to style individual elements. Lets take for example the login menus username and password form fields:
As you can see in the class, as well as the 'tbox', we have 'login user' and 'login pass'
(These statements are simply saying that the elements pull their styling from three classes, not one: they use any styling defined by the .tbox, .login and .user or .pass classes. This CSS functionality is not yet supported by all browsers.)
These extra definitions do not affect your theme if you don't specify a style for them - they will continue to use the 'tbox' style as before. But now, if you wish, you can add extra style to these form fields by making use of their extended identifiers:
What the above code will do when in your style.css, will be, a well as apply the top tbox style to the user and pass login fields, these two fields will also be given a fixed width of 70px.
If you want all .login fields to be 70 pixels, you can simplify the second definition to be:
We can then take this a step further and give the username field and the password field different fixed widths from each other:
So, as you can see, .7 brings with it much greater flexibility for styling with css (as long as you don't mind the associated browser limitations.)