YouTip LogoYouTip

Jquerymobile Themes

jQuery Mobile offers two different theme styles, from "a" to "b" - each theme has distinct colors for buttons, toolbars, content blocks, etc., and each has a different visual effect. You can customize the appearance of your application by setting the `data-theme` attribute of an element: Button | Value | Description | Example | | --- | --- | --- | | a | Page has a gray background with black text. Header and footer have a gray background with black text. Buttons have a gray background with black text. Active buttons and links have white text on a blue background. In input fields, the placeholder attribute value is light gray, and the value is black. | (#) | | b | Page has a black background with white text. Header and footer have a black background with white text. Buttons have white text on a charcoal background. Active buttons and links have white text on a blue background. In input fields, the placeholder attribute value is light gray, and the value is white. | (#) | Button styles use `class="ui-btn"`, and the `"ui-btn-a|b"` class sets the button to gray (default) or black: Button | ![Image 1: Note](#) | The "a" theme style is used for most elements, and child elements usually inherit the style from their parent. | | --- | * * * ## Theme Header and Footer ## Example
[Try it Β»](#) * * * ## Theme Dialog Header and Footer ## Example
[Try it Β»](#) * * * ## Theme Buttons ## Example Black Button [Try it Β»](#) * * * ## Theme Icons ## Example Search [Try it Β»](#) * * * ## Theme Popups ## Example
[Try it Β»](#) * * * ## Theme Buttons in Header and Footer ## Example
Home

Welcome to My Homepage

Search
[Try it Β»](#) * * * ## Theme Navigation Bar ## Example [Try it Β»](#) * * * ## Theme Panels ## Example
[Try it Β»](#) * * * ## Theme Collapsible Buttons and Content ## Example

Click me - I'm collapsible!

I'm the expanded content.

[Try it Β»](#) * * * ## Theme Lists ## Example [Try it Β»](#) * * * ## Theme Split Buttons ## Example
    [Try it Β»](#) * * * ## Theme Collapsible Lists ## Example [Try it Β»](#) * * * ## Theme Forms ## Example Red Green Blue [Try it Β»](#) * * * ## Theme Collapsible Forms ## Example
    Click me - I'm collapsible! [Try it Β»](#) * * * ## Adding New Themes jQuery Mobile allows you to add new themes to mobile pages. You can add or edit new themes by modifying the CSS file (if you have downloaded jQuery Mobile). You just need to copy the style module, then rename the letter class (c-z), and add your preferred colors and fonts in the style. You can also add new theme styles directly in the HTML document. Add class `ui-bar-(a-z)` for toolbars, `ui-body-(a-z)` for text content, and `ui-page-theme-(a-z)` for the page. ## Example .ui-bar-f { color: red; background-color: yellow; } .ui-body-f { font-weight: bold; color: white; background-color: purple; } .ui-page-theme-f { font-weight: bold; background-color: green; } [Try it Β»](#) | ![Image 2: Note](#) | In previous versions of jQuery Mobile, JavaScript was used to make elements inherit the parent theme style. Starting from version 1.4, the framework focused more on performance improvements and stopped using JavaScript for inheritance, switching to pure CSS. The jQuery Mobile team created a tool for this, available at (http://themeroller.jquerymobile.com/). You can use this tool to upgrade old themes to be compatible with the new version. | | --- |
← Jquerymobile EventsJquerymobile Form Sliders β†’

YouTip © 2024-2026 | Home | Learn Technology, Build Dreams!

All content is for educational and learning purposes only.