Hi!
My website is http://fog.lamachineavapeur.ca
I’m trying to achieve this effect:
Tabs
Different color for every title
Tabs separated in two
Background image covering the second column
bottom arrow on hover
Any idea how to achieve this? Maybe using something other than tab, maybe?
Thank you!
Hi @ArcaneE,
Yes, v2 tab element can be use. There is an option on that element to set colors per tab.
To add columns on tab content, please try to use columns shortcode.. You need CSS knowledge to complete this. For example to add background on that column, try using the class option. Add a class on the right column and then define the background using this class.
For bottom arrow you can use the icon shortcode. Then you can wrap via link tag if this is meant to be a button like this:
<a href="linkgoeshere" class="btn-class">icon shortcode here</a>
Use the class btn-class to hide it by default and just show it on hover like this:
.btn-class{
opacity:0;
}
.btn-class:hover{
opacity:1;
}
See this guide on hover.
Hope this helps.
Hi Lely,
Thank you for this.
As for the tab background, I was referring to the tab title. Any way to customize the background of each tab title?
Also, for the bottom arrow, it gets placed next to the title and not underneath. Any way to achieve this?
Thank you!
Nathalie
Hi Nathalie,
On TABS > CUSTOMIZE > ELEMENT CSS Try adding the following:
$el.x-tabs ul>li:first-of-type button {
background: red; /*first tab title background*/
}
$el.x-tabs ul>li:nth-child(2) button {
background: green; /*second tab title background*/
}
$el.x-tabs ul>li:nth-child(2) button {
background: green; /*third tab title background*/
}
$el.x-tabs ul>li:last-of-type button {
background: green; /*last tab title background*/
}
I am not exactly sure about this one, please make sure correct html is used. Make sure that there’s no excess ot missing tags. To help you better, please share the URL with issue so we can see. Thank you
Hi!
Thank you for the reply, it works like a charm!
As for the bottom arrow, i still can’t get it to work. I don’t want it to act as a button, but I do want to het the hover effect when scrolled on. Right now, it’s red, small and right below the title instead of overlapping the section like on the image. The hover does work! yeah! Any way to achieve this effect?
I will send you the login details through a secure note.
Thanks again! 
Hi @ArcaneE,
Credentials are not working. It says invalid username.
About the bottom arrow, I am sorry for the confusion, I have misunderstood it initially. I thought you just need a button. That is not available by default and can only be achieve using custom CSS that is outside the scope of our support. Though the following guide will help you:
HI Lely,
Thank you so much, this is exactly what I needed. THe CSS you provided with the class works like a charm.
One quick question: is there any way to make the z-index of the panel -1? The bottom arrow works really well, but it doesn’t go over the panel but under…I’m aware this is outside the scope of your help and I played around adding z-index to the class but I’m I’ve hit a wall…
Thanks again for your help and have a great day!
BTW - I have decided to use the Rev Slider in my panels, a little workaround that works! lol!
Bye!
Hello @ArcaneE,
Are you referring to this arrow?
If that is the case, please make use of this custom css
.x-tabs .x-tabs-list {
z-index: 999;
overflow-x: visible;
overflow-y: visible;
}
We would love to know if this has worked for you. Thank you.
Hi!
It worked! wouhou!
If anybody would like to achieve a similar result, here’s what I did:
I added this CSS to create a class and hover for the bottom arrow of my tabs:
.btn-class{
opacity:0;
}
.btn-class:hover{
opacity:1;
}
.hero1 {
position:relative;
background-color:#1d2731;
color: white;
height:0px !important;
width:100% !important;
opacity: 0;
}
.hero1:after {
content:’’;
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: solid 50px #1d2731;
border-left: solid 50px transparent;
border-right: solid 50px transparent;
z-index: 2;
}
.hero1: hover {
opacity: 1;
color: white;
}
and repeated for all my tabs (.hero2, .hero3, .hero4, etc.)
In Tabs - List, I have added this CSS to set individual background colors for my tabs:
$el.x-tabs ul>li:first-of-type button {
background:#1d2731;
}
$el.x-tabs ul>li:nth-child(2) button {
background: #1d2731;
}
$el.x-tabs ul>li:nth-child(3) button {
background: #0b3c5d;
}
$el.x-tabs ul>li:nth-child(4) button {
background: #328cc1;
}
$el.x-tabs ul>li:nth-child(5) button {
background: #52b6e8;
}
$el.x-tabs ul>li:nth-child(6) button {
background: #d9b310;
}
$el.x-tabs ul>li:last-of-type button {
background: #d9b310;
}
.x-tabs .x-tabs-list {
z-index: 999;
overflow-x: visible;
overflow-y: visible;
}
As for splitting my info in two colums, I simply used the content blocks and voilà!
Thank you for all the help and sticking with my, much appreciated!
Cased closed 
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.