Main page rounded, borderless tabs on other pages? « Support Forum | Kriesi.at

Support Forum » Avisio

Main page rounded, borderless tabs on other pages?

5 posts from 4 voices

Started 2 years ago by elliottbryant
Latest reply from James Morrison
This topic is not resolved

Tags:

elliottbryant
Member

Hi,

Does anyone know if the rounded, border-less tabs on the main page can be used on other pages? Even if it's just a CSS change as I'm happy with the functionality of the square tabs you can use on other pages. Ideally I'd like to be able to use the square tab code on any page I like but with the rounded look and borderless format that is available on the main page. Also, if there was a way to have the tab buttons on the right side instead of the left that would be a bonus.

Any help would be greatly appreciated - thanks!

Posted 2 years ago #
emitremmus
Member

I think you can solve your problem by using the shortcodes for tabs.

This is from the documentation file:

Tabed Content Shortcodes
To create a tabbed content box you need to first use a wrapper shortcut and then a shortcut for each tab. One of the Tabs needs the keyword active"

[tab_container]

[tab title='Tab1' active]Tabcontent here[/tab]

[tab title='Tab2']Tabcontent here[/tab]

[tab title='Tab3']Tabcontent here[/tab]

[/tab_container]

Posted 2 years ago #
elliottbryant
Member

The tabbed content shortcode works well and I've implemented it on the pages I need. However, what I'm looking to achieve is the same rounded button style that is used on the main page tabs at the bottom. This would include the round button style and lack of border around the tabbed content.

Posted 2 years ago #
moliner
Member

Hi,

I have exactly the same question as elliottbryant,

emitremmus, unfortunately I am afraid you did not get the point. I can change any css easily, too, but since I am comfortable with the Shortcodes, specially for my customer's ease of use, It would be great to have an option to choose frontpage style for tabs on inner pages.

Any news about that would be greatly appreciated - thanks!

Posted 2 years ago #

James Morrison
Former Team Member

Hey,

To use the frontpage style tabs (rounded) on other pages is just a CSS change. Using FireBug you can see that the frontpage tabs CSS is:

.frontpagetabs .transformed_tab.fpactive_tab, .more-link { /*line 227 of style1.css */
background:url("../images/skin1/button.png") repeat-x scroll -37px -105px #FFFFFF;
border:1px solid #CCCCCC;
color:#777777;
text-shadow:1px 1px 1px #FFFFFF;
}

.frontpagetabs .transformed_tab, .more-link { /* line 671 of style.css */
-moz-border-radius:15px 15px 15px 15px;
cursor:pointer;
display:block;
float:left;
font-size:11px;
line-height:26px;
margin:0 5px 10px 0;
padding:0 13px;
position:relative;
top:-20px;
}

The CSS class for the subpages tabs is .tabcontainer .tab and adjusting the above CSS to add these classes like this:

.frontpagetabs .transformed_tab.fpactive_tab, .more-link, .tabcontainer .tab { /*line 227 of style1.css */
background:url("../images/skin1/button.png") repeat-x scroll -37px -105px #FFFFFF;
border:1px solid #CCCCCC;
color:#777777;
text-shadow:1px 1px 1px #FFFFFF;
}

.frontpagetabs .transformed_tab, .more-link, .tabcontainer .tab { /* line 671 of style.css */
-moz-border-radius:15px 15px 15px 15px;
cursor:pointer;
display:block;
float:left;
font-size:11px;
line-height:26px;
margin:0 5px 10px 0;
padding:0 13px;
position:relative;
top:-20px;
}