Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Custom Style jquery tabs

Posted on 2012-08-21
5
Medium Priority
?
658 Views
Last Modified: 2012-09-10
I am using jquery tabs and i need to change the look of the tabs. So the tabs will have green color , selected tab is black and the content on the selected tag is black the fon color is white.

Also is thta possible to have not the rounded corners of the tab but mor elike trapezoid like shape.
0
Comment
Question by:erikTsomik
  • 2
  • 2
5 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38316769
A link to the page?  Some code? A theme? Platform? Any hints at all? Or do you just want a series of guesses.

Cd&
0
 
LVL 19

Author Comment

by:erikTsomik
ID: 38316796
i have the code here

<style type="text/css">
#tabs {
      padding: 2px;
      background: none;
      border-width: 0px;
      color:white;
}
#tabs .ui-tabs-nav {
      padding-left: 0px;
      background: transparent;
      border-width: 0px 0px 1px 0px;
      -moz-border-radius: 0px;
      -webkit-border-radius: 0px;
      border-radius: 0px;

      color:white;
}
#tabs .ui-tabs-panel {
      background: url(images/ui-bg_highlight-hard_100_f5f3e5_1x100.png) repeat-x scroll 50% top #f5f3e5;
      border-width: 0em 0.2em 0.2em 0.2em;
      background: black;
      color:white;
}

#tabs .ui-tabs-nav li {
      margin-top: 0.6em;
      font-size: 80%;
      background: green;
      color: white;
}
#tabs .ui-tabs-nav li.ui-tabs-selected {
      margin-top: 0em;
      font-size: 100%;
      background: black;
      color:white;
}
</style>
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38317155
Well the code you posted looks like it should give you what you want.  However if you are generating styles using jquery, then you are likely adding inline styles that override the stylesheet.  There is no worse way to do styling than using scripting.  It screws up pages at some point about 100% of the time.  If you are using some kind of a theme you will probably have to do trial and error to find the right place to make the changes.  Most 3rd party code is bloated junk and resists changes.

For a trapezoid shape see: http://jpbydesign.com/blog/?p=168


Cd&
0
 
LVL 11

Expert Comment

by:mcnute
ID: 38319518
find the section of jquery tabs in the jquery.ui.css and jquery.theme.css file and modify it to your likings.
0
 
LVL 11

Accepted Solution

by:
mcnute earned 1500 total points
ID: 38319522
If you have created a custom jquery ui file in the download section there should be a jquery.ui.custom.css file where the styles for the tabs widget are defined, modify this to your preferences.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question