Tabs

The System-RSTemplate! plugin brings in some pre-defined, fully customizable stylized containers. It gets installed along with the template, and should be published automatically. If you are to experience any issues with this feature, first make sure to check that the plugin didn't get unpublished for whatever reason.

To access the Shortcodes feature, click on the Shortcodes RSTemplate! button found at the bottom side of the text editor that you are using (available for Joomla! Content articles, Custom HMTL modules, etc. ). This functionality is employed through the Button - RSTemplate! Shortcodes plugin which also gets installed along with the template and is published automatically. If the button does not show up in your editor, make sure that the plugin didn't get unpublished.

  • Shortcodes Editor Button

Tab Variations

  • Simple Tabs
  • Side Navigation Tabs

Simple Tabs

  • RSAlto! Simple Tabs

The Tab container can include an unlimited number of customizable tabs. Only a single tab's contents can be displayed at a given time.

  • Title: The tab container's title
  • Tab Header: The tab's header
  • Tab Text: Specify the text description that will be displayed inside the tab
  • Tab Image: Remove or change the image

HTML Code: 

<div id="enter_title3744" class="rstpl-tabs">
  <div class="rstpl-box-title-left m-bot">
    <h4>Enter title</h4>
  </div>
  <div class="rstpl-box-tabs">
    <ul class="nav nav-tabs" id="enter_title6989">
      <li class="active"><a class="rstpl-box-header" data-toggle="tab" href="#tab_header_18327">Tab Header 1</a></li>
      <li><a class="rstpl-box-header" data-toggle="tab" href="#tab_header_26792">Tab Header 2</a></li>
    </ul>
    <div class="tab-content rstpl-padding rstpl-border" id="tabsContent1033">
      <div id="tab_header_18327" class="tab-pane active">
        <div class="rstpl-box-image">
          <img alt="" src="/joomla3/templates/rsalto/images/sampledata/images/tabs-img1.jpg">
        </div>
        <div class="rstpl-box-title">Enter title</div>
        <div class="rstpl-box-content">This is sample content. In order to change this text please type in the text box the content you wish to be displayed.</div>
      </div>
      <div id="tab_header_26792" class="tab-pane">
        <div class="rstpl-box-image">
          <img alt="" src="/joomla3/templates/rsalto/images/sampledata/images/tabs-img1.jpg">
        </div>
        <div class="rstpl-box-title">Enter title</div>
        <div class="rstpl-box-content">This is sample content. In order to change this text please type in the text box the content you wish to be displayed.</div>
      </div>
    </div>
  </div>
</div>
<p class="rstpl-delimiter"></p>

How to edit the items

Each item can be edited by right-clicking on it and choosing Edit. The possibility to delete or add them is also available as seen in the following screenshot.

  • RSAlto! Simple Tabs

Side Navigation Tabs

The Side Navigation Tabs effect offers a customizable number of items, each displaying a different panel.

  • Title: The tab container's title
  • Button: The tab's header
  • Tab Header: Specify the tab's title
  • Tab Icon: Specify the tab's icon
  • Tab Text: Specify the text description that will be displayed inside the tab
  • Tab Button: Change the link or label of the button
  • RSAlto! Vertical Tab

HTML Code: 

<div id="randomid1177" class="rstpl-side-nav-tabs">
<div class="rstpl-box-title-center m-bot">
  <h4>Enter title</h4>
  <h6 class="rstpl-box-subtitle"><a href="http://templates.rsjoomla.com/rsalto">Read more</a></h6>
</div>
<div class="rstpl-box-tabs">
  <div class="span4 rstpl-wider">
    <ul class="nav nav-tabs" id="randomid7255">
      <li class="active"><a class="rstpl-box-header" data-toggle="tab" href="#tab_header_12975">Tab Header 1</a><span class="icon-camera-retro">&shy;</span></li>
      <li><a class="rstpl-box-header" data-toggle="tab" href="#tab_header_21960">Tab Header 2</a><span class="icon-plane">&shy;</span></li>
    </ul>
  </div>
  <div class="span8 rstpl-smaller">
    <div class="tab-content" id="tabsContent9498">
      <div id="tab_header_12975" class="tab-pane active">
        <h3 class="tab-box-title">Enter title</h3>
          <div class="tab-box-content">
            <p>This is sample content. In order to change this text please type in the text box the content you wish to be displayed.</p>
          </div>
        <a class="btn btn-primary" href="http://templates.rsjoomla.com/rsalto">Read More</a>
      </div>
      <div id="tab_header_21960" class="tab-pane">
        <h3 class="tab-box-title">Enter title</h3>
          <div class="tab-box-content">
            <p>This is sample content. In order to change this text please type in the text box the content you wish to be displayed.</p>
          </div>
        <a class="btn btn-primary" href="http://templates.rsjoomla.com/rsalto">Read More</a>
      </div>
    </div>
  </div>
</div>
</div>
<p class="rstpl-delimiter"></p>

How to edit the items

Each item can be edited by right-clicking on it and choosing Edit. The possibility to delete or add them is also available as seen in the following screenshot.

  • RSAlto! Vertical Tab

3 persons found this article helpful.

Was this article helpful?

Yes No
Sorry about that

You Should Also Read

Carousel

Accordion

Box

Adding Shortcodes within Bootstrap Grid System