Archived

This topic is now archived and is closed to further replies.

  • 0

tabs-left with pl_tabs

Question

Posted · Report post

Hi, I'm using [pl_tabs] to create twitter bootstrap tabs and it's great! I'd like to create tabs with the labels on the left, the same way you can with bootstrap: (http://twitter.github.com/bootstrap/components.html#navs) with the "tabs-left" class. Is there a way to do this with the pagelines [pl_tabs] shortcode? Alan

Share this post


Link to post
Share on other sites

5 answers to this question

Posted · Report post

Hi there, I can't remember what the official answer was to be honest. I can't seem to replicate it using the shortcodes. However, all the bootstrap code is built into the framework so you can use the html from the bootstrap page to create the tabs on the left effect.

 

    <div class="tabbable tabs-left"> <!-- Only required for left/right tabs -->
    <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
    </ul>
    <div class="tab-content">
    <div class="tab-pane active" id="tab1">
    <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
    <p>Howdy, I'm in Section 2.</p>
    </div>
    </div>
    </div>

 

However you need to add the following css to Pagelines>site options>custom code to make the content nestle next to the tabs.

.tab-content {
    background: none repeat scroll 0 0 #FAFAFA;
    display: table;
    padding-top: 5px;
    width: 81%;
}

That gave me this result http://screencast.com/t/7JI0w3NjtR

Share this post


Link to post
Share on other sites

Posted · Report post

Ah, I'm with you now. Sorry I assumed you wanted the text aligned within the left of the tab, my apologies. I have been advised that since my previous message a member of our Developer team has contacted you directly to advise and assist :) If you require any further assistant, please let us know

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Alan, yes you can align the text with html inside the shortcodes like such

Tab1

So the for example the first tab's full code would look like:
[pl_tabs]
	[pl_tabtitlesection type="tabs"]
	[pl_tabtitle active="yes" number="1"]
	 

Tab1

[/pl_tabtitle][/code]

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

I am also wondering how to achieve this.

Could you please post the solution that worked for you?

Thanks in advance!

 

-M

Share this post


Link to post
Share on other sites