ASP.NET Themes in Boogaloo

Boogaloo uses generic ASP.NET Themes ( /App_Theme/{theme name} ), but overrides the default behavior, which allows the designer to manually order Cascading Style Sheets (CSS) and group them by like conditions and media types.

Theme configuration in Boogaloo is an option in the Settings Menu, located at the top of every page in the Admin section.

Adding a New Theme

  1. Create a new folder inside ~/App_Themes.
  2. Add your CSS to the newly created Theme folder (skin files are ignored by Boogaloo's theme configuration).
  3. Under For the Designer in the Settings Menu, click "Themes" link and check the themes that you would like associated with your currently selected website.
Boogaloo Theme Selection
  1. Select "(Click to globally set the theme for this host)" to set the theme for every page on the current website, and select the newly added theme.

CSS Configuration

In order to configure a theme, you must select a theme from the drop-down menu (all Theme folders located under /App_themes are displayed in this menu). Once a theme is selected, you have the following options:
  1. Bundle each conditional block into a single client side reference (see examples below).
  2. Remove whitespace and comments from style sheets as rendering.
  3. Compress style sheets (Gzip stream compression).
  4. Group CSS into different conditional groups (or into a special group, such as no display, which removes the style sheet altogether).
Boogaloo Theme Configuration

EXAMPLE : Mindfly's site when Bundle is turned off
Bundle option off


EXAMPLE : Mindfly's site when Bundle is turned on
Bundle option on

CSS Theme Manifest files

Manipulation of the ASP.NET theme is accomplished by saving a special XML file located at ~/AppData/ThemeManifests/{theme_folder_name}theme.manifest. Link tag replacement occurs in Boogaloo.Core.UI.BasePage Render routine.

Last edited Oct 23, 2009 at 6:28 PM by teecer, version 23

Comments

No comments yet.