Response title
This is preview!
Move this topic
jquery.mobile css overriding my own css
in jQuery Mobile
•
7 years ago
I generated my own css via the Theme Roller app at
themeroller.jquerymobile.com, but jquery.mobile-1.3.0-beta.1.min.css
overrides all the background colors.
What am I doing wrong?
What am I doing wrong?
1
Replies(4)
Re: jquery.mobile css overriding my own css
7 years ago
1. You are using 1.3.0-beta instead of 1.4.5. Never code for a beta, and
always use the latest.
2. You probably included the CSS files in the wrong order. Your
overrides come after the theme’s CSS. You may have not specified
enough specificity in your selectors to make them override.
JΛ̊KE
Leave a comment on jakecigar's reply
Re: jquery.mobile css overriding my own css
7 years ago
CSS load order if you are using a theme:
- jquery.mobile.theme.css
- jquery.mobile.icon.css (1.4+)
- jQuery.mobile.structure.css
- my_overrides.css
If you use a theme, do NOT use
jquery.mobile.css
, as it contains all of
theme, icon, and structure.
There were very significant incompatible changes in 1.4. Starting a
project with 1.3, whether beta or released, now, is a dead-end. It
won't even support all current browsers. Then when you decided to
update, you will have a big job on your hands.
Leave a comment on watusiware's reply
Re: jquery.mobile css overriding my own css
7 years ago
Regarding using 1.3, I was just following instructions in using that css
link (I forget where those instructions were now). I've updated it.
You say don't use jquery.mobile.css if you're using a theme, but without it, nothing is right. The theme generated by Theme Roller is not enough.
Putting the lines in the proper order and replacing the beta file seemed to fix it. It's working well now, thanks so much.
You say don't use jquery.mobile.css if you're using a theme, but without it, nothing is right. The theme generated by Theme Roller is not enough.
Putting the lines in the proper order and replacing the beta file seemed to fix it. It's working well now, thanks so much.
Leave a comment on James Israel's reply
Re: jquery.mobile css overriding my own css
7 years ago
Read the instructions that you get in the popup when you download the
theme. It explains it.
jquery.mobile.theme.css
is a pasted-together file combining all of:
- default theme
- default icons CSS
- "structure" (CSS related to layout)
It has everything you need, if you are NOT going to use your own theme.
If you use your own theme, do NOT use the default file that
contains all 3 parts!
All of the parts can be downloaded separately. You get the theme
from theme roller. You get the other parts from the download site.
There are also multiple options with icons. It depends on whether
you intend to use SVG icons, PNG icons, both (SVG with PNG for old
browsers that don't support SVG) and whether or not you want to
use inline images (encoded right in the CSS) or external images
(links). The standard way is inline SVG with external PNG fallback.
Leave a comment on watusiware's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to James Israel's question