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.

[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

[5high-photohub]

Hi Radu,

OK, the url is https://www.the-photohub.co.nz/hub-guide/ BUT it now needs to be in maintenance mode as we’re just over a week to launch. So please email me your IP address so I can whitelist it. I’ll confirm when I’ve done this.

Thank you for helping to pinpoint the css selectors for me – much appreciated. What I’m trying to control/change is:

1. how to change the length of the tab, as at present it’s really long and the tabbed page is too narrow. I’d like it to be much more like your tabbed page in the wp admin as per my 1st screenshot (and responsive of course!)
2. border colours
3. border width
4. tab colours
5. active tab colour
6. and lastly how to arrange the tabs into ‘sub tabs’ (if possible), like in your theme options > styling options section.

Many thanks – as I said I’ll whitelist your zip as soon as you send it.

Jenny

[Radu]

Hello,

I have dynamic IP, it is changing at every router restart.

I think the solution is to create a user for me.

Cheers

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

[5high-photohub]

Hi Radu,

Yup – already set one up…

url = https://www.the-photohub.co.nz/wp-login.php
username: seventhQ
p/word: x6PeR%wqQGxNRGB

This gives you full admin access.

You may need to add your IP to the whitelist in Bullet Proof Security. In case you’re not familiar with BPS: Go to BPS Pro > Maintenance Mode > MMode Option Settings (in the MM page) > Maintenance Mode IP Address Whitelist Text Box: and enter the first ‘Recommended IP Address:’ it shows after the one that’s already there.

If this really won’t work for you then turn off MM so you can see the frontend, but please turn it back on straight after, as we’ve now publicised our website to some customers – plus we’re in NZ so I won’t get your email for about another 8 hours!

many thanks for your help with this,

Jenny

[Radu]

Hello,

I just added default accordion am looks good like in demo with borders

Take a look here : https://www.the-photohub.co.nz/accordion-example/

It looks ok

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

[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

[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

[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

[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