[bengiltrapParticipant]

Hi,

I am trying design something like this:

http://www.kloud.com.au/#section-services

I am using the tabs shortcode, and have customised it based on other threads I have read.

I am struggling with a few things. Can I get icons and a title in the tab nav section? Also, how do I customise the transition that happens when I click on the tabs?

This is the test page I am working on http://index.com.au/home-4/

If there is an easier way to set this up like the kloud website, that would be great

Ben

[John EzraMember]

Hi Ben,

Thanks for writing in! This isn’t a feature offered by X. Yes we have a tab element but the behavior of your example site is a bit different. They have a extra div to contain the triangle. This means we would have to edit the tab element and this will be beyond our scope of support. You may wish to engage a developer for a custom solution or try a 3rd party plugin.

Thank you for understanding. Having said that, we do try our best to see if we can do a workaround. There is a CSS workaround but it’s nor perfect. If it works for you then great! If not and you require it to be perfect, then you can try the suggestion above.

In the meantime, you can test this CSS. You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.x-tab-content .x-tab-pane {
    background: #000000!important;
    
}

.x-tab-content .x-tab-pane:before {
	content:"";
	width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #000000;
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    -webkit-transition: left 0.2s ease;
    -o-transition: left 0.2s ease;
    transition: left 0.2s ease;
	margin-left:60px
}

.x-tab-content .x-tab-pane:after {
	content:"";
    border-bottom: 10px solid #ef7622;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
  	width:100%;
}

div#tab-1:before {
	margin-left:5%;
}

div#tab-2:before {
	margin-left:18%;
}

div#tab-3:before {
	margin-left:30%;
}

div#tab-4:before {
	margin-left:43%;
}

div#tab-5:before {
	margin-left:54.5%;
}

div#tab-6:before {
	margin-left:66.5%;
}

div#tab-7:before {
	margin-left:79%;
}

div#tab-8:before {
	margin-left:91.5%;
}

Hope this helps – thanks!

[bengiltrapParticipant]

Thanks for this! I wasnt expecting the triangle but this is perfect.

Can I get icons and a title in the tab nav section?

I have put this code in the customiser but all it does it changes the font of the tab headings and doesnt include the icons.

.x-nav-tabs {
position: relative;
margin-bottom: 0;
border: 0px
border-bottom: 0;
box-shadow:none;
content: “f13d”;
font-family: “fontawesome”;
}

I want to put large icons, centered and then the tab title underneath

Also when you click on each tab, it flashes white. Is there a way to adjust this transition?

Thanks!

[ZeshanMember]

Hi there,

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in-depth changes, you may wish to consult with a developer.

As for the white flashing on changing the tab, please try adding following CSS code under Custom > CSS in the Customizer:

.x-tab-content {
  background-color: #000000;
}

Thank you!

[bengiltrapParticipant]

Yes this made it better thank you. Is there anyway to make the transition smoother?

I have managed to do everything I wanted with the icons. However, I am having trouble with hover and active.

How can I make the icons and tab title change colour on hover at the same time? At the moment, they change on hover separately.

I’d also like to know how to make the icons change color when active, but only the text does at this stage.

http://index.com.au/home-4/

Thanks!

[RupokMember]

Hi there,

Thanks for updating. If you want to change the transition then it would be possible through custom development which would be out of our support scope.

To change the color on hover and active, you can use :

.x-accordion-heading .x-accordion-toggle:hover::before, .x-accordion-heading .x-accordion-toggle:active::before {
  color: #b7b7b7;
}

.x-accordion-heading .x-accordion-toggle:hover, .x-accordion-heading .x-accordion-toggle:active {
  color: #b7b7b7;
}

Note that you have several codes already for same classes that might creates conflict. When you add any custom code to your site, make sure you know what you are doing to avoid potential conflicts.

Hope this makes sense.

Cheers!

[bengiltrapParticipant]

Thank you, it didnt quite do what I wanted it to. I played around with the css and its pretty close to what I want.

How do I change the size of the icon?

I also want to change the hover and active color. How do I do this?

Thanks!

[ChristopherModerator]

Hi there,

Please add this :

li.x-nav-tabs-item:hover i {
    color: blue;
}
li.x-nav-tabs-item.active i {
    color: red;
}
li.x-nav-tabs-item i {
    font-size: 25px;
}

Hope it helps.

[enolahenderson19Participant]

this is what I am trying to do also is there away i can do this to my tabs http://index.com.au/

[ZeshanMember]

Hi there @enolahenderson19,

Thanks for writing in!

It’s not possible to insert the icons in the tabs title out of the box. However, it can be possible by using HTML in the tab item title. You can get the name of any icon from our demo (see: http://prntscr.com/5yz9h5) and then you can replace that name with user from the following HTML and prepend the code to your nav item (see: http://prntscr.com/aulf8i):

<i class='x-icon x-icon-user'></i>

If icons don’t show up, select Enable Legacy Font Classes option under Settings > Cornerstone in your WordPress dashboard (see: http://prntscr.com/8p64bp).

Note: it’s important that you use HTML with single quotes like in the above code. If you use double quotes, it will break the tab element and won’t show the icon and the title.

Thank you.

[enolahenderson19Participant]

Thanks so much for your reply I have another question the white arrow how do i get it to transition every time i click on a tab. Also how do i center the tabs and get the full name to show up right now it only shows up when i put a dash example small-car when i don’t put the dash only the first word shows up and the last thing how do i make the icons change color on hover they are png file. I used this code to get the icons to show up. .x-nav-tabs .x-nav-tabs-item.compact-suv a:before {
content:url(“http://hhpcleaning.com/wp-content/uploads/2016/04/home.png”);
width:180px;
height:72px;
display:block;
margin:0 auto;
}

thank you so much for your help

[ZeshanMember]

Hi there @enolahenderson19,

Thanks for writing back!

Can you provide us with your site URL so we can take a closer look to your setup?

As for the image color change, it’s not possible without changing the image itself. So what you can try is to use this CSS code that will change the image on hover:

item.compact-suv a:hover:before {
  content:url("YOUR_HOVER_IMAGE_URL");
  width:180px;
  height:72px;
  display:block;
  margin:0 auto;
}

Replace YOUR_HOVER_IMAGE_URL with your hover image URL.

Thank you!

[enolahenderson19Participant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for the updates. Instead of use this: item.cargo-truck a:hover:before, you can make use of this: .x-nav-tabs .x-nav-tabs-item.cargo-truck a:hover:before.

The update code should be this:

.x-nav-tabs .x-nav-tabs-item.regular-car a:hover:before {
    content: url("http://hhpcleaning.com/wp-content/uploads/2015/10/transport-2-1.png");
    width: 180px;
    height: 72px;
    display: block;
    margin: 0 auto;
}
.x-nav-tabs .x-nav-tabs-item.medium-size-car a:hover:before {
    content: url("http://hhpcleaning.com/wp-content/uploads/2015/10/transport-12-1.png");
    width: 180px;
    height: 72px;
    display: block;
    margin: 0 auto;
}
.x-nav-tabs .x-nav-tabs-item.compact-suv a:hover:before {
    content: url("http://hhpcleaning.com/wp-content/uploads/2015/10/transport-7-1.png");
    width: 180px;
    height: 72px;
    display: block;
    margin: 0 auto;
}
.x-nav-tabs .x-nav-tabs-item.medium-size-car a:hover:before {
    content: url("http://hhpcleaning.com/wp-content/uploads/2015/10/transport-14-1.png");
    width: 180px;
    height: 72px;
    display: block;
    margin: 0 auto;
}
.x-nav-tabs .x-nav-tabs-item.pickup-truck a:hover:before {
    content: url("http://hhpcleaning.com/wp-content/uploads/2015/10/transport-15-1.png");
    width: 180px;
    height: 72px;
    display: block;
    margin: 0 auto;
}
.x-nav-tabs .x-nav-tabs-item.cargo-truck a:hover:before {
    content: url("http://hhpcleaning.com/wp-content/uploads/2015/10/transport-18-1.png");
    width: 180px;
    height: 72px;
    display: block;
    margin: 0 auto;
}

Hope this helps.

[Author]

Posts