How to Create Customized CSS3 ThemeRoller Themes - dummies

How to Create Customized CSS3 ThemeRoller Themes

By John Paul Mueller

The 24 predefined CSS3 themes provide a broad range of color, text, and other choices. However, it’s possible to create a significantly greater number of themes by using the custom approach. You could start with the default theme setup and work from there, but the best approach is to find a predefined theme that looks close to what you want and modify it instead.

Not only will you do less work this way, but you may find that there aren’t that many features to change once you have a predefined theme in mind. This article helps you create a custom theme using ThemeRoller.

Each theme consists of a number of settings. By changing a particular setting, you control the appearance of all the jQuery UI features, including all of the widgets. Each of these settings has a number of subsettings you can use to control the overall appearance of your theme. The following list provides an overview of these settings.

  • Font Settings: Determines the overall appearance of text in the theme. You can choose the font family, weight, and size of the font.

  • Corner Radius: Determines the size of the rounded corners used for the various elements. This setting won’t affect a browser that doesn’t support rounded corners, such as Internet Explorer 7.

  • Header/Toolbar: Specifies the settings for the background and border used for all headers and toolbars.

    When working with the background, you can choose the background color, texture, and percentage of coverage. A texture specifies how the background is patterned, such as the use of diagonals or diamonds. Clicking the texture field automatically displays a pictorial list of acceptable — just choose the texture you want to try. Selecting the right texture can add pizzazz to your site.

    image0.jpg

    The border settings control the border, text, and icon colors. When you click one of these fields, you see a color selection dialog box. However, you can also type a specific color value, using hexadecimal notation.

    image1.jpg

  • Content: Provides the same background and border selections as those provided by the Header/Toolbar settings. The difference is that these settings affect the page content, rather than headings and toolbars.

  • Clickable: default state: Provides the same background and border selections as those provided by the Header/Toolbar settings. The difference is that these settings affect controls that are in the default state, rather than headings and toolbars.

  • Clickable: hover state: Provides the same background and border selections as those provided by the Header/Toolbar settings. The difference is that these settings affect controls that are in the hover state (when the mouse cursor is placed over the top of the control), rather than headings and toolbars.

  • Clickable: active state: Provides the same background and border selections as those provided by the Header/Toolbar settings. The difference is that these settings affect controls that are in the active (selected) state, rather than headings and toolbars.

  • Highlight: Provides the same background and border selections as those provided by the Header/Toolbar settings. The difference is that these settings affect anything the user has highlighted onscreen, rather than headings and toolbars.

  • Error: Provides the same background and border selections as those provided by the Header/Toolbar settings. The difference is that these settings affect error messages (including content), rather than headings and toolbars.

  • Modal Screen for Overlays: Defines the way in which overlays appear on screen. An overlay is information that is presented over the top of existing content in much the way a dialog box displays over the top of an application. The settings control the background and overlay appearance.

    The background settings set the color, texture, and percentage of coverage of the background. The textures used for an overlay are completely different from those used for other elements, so you need to check them carefully. In every other respect, the background settings work the same as those used for the Header/Toolbar settings.

    The Overlay Opacity setting controls how well you can see the underlying content. In most cases, ThemeRoller provides a modicum of show-through to give the page a glasslike appearance (found in some operating systems today). However, you can change this setting to provide various special effects. Setting this value too low tends to prove distracting for the reader because the original content is seen too easily.

  • Drop Shadows: Modifies the appearance of drop shadows, which tend to give some page elements a 3D effect. You can control the background and the overall appearance of the drop shadow. The background controls are precisely the same as those used with Modal Screen Overlays.

    The overall appearance of the drop shadow is defined by the shadow opacity, thickness, and offset from the shadowed element. You can also control the rounding of the shadow corners (when the feature is supported by the browser).

    image2.jpg