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 will do the trick. — user1846065
– user1846065, Commented Jun 12, 2013 at 4:37
Apparently short answers can get converted into comments. That's a good thing to remember. — user1846065
– user1846065, Commented Jun 12, 2013 at 4:38
I've already flagged everything in my own CSS as !important with no effect. — Thomas
– Thomas, Commented Jun 12, 2013 at 6:05

Community · Accepted Answer · 2017-05-23 11:57:24Z

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, 2017 at 11:57

CommunityBot

11 silver badge

answered Jun 12, 2013 at 7:40

Dominik Schreiber

2,8011 gold badge26 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Thomas Over a year ago

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: 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.

Dominik Schreiber Over a year ago

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)

Thomas Over a year ago

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 Over a year ago

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.

Suresh Atta · Accepted Answer · 2013-06-12 04:37:54Z

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, 2013 at 4:37

Suresh Atta

122k38 gold badges206 silver badges315 bronze badges

1 Comment

hungerstar Over a year ago

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.

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

Add !important in your existing css style.

Example

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 12, 2013 at 4:38

yeyene

7,4001 gold badge24 silver badges29 bronze badges

Comments

john Smith · Accepted Answer · 2013-06-12 08:32:23Z

0

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);
}

answered Jun 12, 2013 at 8:32

john Smith

18k12 gold badges80 silver badges124 bronze badges

Collectives™ on Stack Overflow

override jquery theme with custom css

4 Answers 4

4 Comments

1 Comment

Example

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

Example

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related