Title: Formating the "[tab]" shortcode
Last modified: September 1, 2016

---

# Formating the "[tab]" shortcode

 *  [paulo.tebet](https://wordpress.org/support/users/paulotebet/)
 * (@paulotebet)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/formating-the-tab-shortcode/)
 * I am using the [tab] shortcode to create my FAQ page.
 * [FAQ](http://kabudio.com.br/perguntas-frequentes/)
    There is only a minor issue
   with this implementation. The selected Tab seems out of place in terms of design.
   The unselected tabs are using my accent color and on hoover it is changing.
 * But when I select a tab, it shows Black font on white background…. 🙁
 * Is there a way for me to control the background and font color for this?
 * Regards.
 * Paulo Tebet

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/)
 * (@britner)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/formating-the-tab-shortcode/#post-7667250)
 *     ```
       .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover {
           color: white;
           background: blue;
       }
       ```
   
 * That is your active tab ^
 *     ```
       .nav-tabs>li>a:hover {
           color: green;
           background: yellow;
       }
       ```
   
 * ^^ Thats hover
 *     ```
       .nav-tabs>li>a {
           background: white;
           color: black;
       }
       ```
   
 * And thats your css for standard.
 * Kadence Themes
 *  Thread Starter [paulo.tebet](https://wordpress.org/support/users/paulotebet/)
 * (@paulotebet)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/formating-the-tab-shortcode/#post-7667310)
 * Thank you so very much!
 * Regards.
 * Paulo Tebet
 *  Thread Starter [paulo.tebet](https://wordpress.org/support/users/paulotebet/)
 * (@paulotebet)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/formating-the-tab-shortcode/#post-7667377)
 * It looks like that there is a 4th state, because even with the following code(
   which doesn´t contains black) I am having a state for the tabs that is using 
   black on white background in [FAQ page](http://kabudio.com.br/perguntas-frequentes/)
 * On page load, click on a tab and then move the cursor to other tab and the one
   just clicked becomes Black on White.
 *     ```
       .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover {
           color: #c688e2;
           background: #fafafa;
       }
   
       .nav-tabs>li>a:hover {
           color: white;
           background: #599fb4;
       }
   
       .nav-tabs>li>a {
           background: #c688e2;
           color: #fafafa;
       }
       ```
   
 * Regards,
 * Paulo Tebet
 *  [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/)
 * (@britner)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/formating-the-tab-shortcode/#post-7667438)
 *     ```
       .nav-tabs>li.active>a:focus {
       color: #c688e2;
           background: #fafafa;
       }
       ```
   
 * Kadence Themes

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Formating the "[tab]" shortcode’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/virtue/3.4.15/screenshot.png)
 * Virtue
 * [Support Threads](https://wordpress.org/support/theme/virtue/)
 * [Active Topics](https://wordpress.org/support/theme/virtue/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/virtue/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/virtue/reviews/)

 * 4 replies
 * 2 participants
 * Last reply from: [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/)
 * Last activity: [9 years, 9 months ago](https://wordpress.org/support/topic/formating-the-tab-shortcode/#post-7667438)
 * Status: not resolved