CODEWITHSUNDEEP
cssjquery-uijquery-mobile
shoujo_sm
shoujo_sm

Reputation: 3203

Override Jquery mobile style <a>

Is there any documentation to change the style in Jquery mobile? I want to make my link text-decoration: none; but the underline still remaining there. I notice there is .ui-page to override for page but is there any full documentation to customize our own style? This is not related to the jquery mobile theme (a, b, c..)

Thanks.

*updated*

<div id="contentA" class="contentbox">
   <h3>Hello</h3>
   <a class='levelA' href="#anotherPage" ><img src="img/img.png"  />
   <p class="levelDescA" >XXXXXXXX
   </a>
</div>

Upvotes: 0

Views: 4039

Answers (4)

user281058
user281058

Reputation: 151

Or, better yet, here's a modified jquery.mobile-1.4.3.min.css that doesn't underline links: https://drive.google.com/file/d/0B9z4E6c3ozD8Vi1WQkxnQ2FmVzQ/view?usp=sharing . And I didn't use !important tags, so control over link classes and underlining is restored to you in the <head> tag. I'd already made this for myself a few weeks ago, but I saw this question and figured why not share it. I know its on version 1.4.5 now, but I didn't upgrade because if you look at the change logs, most of what they did was lock in even more default settings, and themeroller isn't really a solution because it still applies your properties inconsistently.

Upvotes: 0

GlenM
GlenM

Reputation: 39

To kind of expand on Lee's answer above. I was having the same problem so I took his advice and checked my custom theme I made in themeroller. It already had the following -

/* Buttons
-----------------------------------------------------------------------------------------------------------*/
.ui-btn,
label.ui-btn {
font-weight: bold;
border-width: 1px;
border-style: solid;
}
.ui-btn:link {
text-decoration: none !important;

But I was getting underlines so I added the text-decoration: none !important; to my global fonts section - 

/* Globals */
/* Font
-----------------------------------------------------------------------------------------------------------*/
html {
font-size: 100%;
}
body,
input,
select,
textarea,
button,
.ui-btn {
font-size: 1em;
line-height: 1.3;
  font-family: sans-serif /*{global-font-family}*/;
  text-decoration: none !important;

This stopped the underlines.

Upvotes: 0

Lee
Lee

Reputation: 1

If you are using ThemeROller you will have to go into your CSS file and add the "text-decoration: none !important;" line into the links section of your swatch theme that controls the page. Ex. go to your "K" swatch in ThemeROller to fix the underline problem. ThemeRoller is great but sometimes unstable. Sometimes it underlines links and sometimes it does not but this trick works for me every time.

Upvotes: 0

Andy
Andy

Reputation: 14575

You probably have a problem with specificity. The jqueryUI.css specificity will be higher than yours. You can counter this two ways:

  • Increase your specificity, instead of a { text-decoration: none; } try body #container #content a { text-decoration: none; }. (Obviously use your element ID's instead of the ones I have made up)
  • add !important (a { text-decoration: none !important; } - This is generally bad practice as it may cause issues further down the line so I recommend the first

Upvotes: 3

Related Questions