Tabs Section/ Tour Section

[Dataminds]

Hi There,

I’ve purchased your theme a couple of weeks ago. I really like it. I’m making an onepage and i’m trying to reduce text. So I am opting for ‘Tour Section’ or a ‘Tabs section’, however.

Tour Section doesn’t display quite right. I named a tab ‘Clientsegmentation’ but is doesn’t fit in the left box and an arrow is also display through the text. And I want to change the background colour without using a colomn (and set colorbackground). It doesnt look very nice that way

Tabs section: it’s looking good, but I want to change the background color. I’ve got a light grey picture a background, so it’s hard to read the text. Also, I want to do this without adding a colomn (cause it overlaps the Tabs section).

Can you help me out?

Thanks in Advance!

Wkr, Datamind 1

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

What is the URL?

Thanks.

[Dataminds]

This reply has been marked as private.

[David Martin – Support]

1) Please add this CSS:

.bright-design .spb_tour .nav-tabs {
    width: 220px;
}

.bright-design .spb_tour .tab-content {
    padding-left: 250px;
}

2) To change the tab background color, please use this CSS and replace the color hex with your own.

.tab-content {
    background-color: #cccccc;
    padding: 15px 0 0;
}

Thanks.

[Dataminds]

Hi There,

Thanks, but it is not really as nice if I like it to be.

1. The tabs (the ones that are not selected) are transparant and text is grey, so you can’t read it cause of the grey background. Is it possible to make the tabheader text red?

2. The text within the tab is readable, however it’s to close to the left. I think it need padding?

3. Is it possible to give the tab box (with explanation) a colored line?

Hope you can help me out.

Thanks in advance!

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

Please use this:

.tab-content {
    background-color: #f7f7f7;
    padding: 15px;
}

.spb_tabs .ui-tabs .ui-tabs-panel, 
.spb_content_element .ui-tabs .ui-tabs-nav, 
.ui-tabs .ui-tabs-nav li, 
.spb_tabs .nav-tabs li a {
    color: red;
}

3) Where do you want the line? Please add a screenshot.

Thanks.

[Dataminds]

Hi,

See screenshot..

Off topic. I include my Css. On mobile the headers are to big and not aligned. Can you help me out? Or do I need to open a new topic?

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

For the red border, please use:

.tab-content {
    border: 2px red solid;
}

Regarding the mobile issue, I can help you here. Are you viewing on iPad or iPhone. Please add a screenshot illustration of what you are looking to change.

Thanks.

[Dataminds]

Thanks,

Can I change the color in #bb1111? Colored line and tabheader text?

.spb_tabs .ui-tabs .ui-tabs-panel,
.spb_content_element .ui-tabs .ui-tabs-nav,
.ui-tabs .ui-tabs-nav li,
.spb_tabs .nav-tabs li a {
color: red;
}

.tab-content {
border: 2px red solid;
}

It’s on the IPhone. On iPad I haven’t tested it.

Attachments:

You must be logged in to view attached files.

[Dataminds]

Hi,

The tabs alignment on iPhone isn’t quite right. I attached the screenshot.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Due to the size off the tabs, they will need to be 1 per line on iPhone size.

Please test this for the iPhone:

@media only screen and (max-width: 479px) {
.nav-tabs > li {
    width: 100%;
}
.spb_tabs .nav-tabs li a {
    border-left-width: 1px!important;
}
}

Thanks.

[Dataminds]

Hi David,

It works a bit. Lines of the tab boxes are oke, but the text isn’t quite right.

It’s not 1 per line though. So could you have a look?

Besides that, I tried different CSS for mobile text, but it isn’t resizing.

Hope to hear from you.

Thanks!

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

@media only screen and (max-width: 479px) {
.spb_tabs .nav-tabs li a {
    font-size: 8px !important;
}
}

Thanks
Mohammad

[Dataminds]

Hi Mohammed,

It worked! The only thing now is that the font size (h1/ h2) of the one page isn’t neetly responsive as mentioned before.

Can you help me out?

Thanks!

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

Is that on the same page, I no longer see that?

Thanks.