History of StyleLayouts

Comparing versions
Version 5Current version
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 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 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 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:

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


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:

Renamed CSS IDs


<?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.
 
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.
Page History
Date/CommentUserIPVersion
30 Jun 2008 (09:41 UTC)
Kozuch85.207.244.1607
Current • Source
xing194.152.164.455
View • Compare • Difference • Source
xing194.152.164.454
View • Compare • Difference • Source
xing194.152.164.453
View • Compare • Difference • Source
xing194.152.164.452
View • Compare • Difference • Source
xing194.152.164.451
View • Compare • Difference • Source