jquery-mobilejquery-mobile-themeroller

jquerymobile uses old theme


i have created a theme in themeroller and used like this in my app

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0">
    <meta charset="utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link href="assets/css/jquery.mobile.1.3.2.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="assets/css/pinkhash.min.css" />
    <link rel="apple-touch-startup-image" href="assets/img/logo.png" />
    <link rel="apple-touch-icon" href="assets/img/logo.png" />
</head>

On first load, the new theme is used, but when i login to the app and logout, the old default blue theme appears, why is this?


Solution

  • Do not use jQuery Mobile's default CSS file. Instead use jQuery Mobile's structure CSS file:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0">
        <meta charset="utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
    
        <!-- YOUR CUSTOM THEME CSS -->
        <link rel="stylesheet" href="your_custom_theme.css" />
        <!-- JQUERY STRUCTURE CSS -->
        <link href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" rel="stylesheet"/>
    
        <link rel="stylesheet" href="assets/css/pinkhash.min.css" />
        <link rel="apple-touch-startup-image" href="assets/img/logo.png" />
        <link rel="apple-touch-icon" href="assets/img/logo.png" />
    </head>