adjusting streber's interface with CSS/

Topics

CreatedNov 11, 2006 / pixtur

ModifiedJan 6, 2009 / phsouzacruz

View previous 8 versions

Attached files

No files uploaded

This page is a very rough draft

About themesπ

main theme "Clean"
additional themes like "WebbPlatsen"
located at themes/*
individual for each user
- restrict "edit own profile" to enforce a theme

How CSS is used in streberπ

To see how much is done with CSS, you can switch the theme off. If you are using Firefox, go to "View > Page Style > No Style". As you can see, there is almost no formatting at all. With some knowledge of CSS you could completely rebuild the interface to a different look and layout. E.g. Navigation on the left side, instead on the top of the page.

There are no <Table>s being used (except from lists)
Most html-elements have a unique class-attribute to allow formatting

Creating a new themeπ

There a two ways of creating a new theme:

Use the custom-theme and overwrite settings.
Duplicate one of the existing themes and start adjusting the css code

Creating a custom themeπ

In themes/custom/* you find the framework of a theme that completely includes the Clean theme. This allows you to add any adjusting css-code after the @import statements in the respective css-files.

Although this slightly increases the download size and sometimes requires to look inside the Clean theme for how things are done there, it gives you a fast and easy solution to quickly adjust things like colors, font families, background images, etc.

Creating a new theme from a copyπ

If you build your own theme from a copy of another theme, you need to be aware, that the html structure of streber changes over time. Since pixtur develops with the clean theme, this one will always work. But it requires you — as the author of a theme — to check for changes between the different streber versions (e.g. the changes made to clean/theme.css) and adjusting your theme respectively.

More on CSSπ

Web Developer tools for Firefoxπ

This extension will tremedously speed up your styling. E.g. it allows you click on an element and lists where in which css-files and which lines this style is defined. pixtur can't do anything without this tool.

2 Comments

goldstift:Firebug extension

5 years ago

Hi,

I personally favour the firebug extension of firefox to create new or adjust existing css settings. This extension is incredible when it comes to breaking down the effects of many different settings on a single html element.
Read more at http://www.getfirebug.com/

pixtur:me too