Adding Bootstrap features to the Responsive Skins

PRESSERO > *Pressero FAQs
The code needed can be found on their website: (Bootstrap Docs: http://getbootstrap.com/javascript/#tabs) that has several items that you can take advantage of (tabs, tooltips, popovers, accordions, etc...). 
 
Here is what Chris said to do for the tab feature: 
Paste the following code into any html area of a rich text editor.
  
<div>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>
  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>
</div>
 
Once I added the code I saw the spot to add the text for each tab. You will see above the three "..." for the content part of the code. Just replace the text you want to display in each tab replacing the ... and it will work. You need to do all of this in the html area of the text editor. 
 
For the Tab idea... a customer asked after I supplied it to them, how they can change the color of the tabs. Here is the code we provided to them: 
 
They would need to add the following to the head of their site and adjust the hex colors to their liking.
 
<style>
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    color: #555;
    background-color: #fff;
    border: 1px solid #ddd;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    color: #555;
    background-color: #fff;
    border: 1px solid #ddd;
}
.nav-tabs>li>a {
    border: 1px solid transparent;
    color: #337ab7;
}
</style>
Article ID: 663, , Modified: April 5, 2017 at 12:02 PM

Share this article

Print