Tabs – customize?

[plbenson]

Is there a way to make the ‘tabs’ colored (each differently) and/or have an ‘Image’ for the tabs?

Tabs

[Mohammad – SUPPORT]

HI,
Yes you can make this change so please put some css at

Admin -> Theme Options -> General -> Custom Css

/* FOR FIRST TAB 1  */
ul.ui-tabs-nav li.ui-state-default a#ui-id-1{background-color:#ffffff;color:#000000} /*Default State*/
ul.ui-tabs-nav  li.ui-tabs-active a#ui-id-1{background-color:#000000;color:#ffffff}/*Active State*/

/* FOR FIRST TAB 2  */
ul.ui-tabs-nav li.ui-state-default a#ui-id-2{background-color:#ffffff;color:#000000} /*Default State*/
ul.ui-tabs-nav  li.ui-tabs-active a#ui-id-2{background-color:#000000;color:#ffffff}/*Active State*/

/* FOR FIRST TAB 3  */
ul.ui-tabs-nav li.ui-state-default a#ui-id-3{background-color:#ffffff;color:#000000} /*Default State*/
ul.ui-tabs-nav  li.ui-tabs-active a#ui-id-3{background-color:#000000;color:#ffffff}/*Active State*/

You can change the background-color code and color code as you want

[plbenson]

Thanks — is there a way to put / use an image for the tabs?

[Mohammad – SUPPORT]

HI,
Yes , you can put image to tab background ,

/* FOR FIRST TAB 1  */
ul.ui-tabs-nav li.ui-state-default a#ui-id-1{background:url(PUT_HERE_ABSOLUTE_IMAGES_PATH) no-repeat ;color:#000000} /*Default State please put absolute image path at replace of PUT_HERE_ABSOLUTE_IMAGES_PATH*/
ul.ui-tabs-nav  li.ui-tabs-active a#ui-id-1{background:url(PUT_HERE_ABSOLUTE_IMAGES_PATH) no-repeat ;color:#ffffff}/*Active State please put absolute image path at replace of PUT_HERE_ABSOLUTE_IMAGES_PATH*/

/* FOR FIRST TAB 2  */
ul.ui-tabs-nav li.ui-state-default a#ui-id-2{background:url(PUT_HERE_ABSOLUTE_IMAGES_PATH) no-repeat ;color:#000000} /*Default State please put absolute image path at replace of PUT_HERE_ABSOLUTE_IMAGES_PATH*/
ul.ui-tabs-nav  li.ui-tabs-active a#ui-id-2{background:url(PUT_HERE_ABSOLUTE_IMAGES_PATH) no-repeat ;color:#ffffff}/*Active State please put absolute image path at replace of PUT_HERE_ABSOLUTE_IMAGES_PATH */

/* FOR FIRST TAB 3  */
ul.ui-tabs-nav li.ui-state-default a#ui-id-3{background:url(PUT_HERE_ABSOLUTE_IMAGES_PATH) no-repeat ;color:#000000} /*Default State please put absolute image path at replace of PUT_HERE_ABSOLUTE_IMAGES_PATH */
ul.ui-tabs-nav  li.ui-tabs-active a#ui-id-3{background:url(PUT_HERE_ABSOLUTE_IMAGES_PATH) no-repeat ;color:#ffffff}/*Active State please put absolute image path at replace of PUT_HERE_ABSOLUTE_IMAGES_PATH */

[plbenson]

This reply has been marked as private.

[plbenson]

This reply has been marked as private.

[plbenson]

Didn’t work — this is what I added:

/* FOR FIRST TAB 1 */
ul.ui-tabs-nav li.ui-state-default a#ui-id-1{background:url http://www.letfamilyknow.com/wp-content/uploads/2013/08/Information_Tab.jpg no-repeat ;color:#000000}
ul.ui-tabs-nav li.ui-tabs-active a#ui-id-1{background:url http://www.letfamilyknow.com/wp-content/uploads/2013/08/Information_Tab.jpg no-repeat ;color:#ffffff}

** Should I have url= or something like that?

[plbenson]

This reply has been marked as private.

[plbenson]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,

Please use only background color because background image will not look good
With Best Regards
Swiftideas Theme

[plbenson]

Thanks.

[Melanie – SUPPORT]

You’re welcome 🙂