Styling jQuery UI Widgets with ThemeRoller - J Query

Problem
jQuery UI widgets used in your website or application must match an established design.

Solution

Use ThemeRoller, a simple web application for editing the jQuery UI CSS Framework classes to customize the look and feel of the jQuery UI widgets.
Let’s walk through an example.
We’re working on a new website for booking travel reservations, and specifically, we’rebuilding out the part of the interface for booking a flight. The design consists of a set of tabs for selecting the type of reservation (flight, car rental, or package deal), and the Book a Flight tab includes a form for entering the number of passengers, selects for the departure and arrival cities, calendars to set departure and return travel dates, and a submit button (see Figure (Final target design for travel application)).

Final-target-design-for-travel-application

see Figure : (Final target design for travel application)

For this recipe, we’ll use the jQuery UI widgets for the tabs and datepickers, and style them with a custom theme created in Theme Roller. (You can also modify the theme style sheet beyond the standard Theme Roller output to more closely match your design—you’ll see how in Recipes (Overriding jQuery UI Layout and Theme Styles)–(Referencing Multiple Themes on a Single Page)).

Step 1. Open ThemeRoller

Open the jQuery UI website at http://jqueryui.com and choose Themes from the top navigation bar, or go directly to http://themeroller.com.The interface for Theme Roller is grouped into two main sections, as shown in

The-default-view-of-ThemeRoller,-with-the-toolbar-pane-on-the-left-and-widgets-preview-Pane-On-The-Wright-(2)

Figure :(The default view of Theme Roller, with the toolbar pane on the left and widgets preview pane on the right 15.1 Styling):

  • ThemeRoller toolbar pane in the left column, which provides tools to set and change all style settings in a theme

  • Sample widgets preview pane on the right for previewing your style selections—each widget is interactive to show the full range of styles (use your mouse to see hove rand active styles, for example) and updates in real time when you edit styles using the toolbar
    The Theme Roller toolbar provides two distinct ways to customize themes, accessible with the tabs at the top of the toolbar column:

  • The Roll Your Own tab (Figure (ThemeRoller’s Roll Your Own tab (A) provides controls to change the font, corner radius,and colors for a range of interaction states; the Gallery tab (B) provides one-click access to a variety of prebuilt themes)) is the workspace where you create custom styles for your theme. Customizable settings are grouped into sections with inputs and tools for quick style selection, including setting the base font and corner radius across all widgets and setting background colors and textures, text color, and icon color.
    Each section is closed by default and displays current styles in the form of a small icon to the right of the label. Open/close sections as needed while you edit, and preview sample widgets to the right, which update to reflect your changes in real time.

  • The Gallery tab (Figure (Theme Roller’s Roll Your Own tab (A) provides controls to change the font, corner radius,and colors for a range of interaction states; the Gallery tab (B) provides one-click access to a variety of prebuilt themes)) offers a range of pre configured themes that can be downloaded as is or used as a starting point for a more customized theme.

Theme Roller’s Roll Your Own tab (A) provides controls to change the font, corner radius,and colors for a range

Figure : (ThemeRoller’s Roll Your Own tab (A) provides controls to change the font, corner radius,and colors for a range of interaction states; the Gallery tab (B) provides one-click access to a variety of prebuilt themes)

Step 2. Create and preview a theme

For our travel reservations app, we’ll select a gallery theme called Sunny that’s close to our final design (as shown in

Theme Roller’s gallery themes offer a wide range of starting points for customizing designs; Sunny (A) shares many styles with our target design

Figure : (Theme Roller’s gallery themes offer a wide range of starting points for customizing designs; Sunny (A) shares many styles with our target design (B))).
Sunny specifies similar overall background, font face, and font colors to our final design,but a couple of styles will need to be edited to more closely match our design—for instance, Sunny’s tabs are yellow with a gray background, while our tabs are dark gray with a white background.
We can easily change those settings by either clicking the Edit button below the Sunny image in the gallery (which will move you over to the Roll Your Own view) or clicking the Sunny image in the gallery to activate it and then clicking over to the Roll Your Own tab at the top of the toolbar.
Once you have the Sunny settings in the Roll Your Own tab, the toolbar pre fills with all the theme’s settings, and you can start editing. Let’s tweak the following settings to make the Sunny theme match our design:

  • Set the base font for all widgets: The default font in the Sunny theme and our target design seem very similar, but we can simply open the Font Settings section (as shown in Figure (The Font Settings and Corner Radius sections)) and either confirm that they are correct or fill in alternate values for font family, weight, and size. The font family accepts multiple comm a separated font names (as in standard CSS notation). Here are some design notes and tips:

The-Font-Settings-and-Corner-Radius-sections

Figure : (The Font Settings and Corner Radius sections)

— By default, the font size is specified in “em” units. We recommend using ems in favor of pixel text sizes so widget text will scale with the widget containers when the user manipulates browser text size.

ThemeRoller’s section for the Clickable: default state

Figure : (ThemeRoller’s section for the Clickable: default state)

— Provide a range of fonts in case your first font of choice is not installed on a user’s computer. It’s good practice to end a font string with the generic font style like “serif” or “sans-serif.”

  • Apply a corner radius: Our design includes rounded corners on the date picker and tabs. You can set a corner radius on jQuery UI widgets in Theme Roller by opening the Corner Radius section (as shown in Figure (The Font Settings and Corner Radius sections)) and entering a value followed by a unit: pixels for a fixed radius, or ems for a radius that responds to text size.
    Smaller pixel values make the corners of widgets more square, while larger values make the corners more round. For perfectly square corners, set the value to zero.

  • Make the default tabs and buttons gray. Unselected tabs, like accordion section headers or date picker buttons, are clickable elements, and each is assigned a class that represents its current clickable state: default, hover, or active. In this case we’ll change the default state background color from gray to yellow and update text and border color to match our design (Figure :(ThemeRoller’s section for the Clickable: default state)):

  1. Open the “Clickable: default state” section.

  2. Focus your cursor on the background color field (it contains a hexadecimal value preceded by #), and pick a new dark gray color or enter a hexadecimal value; in this case we’ll enter the value #333333.

  3. The text color is dark gray and now blends with our background, so we’ll also update the default state text color to contrast with the background. We’ll change the text color value to #FFFFFF.

  4. As with the text, the icons that appear in the header are gray and need to be updated so they don’t disappear against the gray background. Let’s give thema value of #EEEEEE, a color that will complement but won’t appear higher contrast than the text.

  5. Finally, let’s change the border color from yellow to light gray; enter value#D2D2D2.

  6. Hit the Tab or Enter key, or click elsewhere on the page, to preview the changes in the widgets on the right.

  • Update the hover state to match the new tab color: The clickable hover state style is intended to be shown whenever you mouse over a clickable component like a tab,accordion section, or date picker button. Now that the default state is gray, we’ll adjust the hover state’s background and text colors to coordinate and use a complementary darker shade of gray for the background with white text and icons:

    1. Open the “Clickable: hover state” section.

    2. In the background color field enter the value #111111.

    3. Update the text and icon colors to #FFFFFF.

    4. Let’s also make the border color better match our design by setting it to as lightly darker gray than the default border, #888888.

  • Change the tabs and datepicker header backgrounds to white: The header style appears in several jQuery UI widgets: behind the tabs, at the top of datepicker’s month/year feedback and navigation buttons, as the slider range, and as the progress bar completion indicator. In our design the header is a flat white color with gray text and dark yellow icons:

    1. Open the Header/Toolbar section.

    2. In the background color field enter a hexadecimal value of #FFFFFF.

    3. Click the texture icon next to the background input, and choose the first option,“flat.” (Hover over any texture image to see the name.) Doing this removes the background image so that the style only sets a flat background color.

    4. Set the background opacity to 100 percent to ensure that the header is fullyopaque.The text color is white and doesn’t show up on our new background, so let’s change it to dark gray to match our default clickable state, #333333.

    5. Finally, change the border and icon colors to #EDAA12, and the text color to white, #FFFFFF.

  • Change the content container border color to yellow: Content borders appear around accordion sections, and define the tabs, dialog, slider, datepicker, and progress bar containers. In the design the border is the same light yellow we used for the header border:

    1. Open the Content section.

    2. Focus on the border color field, and enter the value #EDAA12.

  • Update the “active” state border color to blend with the container: After updating the container border color, you’ll see that the selected accordion section and selected tab still have dark gray borders. This color is set with the clickable active state class:

    1. Open the “Clickable: active state” section.

    2. Focus on the border color field, and enter the value #EDAA12.

At this point, we have made our Theme Roller theme match the design of our travel reservations app as closely as we can (see Figure (Our final customized ThemeRoller theme that closely matches our design)).

Our final customized ThemeRoller theme that closely matches our design

Figure : (Our final customized ThemeRoller theme that closely matches our design)

It’s now ready for download.

Step 3. Download the jQuery UI widgets and theme

Click the “Download theme” button at the top of the ThemeRoller toolbar’s Roll Your Own tab, which navigates you to the jQuery UI download builder (see Figure (The jQuery down loader combines UI core, any interactions and widgets you select, and your theme into a single zipped file 15.1 Styling)).

The-jQuery-downloader-combines-UI-core,-any-interactions-and-widgets-you-select

Figure : (The jQuery down loader combines UI core, any interactions and widgets you select, and your theme into a single zipped file 15.1 Styling)

In the right column under Theme, you’ll see Custom Theme pre-selected in the dropdown.
Next, we’ll select which jQuery UI components to download with our theme. All are selected by default; simply uncheck those you don’t want to download, or click “Deselect all components” at the top of the Components section to download only the theme stylesheet. For our travel reservations app, we need the jQuery UI core script sand those for tabs and the datepicker.
Finally, select which version of jQuery UI you’d like to use; the latest stable version is selected by default. Click Download, and save the ZIP file locally. The downloaded ZIP file will be named like jquery-ui-1.7.1.custom.zip.
(The Advanced Theme Settings section in the download builder’s Theme section allows you to download a scoped theme—we’ll get to that in detail in Recipe (Refrencing Multiple themes on a single Page))

Step 4. Merge files into your project directory

Next, we’ll open the ZIP file we downloaded in the previous step and review its contents.jQuery UI files are arranged into the following directory structure; the order of the folders and files may vary depending on your operating system (Figure (jQuery download folder structure)

jQuery-download-folder-structure

Figure : (jQuery download folder structure)

shows the folder opened on Mac OS X).
index.html
Sample markup for the UI components you selected.
/css
Contains a theme folder (e.g., custom-theme) with the following files:

  • An images directory with framework icons and background textures.

  • Your theme stylesheet, e.g., jquery-ui-1.7.1.custom.css, which includes the styles you just edited and, if downloaded, the widget-specific styles necessary for the widgets to function properly.

/js
Compiled jQuery UI JavaScript files.
/development-bundle
Individual component scripts and CSS used to create the compiled versions foundin the css and js folders, open source license text, and related resources necessary for advanced development with jQuery UI.
When working on your own project, be sure to review the markup in index.html and use it as a guide along with the Demos & Documentation at http://jqueryui.com to integrate the component markup and scripts into your project.
For our travel application, we’ll copy the theme folder in the css directory and paste it to the styles directory in our project; to keep it simple, we named the styles folder cssto match.

Step 5. Reference the theme stylesheet in your project

Finally, we’ll include a reference to the theme stylesheet in the <head>of our page.
Keep in mind that the stylesheet reference should always appear before any references to jQuery UI scripts so that the CSS loads first; this is necessary because some widgets depend on the CSS to function properly.
We’ll reference the theme stylesheet (in bold) before all scripts in our travel reservations app:

When the jQuery UI widget markup and styles are in place for your project, preview your page in a browser to confirm that the styles are being applied correctly. Previewing our travel application reveals that the theme is applied correctly—as you can see in Figure : (Our design interface with customized ThemeRoller theme applied (A) and our target final design (B)), our default tabs are gray, the headers are white, and the text and icon colors match our selections.
But our interface clearly needs more work to match our target design (Figure (Our design interface with customized ThemeRoller theme applied (A) and our target final design (B))):

Our-design-interface-with-customized-ThemeRoller-theme-applied-(A)-and-our-target

Figure : (Our design interface with customized ThemeRoller theme applied (A) and our target final design (B))

the tabs are too small and are missing their custom icons, and the datepicker header is enclosed within the datepicker widget when it should appear on top. In Recipe 15.2 we’ll review how to make small adjustments to theme styles so that these elements better match our design.

Discussion

Since Theme Roller themes are structured to deliver a holistic experience and apply across multiple widgets, it helps to think about how the various Framework classes interact with one another. If you choose to create your own theme from scratch, or substantially modify an existing theme, here are some points you might want to consider:
To create uniform backgrounds for headers and toolbars and content areas to make the “on” state tab appear seamlessly connected to the visible content panel, and match the content area background and borders to your clickable active state background and borders.
For clickable elements, states should be clearly different enough to provide adequate feedback to the user. Here are a couple of ways to make sure the states work together to deliver distinctive visual differentiation:

  • Use mirror image textures for the default and active clickable states to achieve a three-dimensional look and feel. For instance, a “highlight” texture for the default button state pairs well with an “inset” texture for the active button state. The button will look like it physically depresses on click.

  • If you do use the same texture for clickable and hover, make sure the background color and image opacity are different enough (generally at least a 10 percent shift)to provide a clear visual change.
    Optimize your theme for speed by using the same image for multiple styles. For example:

  • When you use the same icon color for multiple states, the style sheet will make fewer HTTP requests, improving page performance.

  • You can also use the same background image (color plus texture opacity) for multiple states as well. If you do this, it’s important to make sure that the other style elements—border, text, and icon colors—are distinct enough to make a clear differentiation.


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

J Query Topics