Referencing Multiple Themes on a Single Page - J Query

Problem
More than one theme must be applied to your application and appear on a single page. For example, your jQuery UI tabs must be styled according to a primary theme, and widgets within the tab panels must conform to a different theme.

Solution

Create a second theme using ThemeRoller, and apply it selectively to widgets or components in your application by associating the new theme with a class, an ID, or other scoping selector during the download process.
jQuery UI themes are intended to create a consistent look and feel in jQuery UI widgets and other interface components across an entire application, but sometimes the design is more complex, and a different look and feel must be applied to certain widgets depending on where they appear in the application.
In the case of our travel application, let’s say the designer reviews our final design and feels that using dark gray on all clickable elements makes it difficult to distinguish the reservation type tabs from the form fields within the set. He decides the top tabs should retain their current style, but all interactive components inside the tabs—including the date pickers and search button—should be styled differently and have a yellow default state. Figure (Our original theme (A) sets the clickable default state to gray for all interactive elements;the new design (B) keeps the top tabs gray but shifts all interactive components inside the tabs to yellow)

Our original theme (A) sets the clickable default state to gray for all interactive elements;the new design (B) keeps the top tabs gray but shifts all interactive components inside the tabs to yellow

Figure : (Our original theme (A) sets the clickable default state to gray for all interactive elements;the new design (B) keeps the top tabs gray but shifts all interactive components inside the tabs to yellow)

shows our current and our new design.
There are a couple of ways to create style exceptions for the tab contents. As described in Recipe (Overriding jQuery UI Layout and Theme Styles), we could write and reference override rules to modify the default theme styles for the datepicker and button. To do that, we’d have to use a design editing tool like Adobe Photoshop to figure out all of the new color hexadecimal values and then produce new yellow background images.
Or, we could just create a new theme in ThemeRoller that matches our secondary theme (in this case, yellow clickable elements), scope it to our tab content area specifically, and then reference it after our original theme stylesheet. The jQuery UI download builder provides a simple interface for scoping a theme in this way: the Advanced
Theme Settings area on the Download page can be set to specify a scoping selector— a class, an ID, or other hierarchical CSS selector—that allows you to pinpoint exactly which components will be styled with the additional theme.
Returning to our travel reservations application, at this point we’ve completed the steps described in Recipes (Styling jQuery UI Widgets with ThemeRoller) through (Applying a Theme to Non-jQuery UI Components):

  • Created and downloaded a theme and referenced it in our project (Recipe (Styling jQuery UI Widgets with ThemeRoller))
  • Wrote and appended override rules to modify a few of the theme’s default styles (Recipe (Overriding jQuery UI Layout and Theme Styles))
  • Added a few Framework classes to our search button to apply our theme styles (Recipe (Applying a Theme to Non-jQuery UI Components))

Now we’ll review how to scope a second theme and apply it to our project.

Step 1. Create another theme using ThemeRoller

Open the jQuery UI website at http://jqueryui.com and choose Themes from the top navigation bar, or go directly to http://wisdomjobs.com.
We created the original theme to style all of the widgets used in our design. However, in this case we only want to style the widgets within the tab content panel; we can disregard the top navigation tabs for now.
As we did in Recipe (Styling jQuery UI Widgets with ThemeRoller), we’ll start with the Sunny theme, since it closely matches the yellow clickable states and header styles in our new design by default (Figure (The new target design with yellow clickable states and headers for tab contents closely matches the Sunny gallery theme)).

The new target design with yellow clickable states and headers for tab contents closely matches the Sunny gallery theme

Figure : (The new target design with yellow clickable states and headers for tab contents closely matches the Sunny gallery theme)

The Sunny theme is very close to our new target design, with a couple of exceptions:the header that sits above the datepicker is gray when ours is yellow, and the content area and active state border color is a darker brown than is specified in our design.
We’ll return to the Roll Your Own tab to tweak a few settings:

  • Change the header background from gray to yellow: The background color and border of our additional theme needs to match that of our “Clickable: default state.”
    1. Open the Header/Toolbar section.
    2. In the background color field enter #FECE2F; we don’t need to make any changes to the texture or opacity settings.
    3. The white text is now barely visible against the yellow background, so we’ll darken it to match the gray text elsewhere in our application; enter the value #333333.
    4. Likewise, the icons in the datepicker header need to contrast more with the background, so we’ll make them medium brown; enter #A27406.
    5. Finally, change the border color to #D19405.
  • Change the content and active state borders to light brown: Content borders appear around accordion sections and define the tabs, dialog, slider, datepicker, and progress bar outer containers.
    1. Open the Content section.
    2. Update the border color to match that of the header border, #D19405.
    3. Hit the Tab or Enter key, or click elsewhere on the page, to preview the changes in the widgets on the right.

Step 2. Scope the new theme and download it

When you’re finished editing the Sunny theme, click the “Download theme” button in the toolbar’s Roll Your Own tab, which navigates you to the jQuery UI download builder.
Before we edit the download builder settings, we need to determine which scoping selector we’ll use to apply our new theme to the travel application’s content panels. We want to ensure that we only affect the tab contents and don’t alter the original theme we applied to our top navigation tabs.
A scoping selector is a class, an ID, or an HTML tag that specifically identifies the parent container of the elements we want to style. It’s best to choose a scoping selector with the most limited range so that you don’t inadvertently scope styles to elements that should assume the base theme styles. In our travel reservations application, the scoping selector should identify the container that encloses the tabs’ content and does not also enclose the tabs’ navigation panel.
When we look at the generated markup in our application, we see that each content panel is assigned the class ui-tabs-panel:

Because the content panel markup appears after and is separate from that of the tabs’ navigation, we can safely scope our new styles to the ui-tabs-panel class without affecting the styles applied to the top tabs.
With our scoping selector identified, we can return to the jQuery UI download builder.
In the right column under Theme, we’ll specify how this new theme should be scoped within our application. Click Advanced Theme Settings to expand this section; you’ll see two input fields (Figure (The jQuery UI download builder’s Advanced Theme Settings expands to provide fields for CSS scope and the new theme folder name 384 |)):

The jQuery UI download builder’s Advanced Theme Settings expands to provide fields for CSS scope and the new theme folder name 384

Figure : (The jQuery UI download builder’s Advanced Theme Settings expands to provide fields for CSS scope and the new theme folder name 384 |)

  • CSS Scope accepts the scoping selector (class, ID, or HTML tag). When compiling the theme stylesheet, the download builder prefixes every style rule with this value, which applies all style rules only to elements within the specified container. For our travel reservations application, we’ll enter the class we chose to scope our styles, .ui-tabs-panel. Be sure to include the preceding period (.) or, if specifying an ID, the hash (#)—these marks are necessary for the stylesheet to render properly.
  • Theme Folder Name accepts a folder name for the new theme that’s included in the downloaded ZIP; this folder contains the theme stylesheet and image files. This value defaults to the name of the selected theme, which in our case should be “custom-theme” since we’ve arrived at the download builder after designing a custom theme in ThemeRoller.
    When you type a CSS scope in the first field, the download builder suggests a folder name based on that scope. This is meant to be helpful, but you may want to override the suggestion with something more meaningful to your project’s directory structure.
    For the travel reservations application, we’ll write our own folder name and use “tab-content-theme” to better describe the folder contents.

Now that we’ve set up the CSS scope and folder name, we’ll select all jQuery UI widgets that will use the new scoped theme (Figure (Download a scoped theme by filling in Advanced Theme Settings and selecting any widgets that will use the scoped theme on the jQuery UI Download page)).

Download a scoped theme by filling in Advanced Theme Settings and selecting any widgets that will use the scoped theme on the jQuery UI Download page

Figure : (Download a scoped theme by filling in Advanced Theme Settings and selecting any widgets that will use the scoped theme on the jQuery UI Download page)

Step 3. Merge files into your project directory

The download folder contains the CSS directory (css) with your scoped theme folder; the widget JavaScript (js), which may be a duplicate of what you’re already using (to stay safe, double check before overwriting any files); and the development bundle (development-bundle), which contains individual CSS files used to create the compiled version found in the css folder, open source license text, and related resources necessary for advanced development. The order of the folders and files may vary depending on your operating system (Figure (A snapshot of the jQuery download folder structure when downloading a scoped theme)

A snapshot of the jQuery download folder structure when downloading a scoped theme

Figure :(A snapshot of the jQuery download folder structure when downloading a scoped theme)

shows the folder opened on Mac OS X).
Now we’ll copy and paste the tab-content-theme folder into the styles directory for our travel reservations project.
The new theme folder will sit alongside the original theme folder in the styles directory, as shown in Figure (Scoped theme folders are appended to the styles directory).

Scoped theme folders are appended to the styles directory

Figure : (Scoped theme folders are appended to the styles directory)

Step 4. Reference the scoped theme stylesheet in your project

We’ll reference our scoped stylesheet after the original theme stylesheet and before all jQuery UI scripts. The order in which theme stylesheets are referenced on the page is not important:

When the theme stylesheet links are in place, we’ll preview the page in a browser to confirm that the styles are being applied correctly. Because we scoped the new theme to the tab content panel, the styles are only applied to the content’s widgets and not to the tabs above, as illustrated in

Final application with scoped theme applied

Figure : (Final application with scoped theme applied).


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

J Query Topics