Community Forums › Forums › Archived Forums › Design Tips and Tricks › GENESIS TABS – How to change tab title style?
Tagged: genesis tabs
- This topic has 5 replies, 3 voices, and was last updated 10 years, 9 months ago by Tony @ AlphaBlossom.
-
AuthorPosts
-
June 27, 2013 at 10:42 am #48055supertrampMember
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.
June 27, 2013 at 11:03 am #48067AnitaKeymasterPlease share a link to your website with the tabs and content in place so we can take a look. Thank you.
Love coffee, chocolate and my Bella!
June 27, 2013 at 11:22 am #48073supertrampMemberHi,
Thank you for your reply. My link: http://www.astrolojikozmik.com/ and what i want to do:
June 27, 2013 at 3:33 pm #48109Tony @ AlphaBlossomMemberYour 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
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
June 28, 2013 at 5:50 am #48190supertrampMemberHi Tony,
You are lifesaver! Thank you for your great help, it works!
Best regards!
July 1, 2013 at 12:10 pm #48714Tony @ AlphaBlossomMemberMy pleasure...I'm happy it worked for you!
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.