Tour Tabs CSS – adjust padding/margins and colors

[islandcreative]

I am trying to style the Tour Tabs menu because by default, they are not behaving well. I can’t seem to find exactly where to change this. What I want to be able to change is as follows:

1. background colors of the tabs on both the current/active tab and the inactive.
2. hover background color
3. color/size of the text links, inactive, active, and hover modes.
4. all padding and/or margins on tour tabs (when I edit these, they knock the content area down below the tabs menu)
5. borders of the tour tab menu, & border of content area.

I know that’s a lot of questions, but it’s all related, I just want to have control over the styles, but am having no luck on this particular part. If you could point me to the chunk of CSS that manages this stuff so I can put it in my child CSS and customize it that would be helpful…

I’m using Swift Page Builder since it has been a more stable option than Visual Composer and I’m having more luck with the custom CSS. For the most part, though I like the Visual Composer tour tabs style, but I’ve chosen SPB because it allows certain layout options within the tour content area without crashing the page. I just updated to the latest version of WordPress (4.3) and Cardinal Theme (2.21). I’ve been managing to make do with what I’ve found in the forum for other topics, but can’t see anything to do with my question, so any help will be greatly appreciated. Thanks!

Attachments:

You must be logged in to view attached files.

[islandcreative]

I’m noticing that there is more of an issue if the containing row has the Wrap Type set to “Full Width Content” (see new screenshot below) – the tour tabs get cut off. The screenshot above was for “Standard Width Content”.

For now, I have made this edit in my custom CSS:

.spb_tour .nav-tabs{
	width: auto;
}

But I like the wrap feature that it has on the tour tabs by default, only that some words are too long to fit inside the tab (i.e. Accommodations on the previous screenshot). Making the font-size smaller is not really an option for me, since I don’t want the text to be smaller than it already is. Would there be a way to dynamically control the width by the longest single word size and still have the wrap function? Or will I just have to use px for the width and make sure it covers the tour tabs throughout the site?

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

Here is the CSS you requested, I have commented what controls what state and section for you:

/* Tab Background Color + Border Color + Font Size */
.spb_tour .nav-tabs li a {
    background-color: palegoldenrod!important;
    border-top: 2px solid palegoldenrod!important;
    font-size: 18px;
}

/* Hover Tab Background Color + Border Color + Font Size */
.spb_tour .nav-tabs li a:hover {
    background-color: green!important;
    border-top: 2px solid green!important;
    font-size: 18px;
}

/* Active Tab Background Color + Border Color + Font Size */
li.active a {
    background-color: red!important;
    border-top: 2px solid red!important;
    font-size: 18px;
}

/* Tab Contents Border */
.spb_tour .tab-content>.tab-pane {
    border: 1px solid grey;
}

Thanks,
David.