Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1600

    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!

    #35813

    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]

    #35814

    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.

    #35815

    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!

    #35816

    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;
    }

    you can fairly easily add the rounded effect to the sub pages.

    James

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Main page rounded, borderless tabs on other pages?’ is closed to new replies.