StyleLayouts

Applying varying layouts to a single site style

Created by: xing, Last modification: 30 Jun 2008 (09:41 UTC) by Kozuch
In addition to choosing the theme style, you can choose from a fantastic 40 different layouts (since bitweaver 2). To see them, please visit Alessandro Fulciniti's Layout Gala (the original creator) or preview the layouts in our gallery the way they appear in your admin panel. It's easy to add even more layouts … but might not be necessary.

Choosing a layout

Visit the Admin --> Themes --> Themes Manager page (themes/admin/admin_themes_manager.php) and find a tab called Style Layout. That allows you to specify the layout for some themes (the ones that use the correct ID's for their DIVs). Bitweaver's built in themes note in their descriptions if they support the Layout Gala or not. Other themes can easily adapt to it by using the correct ID's for their DIVs.

How does it work?

If a theme uses the correct IDs for its DIVs, it's compatible with the layout chooser. This allows you to pick a style such as the clean and then pick one of the 40 different layouts that are available. Additionally, they all work with bitweaver's dynamic column display: after you picked a style like clean in combination with a fixed width layout such as 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 or modifying layouts

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:

Files associated with a given layout


<?php
<layout_name>.css
<layout_name>.gif
<layout_name>.txt
?>

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

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


How to update a theme to work with the 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:

Renamed CSS IDs (bitweaver 1 --> 2)


<?php
#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.