Styling the Nan & Bob's Site - Exercise

Contact Us or call 1-877-932-8228
Styling the Nan & Bob's Site - Exercise

Styling the Nan & Bob's Site

Duration: 25 to 35 minutes.

In this exercise, you will style the Nan & Bob's site with a custom theme, a large home page logo image, and custom icons.

  1. Open ThemeFramework/Exercises/newdesign/index.html in a file editor.
  2. Create a custom theme in ThemeRoller - you can make it heavy on the green, or choose your own colors.
  3. Download and save your custom theme; save the unpacked downloaded files to ThemeFramework/Exercises/newdesign/themes.
  4. Link to the downloaded minified stylesheet in the head of index.html where indicated. Also link to the "structure" CSS from jQuery Mobile.
  5. Add a two-column grid in the content div of the #home page, with the logo (from the images directory) on the left and the indicated text on the right. Add a CSS rule to make the right-side text large.
  6. We've included some images for the various icons, or feel free to create or find your own; they should be 14px by 14px. Set each of the home page listview links to display the custom icons, and add a navbar element to the header of each of the interior pages, with the appropriate custom icons.
  7. Add CSS rules to display each of the custom icons from their data-icon attributes.
  8. Add a background image to the entire site - we've included images/bg.png, or feel free to find your own; apply the background image to elements of class ui-page.
  9. Try out any other custom-CSS changes to change the visual appearance of the site.
  10. Test your work in a mobile browser.

Solution:

ThemeFramework/Solutions/newdesign/index.html

Code Explanation:

We add a style link in head of the .html file to add the custom-theme stylesheet we downloaded from ThemeRoller; as before, we also link the CDN-hosted jquery.mobile.structure-1.1.0.min.css stylesheet to bring in the structural jQuery Mobile CSS.

We add a div with class ui-grid-a to display a two-column grid, with the logo on the left and text on the right; some custom CSS displays the content appropriately.

We added a gradient background color for the main element on the homepage.

We use the data-icon to customize the icons for the home page listview and the interior page navbars, with some custom CSS to display the correct icons.

Last, we add the background image to class ui-page, with the image repeating.

Next