WordPress.org

Ready to get started?Download WordPress

Forums

Shortcodes Ultimate
[resolved] Can we style tab titles? (3 posts)

  1. fwchapman
    Member
    Posted 3 years ago #

    Hi Vladimir,

    I looked at the standard CSS for styling tabs, and all of it has to do with spacing and color. Is it possible to style the text in the tab title?

    I can put the title in all capitals and use boldface, which is okay, but it would be ideal if I could apply my theme's header styles to the tab titles. Any suggestions?

    Thanks,

    Fred

    http://wordpress.org/extend/plugins/shortcodes-ultimate/

  2. fwchapman
    Member
    Posted 3 years ago #

    I figured out how to style tab titles. I wanted the text to match the style of my theme's h5 header, which looks like this:

    color: #C35429;
    font-family: Georgia, Times New Roman, Trebuchet MS;
    font-weight: normal;
    text-decoration: none;
    font-size: 16px;

    In case anyone else is trying to do something similar, here's what I put in the plugin's Custom CSS tab:

    /* Tabs */
    
    .su-tabs-style-1 .su-tabs-nav {
    	padding: 5px 5px 0 5px;
    	margin: 0;
    	height: 40px;
    	background: #e5e5e5;
      /* Begin Customization */
    	color: #C35429;
    	font-family: Georgia, Times New Roman, Trebuchet MS;
    	font-weight: normal;
    	text-decoration: none;
      	font-size: 16px;
      /* End Customization */
    }
    
    .su-tabs-style-2 .su-tabs-nav {
    	padding: 5px 5px 0 5px;
    	margin: 0;
    	height: 40px;
    	background: #222;
        /* Begin Customization */
    	color: #C35429;
    	font-family: Georgia, Times New Roman, Trebuchet MS;
    	font-weight: normal;
    	text-decoration: none;
      	font-size: 16px;
      /* End Customization */
    }

    The Custom CSS tab is a great feature of this plugin. It works beautifully!

    Fred

  3. Vladimir Anokhin
    Member
    Plugin Author

    Posted 3 years ago #

    You can add any styles to titles. Try to use this selector in custom CSS

    .su-tabs-nav span {
    	text-transform: uppercase;
    }

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic