Overwrite basic jQuery-UI css for ui-tabs does not work

Question

I'm developing a website that uses jquery tabs+standard ui theme, and I'd like to change/override the font settings (size) of the ui theme. Though I looked at related sites Easy way to overwrite basic jQuery-UI css?, http://api.jqueryui.com/tabs/, http://api.jqueryui.com/theming/css-framework/ I cant get it worked.

Pls your help.

Here's what I have now (simplified code):

<style>
  #ui-tabs-div.ui-widget {font-size: 10px} /* this is not working */
</style>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" >    </script>

<script type="text/javascript">
  $(function() {
   $( "#tabs" ).tabs();
  }
</script>

<div id="tabs"> </div> <!--tab contents here -->

arun15thmay · Accepted Answer · 2014-01-17 13:57:14Z

1

http://jsfiddle.net/AHXwv/

 #tabs.ui-widget {font-size: 10px}

answered Jan 17, 2014 at 13:57

arun15thmay

1,0621 gold badge9 silver badges19 bronze badges

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

Comments

chris · Accepted Answer · 2014-01-17 13:57:04Z

0

Try to add an ID before the class to overwrite the default css:

#myId .ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.1em;

}

answered Jan 17, 2014 at 13:57

chris

4,8977 gold badges37 silver badges56 bronze badges

1 Comment

Joppo Over a year ago

thnx. I assume myId should be 'tabs' in my case as also suggested by arun (?)

Collectives™ on Stack Overflow

Overwrite basic jQuery-UI css for ui-tabs does not work

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related