Glossify

Glossy remix of the jQuery Mobile default theme

 

Glossify is a theme for jQuery Mobile based on the default theme and replaces the matte look of toolbars and buttons with a glossy feel.

The glossy effect is accomplished entirely using CSS gradients, so the effect across devices would be enhanced or degraded in a manner consistent with the default theme.

Glossify includes two extra swatches in addition to the five available in the default theme, to provide a red and green swatch as swatches 'f' and 'g' respectively.

Most of the styling used in Glossify for the five initial swatches, is similar to the default theme, except the styling of buttons ( and similarly styled controls ) for swatch 'd', and changes to the default active button state.
Use the preview section below to view the styling used in Glossify.

Preview

Click on next to preview the next swatch

Download

Download a zip file containing the necessary files here

glossify_jquery_mobile_theme_1.1.0.zip

Usage

In HTML

Glossify usage is similar to that of themes generated using the jQuery Mobile themeroller.
In your html file you need to add references to the jQuery Mobile theme structure css and the theme file itself. So as of jQuery Mobile 1.1.0, the following code should be in your html file.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile.structure-1.1.0.min.css">
<link rel="stylesheet" href="jquery.mobile.glossify.theme.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

You may need to include the complete path to the glossify css depending on your server's configuration.

In Mobjectify

To use the theme in your mobjectify mockup, go to the theme editor and click on the button to 'Use custom css'
Use the file upload options to upload the glossify css file and the default swatches will be replaced by the glossy versions.

More

Want to enhance your theme further? Check out our tutorial on how to Supercharge your jQuery Mobile theme

Have any feedback regarding the theme or suggestions for improvement? We would love to hear from you.
Leave a comment below or let us know via Twitter

 

comments powered by Disqus