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.
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)
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):
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)).
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:
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 |)):
Figure : (The jQuery UI download builder’s Advanced Theme Settings expands to provide fields for CSS scope and the new theme folder name 384 |)
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)).
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
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).
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
Figure : (Final application with scoped theme applied).
J Query Related Interview Questions
|HTML 4 Interview Questions||HTML Interview Questions|
|HTML 5 Interview Questions||Zend Interview Questions|
|JqueryUI Interview Questions||Dynamic HTML Interview Questions|
|XQuery Interview Questions||jQuery Mobile Interview Questions|
J Query Related Practice Tests
|HTML 4 Practice Tests||HTML Practice Tests|
|HTML 5 Practice Tests||Zend Practice Tests|
|PHP and Jquery Practice Tests||J Query Practice Tests|
|CodeIgniter Practice Tests||Dynamic HTML Practice Tests|
All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.