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].

! Where is all this new stuff?
When you visit the Admin --> Themes --> Themes Manager page (themes/admin/admin_themes_manager.php) there is a new tab called __Style Layout__ that allows you to specify the layout for some themes. The themes that support this new feature have a note saying so in their description.

! 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. All the existing layouts have been modified from the original in a way that they work with bitweaver dynamic column display. That means that, when you pick a theme such as __clean__ in combination with a fixed width layout such as [http://blog.html.it/layoutgala/LayoutGala08.html|Number 8] the width of the main content column in the center will adjust it's width to fill in the missing area. This icreases the number of layouts even more since you can define when the columns appear in the Admin --> Themes --> Layouts page.

! 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 {}

!! I want to update my theme to work with the new style layouts
Not all themes are suited for this system. depending on what graphics you use and how they interact with other parts of bitweaver, it might not work with a flexible layout system. For instance, if you have a theme that has a header where the graphics tie in with the side columns, you probably can't convert it into a flexible style.
If you have a rather generic style where you build blocks in your theme, the easiest method of conversion probably is to remove your custom bitweaver.tpl and use the new default one. To avoid class and id name collisions, we've renamed a few IDs:
{code title="Renamed CSS IDs"}
#bitmain --> #content
#bitleft --> #navigation
#bitright --> #extra
#bitbottom --> #footer

!! 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