override jquery theme with custom css

Question

I am not a web designer. I'm trying to help out a friend.

In building this site, I've decided to implement some jquery to facilitate some smooth transitions between page elements. The problem I run into is that in order for the jquery to function, I must include http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css in my code, which overrides my custom css. The specific problem is that it reformats the text in my hyperlinks and it looks awful.

What is the easiest way to prevent the jquery css from overriding my custom css? I've been reading about themeroller, but after all the work I've already done, even that is looking too complicated.

If I remember correctly, making your CSS [!important](http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css) will do the trick. — , Jun 12 '13 at 04:37
Apparently short answers can get converted into comments. That's a good thing to remember. — , Jun 12 '13 at 04:38
I've already flagged everything in my own CSS as !important with no effect. — Thomas, Jun 12 '13 at 06:05
Can we have an example of the code? Perhaps a [jsfiddle](http://jsfiddle.net/)? — , Jun 12 '13 at 06:07
I've linked it in my html both before and after my own with no effect. — Thomas, Jun 12 '13 at 07:10

score 2 · Accepted Answer · edited May 23 '17 at 11:57

2

As other answers state, you can simply add !important to any css style you definitely want to use (like yours vs. jquery's). That should do the trick. But this is quite tedious when done for your whole css document.

First thing you can do

is to make sure your css is included after jquery's. This will force your css stylings over jquery's as they are included last. And hope it works. (see Two css files defining same class)

Next thing you can do

is to play around with jquery's css sheet. What happens if you include a file jquery.mobile-1.2.0.min.css that is actually empty? Will jquery work? What if you just delete all css code that touches your stuff? What exceptions are logged in the developer tools?

Finally you can

go the hard (but recommended) way of putting all the css stuff (yours and jquery's) together in a custom jquery theme. This can mean a lot of reordering and replanning, but once you've done it, jquery should be no problem any more.

edited May 23 '17 at 11:57

Community

1
1

answered Jun 12 '13 at 07:40

Dominik Schreiber

2,629
1
23
33

So in the end what worked was adding the element .ui-link to my css file with !important after those lines that I needed. Even if my css was linked last, it still wouldn't work without !important. I'm just linking to an online css rather than copying it to my server - I don't know what the best practice is for using jquery. Site url: http://www.arrington-photography.com I guess adding the .ui-link to my css is what they mean by specificity? I am so not a web designer. Now ask me to configure spam filtering on an Exchange server, that I can do. – Thomas Jun 12 '13 at 23:11
Adding the `.ui-link` looks like just the right way. Good that it works now. (oh, and by the way: you could *accept my answer* so that others with the same problem find the solution easier) – Dominik Schreiber Jun 13 '13 at 07:31
I think it was the combination that worked. Linking my CSS last, adding the jquery element id to my own css, and marking it as important. I do appreciate everyone's help :) – Thomas Jun 13 '13 at 07:38
After several months of "helping out friends", I'm apparently a web designer. And I can look at this now and definitely say this is the right answer. I had `.ui`, but jquery had `.ui-link` which was more specific, regardless of load order. I had to override it by adding it to my own CSS. – Thomas Apr 01 '14 at 20:35

score 0 · Answer 2 · answered Jun 12 '13 at 04:37

0

Use !important in your css. May i think these will help u.

CSS rules marked !important take precedence over later rules.

Ex:

#example p {
    color: blue !important;
}

Reference

answered Jun 12 '13 at 04:37

Suresh Atta

120,458
37
198
307

1

While `!important` might work., I would caution against its use and only use it if all other attempts have failed. Use the cascade and specificity which are inherent to CSS to control your styles . Using `!important` goes against this flow and if your not careful can lead to a hard to manage style sheet and even more `!important` declarations snowballing the situation. – hungerstar Jun 12 '13 at 06:17

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

0

Add !important in your existing css style.

Example

#yourCustomID {
    width: 500px !important;
    background: red !important;
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 12 '13 at 04:38

yeyene

7,297
1
21
29

score 0 · Answer 4 · answered Jun 12 '13 at 08:32

Make sure your css file is loaded after the jqm-css

for instance you have this navbar

<div data-role="navbar" id="foo1" >
    <ul>
        <li><a href="#" class="toList" data-icon="custom-settings"   data-iconshadow="false" data-transition="fade"></a></li>   
    </ul>
</div>

you can style it like

 #foo1 .ui-btn{
height:45px;
}

.ui-icon-custom-settings {
background: url(../images/custom-icon) no-repeat rgba(0, 0, 0, 0);
}

override jquery theme with custom css

4 Answers4

Example