how to style tabs in Tour section?

[5high-photohub]

Hi,

I’m sure this is a really basic question, but i can’t see it for looking!

I’ve inserted a vertical tabbed ‘tour’ element via VC into a page and would like to add style elements to it, just like the Kleo Theme Options are laid out in the wp-admin section (or similar). But I can’t find where to do this! So what I’d like to do is:

I want to add borders to the tabbed elements
and colours to the tabs
and sit a few tabs grouped under one tab (like your Style Options section)

I can’t even find where to add a border to define the tabs, or how to control how wide the tabs are in comparison to the tabbed content, so my tabs are really long and the content is pushed to the right! Where do I control this styling from?

I’ve attached a screenshot of yours and mine for comparison!

many thanks.

Attachments:

You must be logged in to view attached files.

[Radu]

Hello,

In Kleo Styling Options is not exist section to customize tabbed content, this are styled from theme core css.

Please provide me URL of that page , i will give you a CSS Fix for borders

Sorry for inconvenience

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[5high-photohub]

This reply has been set as private.

[Radu]

This reply has been set as private.

[5high-photohub]

This reply has been set as private.

[Radu]

This reply has been set as private.

[5high-photohub]

Hi Radu,
Thanks for that – but i was after the vertical tabs section styling; the ‘Tour’ vertical tabbed content in VC. Like in your Theme Options that shows in wp-admin area (see my first screenshot).
Any help appreciated!
Cheers.

[Radu]

Hello,

The “problem” was caused by having background section like as tab hover and active color.

I used this fix

COPY CODE

.wpb_tour .nav-tab li:hover, .wpb_tour .nav-tab li.active {
	
	background-color: #eee !important;	

} 

Now it’s ok.

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[5high-photohub]

Thanks Radu,

I’ve had a look at it to find the selectors for styling the borders for the tabs and the ‘pages’ beside them, which i thought would be easy with having your selectors as a guide as to what to look for, but I’m stuck! Just can’t track them down!

Could you give me the list of selectors i need to style these things on the tabbed tour? –

1. how to change the width of the tab, as at present it’s really wide compared to the content part beside it (So I’d like the tab shorter, so the page bit beside it is wider).
2. tab/page border colours
3. tab/page border width
4. tab colours
5. and lastly how to arrange the tabs into ‘sub tabs’ (if possible), like in your theme options > styling options section in wp-admin.

Even if you could show me where to find these styles in style.css would be great. Thanks.

Cheers,
J

[5high-photohub]

OK I’ve managed to track down some of it. These seem to work but can you just check my css below?

COPY CODE

/* Trial change colour of tab on hover in vertical tour tabbed content - SeventhQueen support */
.wpb_tour .nav-tab li:hover, .wpb_tour .nav-tab li.active {	
  background-color: #6ebad3 !important;
}
/* Trial change colour of tabs in vertical tour tabbed content and borders on tabs */
.wpb_tour .nav-tab {	
  background-color: #bde1f9 !important;
  border: solid 1px !important;
  border-color: #6ebad3 !important;
}
/* Trial change colour of border for tabbed contents in vertical tour tabbed content */
.wpb_tour .tab-content {
  border: solid 1px !important;
  border-color: #6ebad3 !important;
}

But the things I can’t find are:
#1. how to change the tab width, yet remain responsive
#5. how to group as sub=tabs

Any help would be great! Cheers.

[5high-photohub]

Hi again,
I’ve found the correct css for controlling the tab widths:

COPY CODE

.wpb_tour .nav-tab {
  width: 200px;}

but this of course doesn’t work for when it scaling to a smaller screen, likw it should. Can you give me an idea of how to do it so it’s narrower ina large screen, then reverts back to it’s default wider width in a smallerscreen -so it looks like a normal menu then?
So still after answers to #1 and #5 above!
Thanks.

[Radu]

Hello,

Try like this :

COPY CODE

.wpb_tour .nav-tab {
width: 200px;
}

@media (max-width: 600px) {
  .wpb_tour .nav-tab {
   width: 100% !important;
  }
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[5high-photohub]

Hi Radu,

Yup, that seems to do the trick.

Thanks again, J

[5high-photohub]

Hi again,

Can you please clarify how to style tabs as ‘sub-tabs’ – as per below Q…

5. and lastly how to arrange the tabs into ‘sub tabs’ (if possible), like in your Kleo theme options > ‘styling options’ section in wp-admin.

many thanks,

J

[Radu]

This module “Tour Vertical tabbed content”

Arrange content and works similar to theme options panel

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[5high-photohub]

Hi Radu,

Hope, can’t track it down. In the docs it say all style is in assets/css/app.css, and when I look in this I can only find stle for standard tour tabs – not the sub-tabs style.

If I use Firefox to locate your styling for Theme options in wp-admin for the Vertical tour tabs then I think I’m only seeing WP css as I can’t find any of these selectors in the kloe css:
.redux-sidebar .redux-group-menu li.active.hasSubSections a, .admin-color-sunrise .redux-sidebar .redux-group-menu li.activeChild.hasSubSections a

Any help appreciated.
Thanks.

[5high-photohub]

Actually don’t worry, I’ve designed it differently now -so all good.
Thanks for your help before.

[Author]

Posts