History of StyleLayouts

Since R2 of bitweaver, there has been a great addition to the styling system. it is now possible to choose the theme layout in addition to the theme style. you can choose from a fantastic 40 different layouts. To view more details on the various layouts, please visit the [http://blog.html.it/layoutgala/|Layout Gala].

! What different layouts are there?
Currently we have added the 40 different layouts found in the [http://blog.html.it/layoutgala/|Layout Gala]. It's easy to add more layouts though, but might not be necessary...

! How does it work?
Some themes use the correct div IDs to make them compatible with the layout chooser. This allows you to pick a style such as the __clean__ style and then pick one of the 40 different layouts that are available.

! Adding new layouts and modifying existing ones
If you wish to edit an existing layout we recommend that you make a copy of an existing layout, rename it and then edit that to avoid problems during your next update.

!! Layout files
All layouts can be found in __themes/layouts/__. Every layout can have 3 different files associated with it:
{code title="Files associated with a given layout"}
* The css file obviously contains the css associated with the given layout. (required)
* The gif file is used as a small preview of the given layout. Please don't exceed a size of 107x83 px to avoid complications in the layout chooser (see below for more details). (optional)
* The txt file contains a short description of the layout. Please keep this short since it will cause problems in the layout chooser if it's too long. (optional)

The layout files are small and quite straight forward to edit once you grasp the concept of negative margins.
{code source=CSS title="Layout CSS IDs and Classes"}
/* Wrapper around #content - used to help position #content */
#wrapper {}

/* Content wrapper */
#content {}

/* Various different combinations of visible columns */
.blocks3 {}
.blocks2e {}
.blocks2n {}
.blocks1 {}

/* Usually the left navigation column */
#navigation {}

/* Usually the right column that contains extra information */
#extra {}

!! Advanced layout work
I have added a couple of additional files in the themes/layouts/ directory:
* layouts_xcf.tar.gz - Contains an xcf file with all the currently used layout gif images. You can use this if you want to make similar layout images to the existing ones.
* resize.sh - The layouts that use a static width are set to 700px width. If this does not suit your needs, you can use this script to adjust the width of all layouts at once. Please execute the script using: sh resize.sh --help
* layouts_style.tar.gz - If you feel like working a lot with the layouts, there is a very simple theme that allows you to display the outcome of your custom layout - i used this to create the screenshots for all the layout gif images.

View our CssSchema for additional information.
Page History
30 Jun 2008 (09:41 UTC)
Current • Source
View • Compare • Difference • Source
View • Compare • Difference • Source
View • Compare • Difference • Source
View • Compare • Difference • Source
View • Compare • Difference • Source