Themes Package

The Themes Package manages the look and feel of bitweaver websites

Created by: SEWilco, Last modification: 31 May 2009 (15:53 UTC) by Will
Themes control the general appearance of a site. This is done through a variety of tools and files, including Layouts, Modules, CSS, and HTML Smarty Templates. This page provides details about various aspects of the Themes Package and theming elements you can use to customize the look and feel of a bitweaver site.

Theme Styles

Theme styles control the details of the look and feel of your site. A few different Theme styles are included with bitweaver, and it is easy to create your own. You can choose among Theme styles by selecting Administration -> Themes -> Theme Manager and then clicking the Site Style tab. The files that make up a theme style include css files, templates, and icons. These files are found in /themes/styles/<stylename>/. Creating your own theme is most easily accomplished by starting by cloning an existing theme. Cascader is our most clean theme and highly recommended as a starting point. See our ThemeTutorial for details on how to create your own theme style.

CSS

At the core of a custom theme style is the css style sheet that define colors, font styles, and other aspects of the look and feel. If you are not familiar with css we highly recommend you check out some tutorials first; we recommend HTMLDog's CSS Tutorials; they are easy to follow and you will learn rapidly.

Each theme style has at least one css file. The primary css file resides in the style directory and is named after the style. For example: /themes/styles/foostyle/foostyle.css

Each theme can also have multiple variations; such as different color schemes. This is valuable if you want to allow users or groups to pick their own theme variation. Alternate css styles go in an alternate directory in the theme style; for example:
/themes/styles/foostyle/alternate/bluebackground.css
/themes/styles/foostyle/alternate/orangebackground.css

General CSS Schema

Our CssSchema page has details about css selectors used throughout bitweaver. bitweaver has a very efficient use of css selectors and it is fairly easy to create a unique looking theme with just a few css changes.

Package CSS

Each package may have its own css styles which you will generally find either in a css file in the package or inline in the header_inc.tpl template in the package. CSS in a css file can easily be over written with your theme style css file, as your theme style css file will be loaded AFTER any package css styles. To override the css in a header_inc.tpl you will probably need to override the template file; please see the next section on templates for more details on that.

Templates

The layout of every package in bitweaver is derived from smarty html templates. These files are found in each <package>/templates/ and <package>/modules/ directories. Theme styles can over ride any package template to customize the html layout of any page or module. Custom templates go in your theme style directoy, inside a directory named after the corresponding package: /themes/styles/<yourstyle>/<packagename>/<tpl file=""> See the template section of our ThemeTutorial for details on how to create custom templates.

Icons

In Bitweaver it is possible to use your own set of icons to give your site the ultimate in customization. You can over ride any default icon by placing custom icons in an icon folder in your theme style: /themes/styles/<yourstyle>/icons/<packagename>/. see the icon section of our ThemeTutorial for details on how to add custom icons. The extension of the icon has to be: jpg, gif, png.

Layouts

Layouts in bitweaver are governed at the highest level by 5 major module areas: top, bottom, center, left column and right column. Modules can be assigned to these areas to inject all sorts of content into your layout. Unique layouts can be created for various areas of your site; e.g. you can display different modules along side blog posts than you do along side wiki pages, etc. Further the block areas can be organized in different ways to control the layout from a macro level. Read on or more details about each of these aspects of Layouts.

Module Assignment

Blocks of content can be added to your layouts via Modules. Modules are assigned to layouts by selecting Administration -> Themes -> Manage Layouts. There you will find a list of modules that can be added to the top bottom left right and center areas. The order in which Modules appear can be controlled; and Modules can be made visible to select groups - giving you access control over which modules which users see.

Modules also often take optional parameters which allow you to fine tune what is displayed by the module. For example, the Blogs Package's recent blog posts module can display recent blog posts by just a particular user, or a group, or draft blog posts, etc. Please see the inline help available when you select a module for its available parameters.

To tune your modules after assignment there is an ancillary quick administration panel, which you will find by selecting Administration -> Themes -> Configure Layout Options. That interface will let you change the parameters of all modules at one. For changing parameters of existing module assignments, it is much faster than using the Manage Layouts interface.

Layout Variations and Column Control

Layout variations can be achieved in two ways: through Package specific layouts and by tuning which module areas are display under various conditions.

You can create different layout variations when you assign modules. At the top of the module assignment panel ( found by selecting Administration -> Themes -> Manage Layouts ) are options under Customized Layouts - this lets you select the layout you wish to customize. You can also clone an existing layout to save time. For example, assume you have created a custom layout for the wiki section, and now you wish to create a similar layout for the blog section - you can start by cloning your wiki layout, then customize the modules for blogs accordingly.

You can also turn on and off selections of overall layout. Each package has different display Modes: display, list, edit, upload, admin. You can disable column presentation on a package and package mode basis. Select Administration -> Themes -> Column Control to tune the display of module areas.

Layout Style

You can rearrange the layout of the three middle module areas: left column, center, and right column by changing your Layout Style. Most themes shipped with bitweaver support this method of layout selection. Themes that support the layout style selection have a note of it in the description. This option lets you choose between fixed layouts, liquid layouts, having fixed or auto expanding areas, putting both columns to one side or another, etc. These options are most intuitive to understand by simply looking at the menu. You can see an image of these options here or by selecting Administration -> Themes -> Themes Manager and then the Style Layout tab in your bitweaver install.

For Developers: for more technical information about how the css of Themes and Layout Styles relate see StyleLayouts

Configuring the Top Menu

The top menu is a special module (kernel:top menu) within bitweaver, it is auto assigned to your layout during install by default, and has its own administration panel. You can customize what items are listed in the top menu, what order they appear in, and how they are labeled. You will find the settings by selecting Administration -> Themes -> Menus from the menu bar of your new bitweaver install. Or go to yoururl/kernel/admin/ to get to a menu page, find Themes and select Menu in the list under the Themes heading.</packagename></yourstyle></tpl></packagename></yourstyle></package></package></stylename>