GENESIS TABS – How to change tab title style?

Community Forums Forums Design Tips and Tricks GENESIS TABS – How to change tab title style?

This topic is: not resolved

Tagged: 

This topic contains 5 replies, has 3 voices, and was last updated by  Tony @ AlphaBlossom 1 year, 1 month ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #48055

    supertramp
    Participant
    Post count: 8

    Hı,

    I am using Genesis Tabs plugin and I want to assign different style classes for each tabs (Only for “tab title” sectinons). For example tab1 style assign to Tab-1, tab2 to tab2 etc… , How could I do that?

    Here is the related codes from plugin.php:

    			// Display the tab links
    			echo '<ul class="ui-tabs-nav">';
    				foreach ( (array) $cats as $cat ) {
    					if ( $cat ) echo '<li><a href="#cat-' . $cat . '">' . get_cat_name($cat) . '</a></li>';
    				}
    			echo '</ul>'; 

    And here is my genesis tabs style.css :

    .ui-tabs {
    clear: both;
    overflow: hidden;
    }

    .ui-tabs img {
    margin: 0 0 10px;
    }

    .ui-tabs .post {
    background: #ddebf4;
    margin: 0 0 10px;
    overflow: hidden;
    padding: 15px;
    -webkit-border-radius: 0px 0px 5px 5px;-moz-border-radius: 0px 0px 5px 5px;border-radius: 0px 0px 5px 5px;
    }

    .ui-tabs .ui-tabs-hide {
    display: none;
    }

    .ui-tabs ul.ui-tabs-nav {
    clear: both;
    font-size: 15px;
    list-style-type: none;
    margin: 10px 0 3px;
    padding: 0;
    }

    .ui-tabs ul.ui-tabs-nav li {
    display: inline;
    margin: 0 2px 0 0;
    padding: 0;
    text-align: center;
    }

    .ui-tabs ul.ui-tabs-nav li a {
    background-image: linear-gradient(bottom, #B67D0A 21%, #F3B851 69%);
    background-image: -o-linear-gradient(bottom, #B67D0A 21%, #F3B851 69%);
    background-image: -moz-linear-gradient(bottom, #B67D0A 21%, #F3B851 69%);
    background-image: -webkit-linear-gradient(bottom, #B67D0A 21%, #F3B851 69%);
    background-image: -ms-linear-gradient(bottom, #B67D0A 21%, #F3B851 69%);

    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.21, #B67D0A),
    color-stop(0.69, #F3B851)
    );
    color: #fff;
    margin: 0;
    padding: 10px 10px 8px;
    -webkit-border-radius: 5px 5px 0px 0px;-moz-border-radius: 5px 5px 0px 0px;border-radius: 5px 5px 0px 0px;
    text-decoration: bold;
    text-transform: uppercase;
    }

    .ui-tabs ul.ui-tabs-nav li a:hover,
    .ui-tabs ul.ui-tabs-nav li.ui-tabs-selected a {
    background-color: #f5f5f5;
    color: #333;
    }

    Thank you very much for responses.

    • This topic was modified 1 year, 2 months ago by  supertramp.
    • This topic was modified 1 year, 2 months ago by  supertramp.
    • This topic was modified 1 year, 2 months ago by  supertramp.
    • This topic was modified 1 year, 2 months ago by  supertramp.
    • This topic was modified 1 year, 2 months ago by  supertramp.
    • This topic was modified 1 year, 2 months ago by  supertramp.
    #48067

    Anita
    Participant
    Post count: 7487

    Please share a link to your website with the tabs and content in place so we can take a look. Thank you.


    When asking for help, please provide a link or screen shot showing your problem!
    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me!

    #48073

    supertramp
    Participant
    Post count: 8

    Hi,

    Thank you for your reply. My link: http://www.astrolojikozmik.com/ and what i want to do:

    #48109

    Tony @ AlphaBlossom
    Participant
    Post count: 503

    Your tabs already have a unique id for each one, so you can use that to add your background image, as well as the rest of the css.

    The existing ID’s are ui-id-1 through ui-id-13. If the tabs are not changing, you can style the css for each:

    .ui-tabs ul.ui-tabs-nav li a#ui-id-1 {
    your css goes here;
    }

    .ui-tabs ul.ui-tabs-nav li a#ui-id-2 {
    your css goes here;
    }

    all the way through 13.

    Hope that’s what you’re looking for!

    Take care,
    Tony


    #48190

    supertramp
    Participant
    Post count: 8

    Hi Tony,

    You are lifesaver! Thank you for your great help, it works!

    Best regards!

    #48714

    Tony @ AlphaBlossom
    Participant
    Post count: 503

    My pleasure…I’m happy it worked for you!


Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.