Search jQuery

jQuery Forum

ThemeRoller downloaded theme issues

in jQuery Mobile • 10 years ago

Hello, I created a somewhat custom theme using just one swatch, and implemented it in my project as suggested by the downloaded HTML. I did not manage to get it working though. It keeps using the default JQuery Mobile theme .... I cleared all cache, and run it on several browsers. Still didn't work.

Theme code below:

/*
* jQuery Mobile Framework Git Build: SHA1: c2d61e2e592c67519d9a9ed0ba796fa44787e136 <> Date: Tue Sep 25 10:38:12 2012 -0700
* http://jquerymobile.com
*
* Copyright 2012 jQuery Foundation and other contributors
* Released under the MIT license.
* http://jquery.org/license
*
*/
/* Swatches */
/* A
-----------------------------------------------------------------------------------------------------------*/
.ui-bar-a {
border: 1px solid #b3b3b3 /*{a-bar-border}*/;
background: #b2384a /*{a-bar-background-color}*/;
color: #ffffff /*{a-bar-color}*/;
font-weight: bold;
text-shadow: 0 /*{a-bar-shadow-x}*/ 1px /*{a-bar-shadow-y}*/ 1px /*{a-bar-shadow-radius}*/ #ffffff /*{a-bar-shadow-color}*/;
background-image: -webkit-gradient(linear, left top, left bottom, from( #f94e67 /*{a-bar-background-start}*/), to( #6a212c /*{a-bar-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient( #f94e67 /*{a-bar-background-start}*/, #6a212c /*{a-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient( #f94e67 /*{a-bar-background-start}*/, #6a212c /*{a-bar-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #f94e67 /*{a-bar-background-start}*/, #6a212c /*{a-bar-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #f94e67 /*{a-bar-background-start}*/, #6a212c /*{a-bar-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #f94e67 /*{a-bar-background-start}*/, #6a212c /*{a-bar-background-end}*/);
}
.ui-bar-a .ui-link-inherit {
color: #ffffff /*{a-bar-color}*/;
}
.ui-bar-a a.ui-link {
color: #7cc4e7 /*{a-bar-link-color}*/;
font-weight: bold;
}
.ui-bar-a a.ui-link:visited {
color: #2489ce /*{a-bar-link-visited}*/;
}
.ui-bar-a a.ui-link:hover {
color: #2489ce /*{a-bar-link-hover}*/;
}
.ui-bar-a a.ui-link:active {
color: #2489ce /*{a-bar-link-active}*/;
}
.ui-bar-a,
.ui-bar-a input,
.ui-bar-a select,
.ui-bar-a textarea,
.ui-bar-a button {
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
}
.ui-body-a,
.ui-overlay-a {
border: 1px solid #aaaaaa /*{a-body-border}*/;
color: #b2384a /*{a-body-color}*/;
text-shadow: 0 /*{a-body-shadow-x}*/ 1px /*{a-body-shadow-y}*/ 0 /*{a-body-shadow-radius}*/ #ffffff /*{a-body-shadow-color}*/;
background: #f9f9f9 /*{a-body-background-color}*/;
background-image: -webkit-gradient(linear, left top, left bottom, from( #f9f9f9 /*{a-body-background-start}*/), to( #f9f9f9 /*{a-body-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient( #f9f9f9 /*{a-body-background-start}*/, #f9f9f9 /*{a-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient( #f9f9f9 /*{a-body-background-start}*/, #f9f9f9 /*{a-body-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #f9f9f9 /*{a-body-background-start}*/, #f9f9f9 /*{a-body-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #f9f9f9 /*{a-body-background-start}*/, #f9f9f9 /*{a-body-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #f9f9f9 /*{a-body-background-start}*/, #f9f9f9 /*{a-body-background-end}*/);
}
.ui-overlay-a {
background-image: none;
border-width: 0;
}
.ui-body-a,
.ui-body-a input,
.ui-body-a select,
.ui-body-a textarea,
.ui-body-a button {
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
}
.ui-body-a .ui-link-inherit {
color: #b2384a /*{a-body-color}*/;
}
.ui-body-a .ui-link {
color: #b2384a /*{a-body-link-color}*/;
font-weight: bold;
}
.ui-body-a .ui-link:visited {
color: #2489ce /*{a-body-link-visited}*/;
}
.ui-body-a .ui-link:hover {
color: #000000 /*{a-body-link-hover}*/;
}
.ui-body-a .ui-link:active {
color: #ffffff /*{a-body-link-active}*/;
}
.ui-btn-up-a {
border: 1px solid #cccccc /*{a-bup-border}*/;
background: #eeeeee /*{a-bup-background-color}*/;
font-weight: bold;
color: #b2384a /*{a-bup-color}*/;
text-shadow: 0 /*{a-bup-shadow-x}*/ 1px /*{a-bup-shadow-y}*/ 0 /*{a-bup-shadow-radius}*/ #ffffff /*{a-bup-shadow-color}*/;
background-image: -webkit-gradient(linear, left top, left bottom, from( #ffffff /*{a-bup-background-start}*/), to( #f1f1f1 /*{a-bup-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient( #ffffff /*{a-bup-background-start}*/, #f1f1f1 /*{a-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient( #ffffff /*{a-bup-background-start}*/, #f1f1f1 /*{a-bup-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #ffffff /*{a-bup-background-start}*/, #f1f1f1 /*{a-bup-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #ffffff /*{a-bup-background-start}*/, #f1f1f1 /*{a-bup-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #ffffff /*{a-bup-background-start}*/, #f1f1f1 /*{a-bup-background-end}*/);
}
.ui-btn-up-a:visited,
.ui-btn-up-a a.ui-link-inherit {
color: #b2384a /*{a-bup-color}*/;
}
.ui-btn-hover-a {
border: 1px solid #b2384a /*{a-bhover-border}*/;
background: #b2384a /*{a-bhover-background-color}*/;
font-weight: bold;
color: #ffffff /*{a-bhover-color}*/;
text-shadow: 0 /*{a-bhover-shadow-x}*/ 1px /*{a-bhover-shadow-y}*/ 0 /*{a-bhover-shadow-radius}*/ #ffffff /*{a-bhover-shadow-color}*/;
background-image: -webkit-gradient(linear, left top, left bottom, from( #b2384a /*{a-bhover-background-start}*/), to( #b2384a /*{a-bhover-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient( #b2384a /*{a-bhover-background-start}*/, #b2384a /*{a-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient( #b2384a /*{a-bhover-background-start}*/, #b2384a /*{a-bhover-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #b2384a /*{a-bhover-background-start}*/, #b2384a /*{a-bhover-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #b2384a /*{a-bhover-background-start}*/, #b2384a /*{a-bhover-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #b2384a /*{a-bhover-background-start}*/, #b2384a /*{a-bhover-background-end}*/);
}
.ui-btn-hover-a:visited,
.ui-btn-hover-a:hover,
.ui-btn-hover-a a.ui-link-inherit {
color: #ffffff /*{a-bhover-color}*/;
}
.ui-btn-down-a {
border: 1px solid #bbbbbb /*{a-bdown-border}*/;
background: #d6d6d6 /*{a-bdown-background-color}*/;
font-weight: bold;
color: #2f3e46 /*{a-bdown-color}*/;
text-shadow: 0 /*{a-bdown-shadow-x}*/ 1px /*{a-bdown-shadow-y}*/ 0 /*{a-bdown-shadow-radius}*/ #ffffff /*{a-bdown-shadow-color}*/;
background-image: -webkit-gradient(linear, left top, left bottom, from( #d0d0d0 /*{a-bdown-background-start}*/), to( #dfdfdf /*{a-bdown-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient( #d0d0d0 /*{a-bdown-background-start}*/, #dfdfdf /*{a-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient( #d0d0d0 /*{a-bdown-background-start}*/, #dfdfdf /*{a-bdown-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #d0d0d0 /*{a-bdown-background-start}*/, #dfdfdf /*{a-bdown-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #d0d0d0 /*{a-bdown-background-start}*/, #dfdfdf /*{a-bdown-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #d0d0d0 /*{a-bdown-background-start}*/, #dfdfdf /*{a-bdown-background-end}*/);
}
.ui-btn-down-a:visited,
.ui-btn-down-a:hover,
.ui-btn-down-a a.ui-link-inherit {
color: #2f3e46 /*{a-bdown-color}*/;
}
.ui-btn-up-a,
.ui-btn-hover-a,
.ui-btn-down-a {
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
text-decoration: none;
}
/* Structure */
/* links within "buttons"
-----------------------------------------------------------------------------------------------------------*/
a.ui-link-inherit {
text-decoration: none !important;
}
/* Active class used as the "on" state across all themes
-----------------------------------------------------------------------------------------------------------*/
.ui-btn-active {
border: 1px solid #000000 /*{global-active-border}*/;
background: #b2384a /*{global-active-background-color}*/;
font-weight: bold;
color: #ffffff /*{global-active-color}*/;
cursor: pointer;
text-shadow: 0 /*{global-active-shadow-x}*/ 1px /*{global-active-shadow-y}*/ 1px /*{global-active-shadow-radius}*/ #ffffff /*{global-active-shadow-color}*/;
text-decoration: none;
background-image: -webkit-gradient(linear, left top, left bottom, from( #b2384a /*{global-active-background-start}*/), to( #b2384a /*{global-active-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient( #b2384a /*{global-active-background-start}*/, #b2384a /*{global-active-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient( #b2384a /*{global-active-background-start}*/, #b2384a /*{global-active-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #b2384a /*{global-active-background-start}*/, #b2384a /*{global-active-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #b2384a /*{global-active-background-start}*/, #b2384a /*{global-active-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #b2384a /*{global-active-background-start}*/, #b2384a /*{global-active-background-end}*/);
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
}
.ui-btn-active:visited,
.ui-btn-active:hover,
.ui-btn-active a.ui-link-inherit {
color: #ffffff /*{global-active-color}*/;
}
/* button inner top highlight
-----------------------------------------------------------------------------------------------------------*/
.ui-btn-inner {
border-top: 1px solid #fff;
border-color: rgba(255,255,255,.3);
}
/* corner rounding classes
-----------------------------------------------------------------------------------------------------------*/
.ui-corner-tl {
-moz-border-radius-topleft: .6em /*{global-radii-blocks}*/;
-webkit-border-top-left-radius: .6em /*{global-radii-blocks}*/;
border-top-left-radius: .6em /*{global-radii-blocks}*/;
}
.ui-corner-tr {
-moz-border-radius-topright: .6em /*{global-radii-blocks}*/;
-webkit-border-top-right-radius: .6em /*{global-radii-blocks}*/;
border-top-right-radius: .6em /*{global-radii-blocks}*/;
}
.ui-corner-bl {
-moz-border-radius-bottomleft: .6em /*{global-radii-blocks}*/;
-webkit-border-bottom-left-radius: .6em /*{global-radii-blocks}*/;
border-bottom-left-radius: .6em /*{global-radii-blocks}*/;
}
.ui-corner-br {
-moz-border-radius-bottomright: .6em /*{global-radii-blocks}*/;
-webkit-border-bottom-right-radius: .6em /*{global-radii-blocks}*/;
border-bottom-right-radius: .6em /*{global-radii-blocks}*/;
}
.ui-corner-top {
-moz-border-radius-topleft: .6em /*{global-radii-blocks}*/;
-webkit-border-top-left-radius: .6em /*{global-radii-blocks}*/;
border-top-left-radius: .6em /*{global-radii-blocks}*/;
-moz-border-radius-topright: .6em /*{global-radii-blocks}*/;
-webkit-border-top-right-radius: .6em /*{global-radii-blocks}*/;
border-top-right-radius: .6em /*{global-radii-blocks}*/;
}
.ui-corner-bottom {
-moz-border-radius-bottomleft: .6em /*{global-radii-blocks}*/;
-webkit-border-bottom-left-radius: .6em /*{global-radii-blocks}*/;
border-bottom-left-radius: .6em /*{global-radii-blocks}*/;
-moz-border-radius-bottomright: .6em /*{global-radii-blocks}*/;
-webkit-border-bottom-right-radius: .6em /*{global-radii-blocks}*/;
border-bottom-right-radius: .6em /*{global-radii-blocks}*/;
}
.ui-corner-right {
-moz-border-radius-topright: .6em /*{global-radii-blocks}*/;
-webkit-border-top-right-radius: .6em /*{global-radii-blocks}*/;
border-top-right-radius: .6em /*{global-radii-blocks}*/;
-moz-border-radius-bottomright: .6em /*{global-radii-blocks}*/;
-webkit-border-bottom-right-radius: .6em /*{global-radii-blocks}*/;
border-bottom-right-radius: .6em /*{global-radii-blocks}*/;
}
.ui-corner-left {
-moz-border-radius-topleft: .6em /*{global-radii-blocks}*/;
-webkit-border-top-left-radius: .6em /*{global-radii-blocks}*/;
border-top-left-radius: .6em /*{global-radii-blocks}*/;
-moz-border-radius-bottomleft: .6em /*{global-radii-blocks}*/;
-webkit-border-bottom-left-radius: .6em /*{global-radii-blocks}*/;
border-bottom-left-radius: .6em /*{global-radii-blocks}*/;
}
.ui-corner-all {
-moz-border-radius: .6em /*{global-radii-blocks}*/;
-webkit-border-radius: .6em /*{global-radii-blocks}*/;
border-radius: .6em /*{global-radii-blocks}*/;
}
.ui-corner-none {
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
}
/* Form field separator
-----------------------------------------------------------------------------------------------------------*/
.ui-br {
border-bottom: rgb(130,130,130);
border-bottom: rgba(130,130,130,.3);
border-bottom-width: 1px;
border-bottom-style: solid;
}
/* Interaction cues
-----------------------------------------------------------------------------------------------------------*/
.ui-disabled {
filter: Alpha(Opacity=30);
opacity: .3;
zoom: 1;
}
.ui-disabled,
.ui-disabled a {
cursor: default !important;
pointer-events: none;
}
/* Icons
-----------------------------------------------------------------------------------------------------------*/
.ui-icon,
.ui-icon-searchfield:after {
background: #000000 /*{global-icon-color}*/;
background: rgba(0,0,0,0.4) /*{global-icon-disc}*/;
background-image: url(images/icons-18-white.png) /*{global-icon-set}*/;
background-repeat: no-repeat;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
/* Alt icon color
-----------------------------------------------------------------------------------------------------------*/
.ui-icon-alt {
background: #fff;
background: rgba(255,255,255,.3);
background-image: url(images/icons-18-black.png);
background-repeat: no-repeat;
}
/* HD/"retina" sprite
-----------------------------------------------------------------------------------------------------------*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-resolution: 240dpi) {
.ui-icon-plus, .ui-icon-minus, .ui-icon-delete, .ui-icon-arrow-r,
.ui-icon-arrow-l, .ui-icon-arrow-u, .ui-icon-arrow-d, .ui-icon-check,
.ui-icon-gear, .ui-icon-refresh, .ui-icon-forward, .ui-icon-back,
.ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info, .ui-icon-home, .ui-icon-search, .ui-icon-searchfield:after,
.ui-icon-checkbox-off, .ui-icon-checkbox-on, .ui-icon-radio-off, .ui-icon-radio-on {
background-image: url(images/icons-36-white.png);
-moz-background-size: 776px 18px;
-o-background-size: 776px 18px;
-webkit-background-size: 776px 18px;
background-size: 776px 18px;
}
.ui-icon-alt {
background-image: url(images/icons-36-black.png);
}
}
/* plus minus */
.ui-icon-plus {
background-position: -0 50%;
}
.ui-icon-minus {
background-position: -36px 50%;
}
/* delete/close */
.ui-icon-delete {
background-position: -72px 50%;
}
/* arrows */
.ui-icon-arrow-r {
background-position: -108px 50%;
}
.ui-icon-arrow-l {
background-position: -144px 50%;
}
.ui-icon-arrow-u {
background-position: -180px 50%;
}
.ui-icon-arrow-d {
background-position: -216px 50%;
}
/* misc */
.ui-icon-check {
background-position: -252px 50%;
}
.ui-icon-gear {
background-position: -288px 50%;
}
.ui-icon-refresh {
background-position: -324px 50%;
}
.ui-icon-forward {
background-position: -360px 50%;
}
.ui-icon-back {
background-position: -396px 50%;
}
.ui-icon-grid {
background-position: -432px 50%;
}
.ui-icon-star {
background-position: -468px 50%;
}
.ui-icon-alert {
background-position: -504px 50%;
}
.ui-icon-info {
background-position: -540px 50%;
}
.ui-icon-home {
background-position: -576px 50%;
}
.ui-icon-search,
.ui-icon-searchfield:after {
background-position: -612px 50%;
}
.ui-icon-checkbox-off {
background-position: -684px 50%;
}
.ui-icon-checkbox-on {
background-position: -648px 50%;
}
.ui-icon-radio-off {
background-position: -756px 50%;
}
.ui-icon-radio-on {
background-position: -720px 50%;
}
/* checks,radios */
.ui-checkbox .ui-icon,
.ui-selectmenu-list .ui-icon {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.ui-icon-checkbox-off,
.ui-icon-radio-off {
background-color: transparent;
}
.ui-checkbox-on .ui-icon,
.ui-radio-on .ui-icon {
background-color: #b2384a /*{global-active-background-color}*/; /* NOTE: this hex should match the active state color. It's repeated here for cascade */
}
/* loading icon */
.ui-icon-loading {
background: url(images/ajax-loader.gif);
background-size: 46px 46px;
}
/* Button corner classes
-----------------------------------------------------------------------------------------------------------*/
.ui-btn-corner-tl {
-moz-border-radius-topleft: 1em /*{global-radii-buttons}*/;
-webkit-border-top-left-radius: 1em /*{global-radii-buttons}*/;
border-top-left-radius: 1em /*{global-radii-buttons}*/;
}
.ui-btn-corner-tr {
-moz-border-radius-topright: 1em /*{global-radii-buttons}*/;
-webkit-border-top-right-radius: 1em /*{global-radii-buttons}*/;
border-top-right-radius: 1em /*{global-radii-buttons}*/;
}
.ui-btn-corner-bl {
-moz-border-radius-bottomleft: 1em /*{global-radii-buttons}*/;
-webkit-border-bottom-left-radius: 1em /*{global-radii-buttons}*/;
border-bottom-left-radius: 1em /*{global-radii-buttons}*/;
}
.ui-btn-corner-br {
-moz-border-radius-bottomright: 1em /*{global-radii-buttons}*/;
-webkit-border-bottom-right-radius: 1em /*{global-radii-buttons}*/;
border-bottom-right-radius: 1em /*{global-radii-buttons}*/;
}
.ui-btn-corner-top {
-moz-border-radius-topleft: 1em /*{global-radii-buttons}*/;
-webkit-border-top-left-radius: 1em /*{global-radii-buttons}*/;
border-top-left-radius: 1em /*{global-radii-buttons}*/;
-moz-border-radius-topright: 1em /*{global-radii-buttons}*/;
-webkit-border-top-right-radius: 1em /*{global-radii-buttons}*/;
border-top-right-radius: 1em /*{global-radii-buttons}*/;
}
.ui-btn-corner-bottom {
-moz-border-radius-bottomleft: 1em /*{global-radii-buttons}*/;
-webkit-border-bottom-left-radius: 1em /*{global-radii-buttons}*/;
border-bottom-left-radius: 1em /*{global-radii-buttons}*/;
-moz-border-radius-bottomright: 1em /*{global-radii-buttons}*/;
-webkit-border-bottom-right-radius: 1em /*{global-radii-buttons}*/;
border-bottom-right-radius: 1em /*{global-radii-buttons}*/;
}
.ui-btn-corner-right {
-moz-border-radius-topright: 1em /*{global-radii-buttons}*/;
-webkit-border-top-right-radius: 1em /*{global-radii-buttons}*/;
border-top-right-radius: 1em /*{global-radii-buttons}*/;
-moz-border-radius-bottomright: 1em /*{global-radii-buttons}*/;
-webkit-border-bottom-right-radius: 1em /*{global-radii-buttons}*/;
border-bottom-right-radius: 1em /*{global-radii-buttons}*/;
}
.ui-btn-corner-left {
-moz-border-radius-topleft: 1em /*{global-radii-buttons}*/;
-webkit-border-top-left-radius: 1em /*{global-radii-buttons}*/;
border-top-left-radius: 1em /*{global-radii-buttons}*/;
-moz-border-radius-bottomleft: 1em /*{global-radii-buttons}*/;
-webkit-border-bottom-left-radius: 1em /*{global-radii-buttons}*/;
border-bottom-left-radius: 1em /*{global-radii-buttons}*/;
}
.ui-btn-corner-all {
-moz-border-radius: 1em /*{global-radii-buttons}*/;
-webkit-border-radius: 1em /*{global-radii-buttons}*/;
border-radius: 1em /*{global-radii-buttons}*/;
}
/* radius clip workaround for cleaning up corner trapping */
.ui-corner-tl,
.ui-corner-tr,
.ui-corner-bl,
.ui-corner-br,
.ui-corner-top,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-left,
.ui-corner-all,
.ui-btn-corner-tl,
.ui-btn-corner-tr,
.ui-btn-corner-bl,
.ui-btn-corner-br,
.ui-btn-corner-top,
.ui-btn-corner-bottom,
.ui-btn-corner-right,
.ui-btn-corner-left,
.ui-btn-corner-all {
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
/* Overlay / modal
-----------------------------------------------------------------------------------------------------------*/
.ui-overlay {
background: #666;
filter: Alpha(Opacity=50);
opacity: .5;
position: absolute;
width: 100%;
height: 100%;
}
.ui-overlay-shadow {
-moz-box-shadow: 0px 0px 12px rgba(0,0,0,.6);
-webkit-box-shadow: 0px 0px 12px rgba(0,0,0,.6);
box-shadow: 0px 0px 12px rgba(0,0,0,.6);
}
.ui-shadow {
-moz-box-shadow: 0px 1px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,.3) /*{global-box-shadow-color}*/;
-webkit-box-shadow: 0px 1px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,.3) /*{global-box-shadow-color}*/;
box-shadow: 0px 1px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,.3) /*{global-box-shadow-color}*/;
}
.ui-bar-a .ui-shadow,
.ui-bar-b .ui-shadow ,
.ui-bar-c .ui-shadow {
-moz-box-shadow: 0px 1px 0 rgba(255,255,255,.3);
-webkit-box-shadow: 0px 1px 0 rgba(255,255,255,.3);
box-shadow: 0px 1px 0 rgba(255,255,255,.3);
}
.ui-shadow-inset {
-moz-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2);
box-shadow: inset 0px 1px 4px rgba(0,0,0,.2);
}
.ui-icon-shadow {
-moz-box-shadow: 0px 1px 0 rgba(255,255,255,.4) /*{global-icon-shadow}*/;
-webkit-box-shadow: 0px 1px 0 rgba(255,255,255,.4) /*{global-icon-shadow}*/;
box-shadow: 0px 1px 0 rgba(255,255,255,.4) /*{global-icon-shadow}*/;
}
/* Focus state - set here for specificity (note: these classes are added by JavaScript)
-----------------------------------------------------------------------------------------------------------*/
.ui-btn:focus, .ui-link-inherit:focus {
outline: 0;
}
.ui-btn.ui-focus {
z-index: 1;
}
.ui-focus,
.ui-btn:focus {
-moz-box-shadow: inset 0px 0px 3px #b2384a /*{global-active-background-color}*/, 0px 0px 9px #b2384a /*{global-active-background-color}*/;
-webkit-box-shadow: inset 0px 0px 3px #b2384a /*{global-active-background-color}*/, 0px 0px 9px #b2384a /*{global-active-background-color}*/;
box-shadow: inset 0px 0px 3px #b2384a /*{global-active-background-color}*/, 0px 0px 9px #b2384a /*{global-active-background-color}*/;
}
.ui-input-text.ui-focus,
.ui-input-search.ui-focus {
-moz-box-shadow: 0px 0px 12px #b2384a /*{global-active-background-color}*/;
-webkit-box-shadow: 0px 0px 12px #b2384a /*{global-active-background-color}*/;
box-shadow: 0px 0px 12px #b2384a /*{global-active-background-color}*/;
}
/* unset box shadow in browsers that don't do it right
-----------------------------------------------------------------------------------------------------------*/
.ui-mobile-nosupport-boxshadow * {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
/* ...and bring back focus */
.ui-mobile-nosupport-boxshadow .ui-focus,
.ui-mobile-nosupport-boxshadow .ui-btn:focus,
.ui-mobile-nosupport-boxshadow .ui-link-inherit:focus {
outline-width: 1px;
outline-style: auto;
}

This is my HTML

<head>
<meta charset="utf-8">
<title>MFSAMobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="css/jquery-mfsa.min.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="css/style.css" />
<!--[if lt IE9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

Replies(4)

watusiware

Re: ThemeRoller downloaded theme issues

10 years ago

You loaded your theme, and then you replaced it with the default theme!

You need to load your theme file, and then load jquery.mobile.structure.css. You should NOT load jquery.mobile.css.

I'd like to link to the documentation that shows this, but I actually couldn't find it in the demo mess that JQM calls documentation...

(Please, two years in - can we have real documentation that is searchable and has a real table of contents all in one place? Please? It was promised - what happened?)

haga0054

Re: Re: ThemeRoller downloaded theme issues

10 years ago

I don't believe the JQM documentation has anything about Themeroller besides the fact that you can use it.

The documentation that tells you what to load is actually present when you download the theme. Just an FYI.

jacqmizz

Re: ThemeRoller downloaded theme issues

10 years ago

Thanks. I managed to get and use the structure. Now having new problems :) ... in the sense of incorporating my preferred CSS to the theme :P

thanks

watusiware

Re: ThemeRoller downloaded theme issues

10 years ago

Do not modify the downloaded CSS or jquery.mobile.structure.css. That would be asking for trouble when you update, and it is important to be able to update jQuery Mobile because of the constantly-moving browser landscape.

Add your own theme file that is loaded after jquery.mobile.structure, and override any styles you need to.

You will almost certainly need to become proficient with Firebug or Web Inspector, etc. to do this. You can test most of your changes on-the-fly in these tools before you commit them to your CSS file.

Top Reply

Response title

Attachments

jQuery Forum

ThemeRoller downloaded theme issues

Replies(4)

Re: ThemeRoller downloaded theme issues

Re: Re: ThemeRoller downloaded theme issues

Re: ThemeRoller downloaded theme issues

Re: ThemeRoller downloaded theme issues

Statistics

Tags

Actions