Custom Style jquery tabs

Posted on 2012-08-21
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.
Question by:erikTsomik
    LVL 53

    Expert Comment

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

    LVL 19

    Author Comment

    i have the code here

    <style type="text/css">
    #tabs {
          padding: 2px;
          background: none;
          border-width: 0px;
    #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;

    #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;

    #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;
    LVL 53

    Expert Comment

    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:

    LVL 11

    Expert Comment

    find the section of jquery tabs in the jquery.ui.css and jquery.theme.css file and modify it to your likings.
    LVL 11

    Accepted Solution

    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.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Hire Freelancers to Complete JavaScript Projects

    Source the talented Expert Exchange community
    for top quality work on your JavaScript projects.

    Hire the best. Collaborate easily. Get quality work.

    Suggested Solutions

    Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
    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 Browse or search based on font properties or name to find a suitable font for…

    737 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

    Need Help in Real-Time?

    Connect with top rated Experts

    21 Experts available now in Live!

    Get 1:1 Help Now