Jump to content
Sign in to follow this  
dna20com

tabs-left with pl_tabs

Recommended Posts

James B    436
James B

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]


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
mborslein    0
mborslein

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
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×