Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Applying jQuery Mobile Themes
Formatting the look of pages that use jQuery Mobile is a unique challenge. So many CSS class styles sort through and customize the pages that formatting is daunting, and working with the code presents a danger that some essential functionality of the page will be corrupted.
Such challenges are surmountable, but doing so requires more excavation of how jQuery pages work. We can't really take the time to explore more of that topic in this beginning article. Stay tuned for emerging content as more and more people in this field start creating mobile pages and apps with Dreamweaver CS5.5.
Understanding Themes
The concept of formatting with themes is used in all kinds of site-building applications such as WordPress and Drupal, and even for creating sites in environments like Facebook and YouTube. Sets of formatting options, including fonts, text and background colors, and sometimes other features, are packaged into themes, and many web "designers" choose one of these themes for their site.
Applying such themes might seem anathema to professional designers who have invested time and money into buying and learning a powerful web design tool like Dreamweaver to create unique sites. I can only reply, "I hear you!" It's possible to hack through and subvert the theme-based formatting that's embedded in jQuery Mobile pages. It just isn't possible to walk you through that process in this short article.
It's worthwhile to learn how to apply themes in Dreamweaver CS5.5, since we can do that without going too deeply into the HTML5, CSS3, and jQuery Mobile code in these pages.
Examining jQuery Mobile CSS in Dreamweaver
Before we focus on customizing jQuery Mobile styles in Dreamweaver CS5.5, let's examine the HTML5 we're using so far. The "pages" and themes in jQuery Mobile are defined by data-role DIV tags. If you peruse the HTML code generated with the jQuery Mobile starter page, you'll see a variety of such data-role tags. For example, where you see the following HTML code, a new "page" is being defined:
div data-role="page"
The following HTML code defines a header for that "page":
div data-role="header"
This HTML code defines the content:
div data-role="content"
These data-role names are very intuitive, so I probably don't need to explain which part of the "page" the following code encloses:
div data-role="footer"
Reviewing the nature of these data-role DIV styles should be helpful in systematically customizing content for your pages. But it also has implications for themes. Let's take a look.
Applying Themes
Five standard themes are built into the CSS stylesheet for jQuery Mobile pages. These themes, named a–e, are already "installed" in the page. Rather than describe how each theme looks, I'll explain how to apply them, and you can preview them in Dreamweaver. To apply a theme, you add a data-theme parameter to any data-role DIV tag. For example, to apply theme "e" to a "page" 2, you would add this code:
data-theme="e"
after this code:
div data-role="page" id="page2"
Figure 8 shows the result.
)
Figure 8 A data-theme is applied to page 2.
Distinct themes can be applied to any data-role. For example, you can apply a data-theme to the content data-role for a page, a different data-theme to the footer, and so on, as shown in Figure 9.
)
Figure 9 Adding another data-theme changes the look of the page from Figure 8.