History of StyleLayouts

Differences from version 3 to 7



@@ -1,16 +1,13 @@

 {maketoc}
-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].
+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 [http://blog.html.it/layoutgala/|Layout Gala] (the original creator) or __[http://www.bitweaver.org/photos/gallery/3/21|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.
 
-! 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...
+! 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?
-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.
+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 [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
+! 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

@@ -27,16 +24,16 @@

 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 {}
+#wrapper {}
 
 /* Content wrapper */
-#content {}
+#content {}
 
 /* Various different combinations of visible columns */
-.blocks3 {}
+.blocks3 {}
 .blocks2e {}
 .blocks2n {}
-.blocks1 {}
+.blocks1 {}
 
 /* Usually the left navigation column */
 #navigation {}

@@ -45,10 +42,11 @@

 #extra {}
 {/code}
 
-!! 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.
+!! 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:
-{code title="Renamed CSS IDs"}
+{code title="Renamed CSS IDs (bitweaver 1 --> 2)"}
 #bitmain --> #content
 #bitleft --> #navigation
 #bitright --> #extra

@@ -61,4 +59,4 @@

 * 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.
+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