[casey mParticipant]

Howdy!

Can the “tabs” short code be customized to use Icons instead of tabs, and remove box/border (see image for example), or would I be better off using a plugin like SlideTabs?

[SupportMember]

Hi Casey,

Thanks for writing in!

You can achieve that with a bit of custom css code, you will also have to create a sprite with your icons(see: http://css-tricks.com/css-sprites/).

Below is an example of the css you want to use, add it to the Customizer > Custom > CSS

/* Remove the tabs block border */
.x-nav-tabs,
.x-nav-tabs.top>li,
.x-tab-content{
  border:none!important;
}

/* Make the container transparent */
.x-nav-tabs-item a,
.x-tab-content{
  background:transparent!important;
}

/* Set the icon sprite for the links */
.x-nav-tabs-item a:before{
  content:'';
  display:block;
  width:75px;
  height:75px;
  background-image: url(http://yourwebsiteurl.com/wp-content/uploads/2014/06/sprite_tab.png);
}

Give the background position for each tab list item
.x-nav-tabs-item:nth-child(1) a:before{
  background-position: 0 0;
}

.x-nav-tabs-item:nth-child(2) a:before{
  background-position: -100px 0;
}

.x-nav-tabs-item:nth-child(3) a:before{
  background-position: -200px 0;
}

.x-nav-tabs-item:nth-child(4) a:before{
  background-position: -300px 0;
}

As i told you, this is example on how to achieve it, but you will have to adjust this css to work with your images and style.

If you need more help, please first set up a tab content and add your images/sprite and provide us your website URL.

Hope that will help you, thank you.

[casey mParticipant]

This is awesome – thanks! Above and beyond, really!

[Kosher KMember]

You’re welcome,

If you have any other concern please let us know and we’d be happy to help you

Have a great weekend

[Author]

Posts