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 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.

There are 3 types of boxes available for use, each having multiple styles to choose from: Icons, Images and Specials. In this article we will provide explanations for each of the styles, including information such as: the elements each style includes (titles, images, buttons, etc.), screenshots with their default appearance, shortcodes examples and how to edit each element.

Full width dark horizontal image Full width dark vertical images Simple horizontal image Simple vertical image

Full width horizontal icon Full width vertical icon left Full width vertical icon right

Simple vertical icon Simple horizontal icon Personal Price

Full width dark horizontal image - Images

• Select subset: No Background / Pattern Background / Color Background - choose what type of background to use with this box
• Image: Provide the path to the image that will be displayed inside the box
• Title: The box's title
• Main Text: Type in a text description
• Button: A linkable button. You can set up their label, link, title and target (self / blank / parent / top).

In the text area below you can find a code example for the box presented in this section. The image in the gallery to the right illustrates a preview of the result.

Shortcode:

<div id="enter_the_title8985" class="rstpl-box-full-dark-horizontal-image "> <div class="container"> <div class="row-fluid"> <div class="rstpl-box-image span4"> <a class="rstpl-shell-bg" href="http://www.rsjoomla.com/joomla-templates.html"><img class="rstpl-shell-shape" alt="" src="https://cdn.rsjoomla.com/RSFedra336/templates/rsfedra/images/sampledata/images/320x320-2.jpg"></a> </div> <div class="rstpl-box-content span8"> <h3 class="rstpl-box-title"> Enter the title </h3> <div> 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 class="rstpl-box-buttons"> <a class="btn btn-large" href="http://www.rsjoomla.com/joomla-templates.html/joomla-templates.html">Read More</a> </div> </div> </div> </div> </div>

Back to contents

Full width dark vertical images - Images

• Subtitle: Although we called it a Subtitle, this will actually be displayed above the box's title.
• Title: The box's title
• Image: Provide the path to the image that will be displayed inside the box
• Text: Type in a text description
• Button: A linkable button. You can set up its label, link, title and target (self / blank / parent / top).

In the text area below you can find a code example for the box presented in this section. The image in the gallery to the right illustrates a preview of the result.

Shortcode:

<div id="enter_the_title6688" class="rstpl-box-full-width-dark-vertical-images"> <div class="container"> <div class="row-fluid"> <div class="span12"> <span class="rstpl-box-subtitle"> Enter the subtitle of this box </span> <h3 class="rstpl-box-title"> Enter the title </h3> <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 class="rstpl-box-image-group"> <div class="rstpl-box-image-first"> <img alt="" class="rstpl-shell-shape" src="https://cdn.rsjoomla.com/RSFedra336/templates/rsfedra/images/sampledata/images/320x320-1.jpg"> </div> <div class="rstpl-box-image-second"> <img alt="" class="rstpl-shell-shape" src="https://cdn.rsjoomla.com/RSFedra336/templates/rsfedra/images/sampledata/images/320x320-2.jpg"> </div> <div class="rstpl-box-image-third"> <img alt="" class="rstpl-shell-shape" src="https://cdn.rsjoomla.com/RSFedra336/templates/rsfedra/images/sampledata/images/320x320-3.jpg"> </div> </div> </div> </div> </div> <div class="rstpl-box-bg" style="background-image:url(https://cdn.rsjoomla.com/RSFedra336/templates/rsfedra/images/sampledata/images/bg-full-width.jpg)"> </div> </div>

Back to contents

Simple horizontal image - Images

• Title: The box's title
• Image: Provide the path to the image that will be displayed inside the box
• Main Text: Type in a text description

In the text area below you can find a code example for the box presented in this section. The image in the gallery to the right illustrates a preview of the result.

Shortcode:

<div id="enter_the_title5752" class="rstpl-box-image-left m-bot-small"> <div class="rstpl-box-image pull-left"> <img alt="" src="https://cdn.rsjoomla.com/RSFedra336/templates/rsfedra/images/sampledata/images/180x180-2.jpg" width="100"> </div> <h5 class="rstpl-box-title m-bot-small"> Enter the title </h5> <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>

Back to contents

Simple vertical image - Images

• Image / Link: Provide the path to the image that will be displayed inside the box. You can also set up a link that will redirect the user to the provided URL
• Title: The box's title
• Main Text: Type in a text description

In the text area below you can find a code example for the box presented in this section. The image in the gallery to the right illustrates a preview of the result.

Shortcode:

<div id="enter_the_title4407" class="rstpl-box-vertical-image"> <div class="rstpl-box-image"> <a href="http://www.rsjoomla.com/joomla-templates.html"><img src="https://cdn.rsjoomla.com/RSFedra336/templates/rsfedra/images/sampledata/images/320x320-7.jpg"><div class="rstpl-shell-shape"></div></a> </div> <h4 class="rstpl-box-title"> Enter the title </h4> <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>

Back to contents

Full width horizontal icon - Images

• Image: Provide the path to the image that will be displayed inside the box
• Title: The box's title
• Main Text: Type in a text description
• Button: A linkable button. You can set up its label, link, title and target (self / blank / parent / top).

In the text area below you can find a code example for the box presented in this section. The image in the gallery to the right illustrates a preview of the result.

Shortcode:

<div id="enter_the_title4192" class="rstpl-box-full-width-horizontal-icon bg-primary"> <div class="container"> <div class="row-fluid"> <div class="span1"> <span class="icon-headphones"> </span> </div> <div class="span8"> <h3 class="rstpl-box-title"> Enter the title </h3> <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 class="span3"> <a class="btn btn-large btn-danger rstpl-box-button">Read more</a> </div> </div> </div> </div>

Back to contents

Full width vertical icon left - Icons

• Select subset: No Background / Primary Color Background / Secondary Color Background - choose what type of background to use with this box
• Icon: Provide the path to an icon that will be displayed inside the box
• Title: The box's title
• Main Text: Type in a text description
• Button: A linkable button. You can set up its label, link, title and target (self / blank / parent / top).

In the text area below you can find a code example for the box presented in this section. The image in the gallery to the right illustrates a preview of the result.

Shortcode:

<div id="enter_the_title3361" class="rstpl-box-full-width-vertical-icon "> <div class="container"> <div class="row-fluid"> <div class="span4"> <span class="icon-compass"> </span> </div> <div class="span8"> <h4 class="rstpl-box-title"> Enter the title </h4> <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> <a class="btn " href="http://www.rsjoomla.com/joomla-templates.html/joomla-templates.html">find out more</a> </div> </div> </div> </div>

Back to contents

Full width vertical icon right - Icons

• Select subset: No Background / Primary Color Background / Secondary Color Background - choose what type of background to use with this box
• Icon: Provide the path to an icon that will be displayed inside the box
• Title: The box's title
• Main Text: Type in a text description
• Button: A linkable button. You can set up its label, link, title and target (self / blank / parent / top).

In the text area below you can find a code example for the box presented in this section. The image in the gallery to the right illustrates a preview of the result.

Shortcode:

<div id="enter_the_title3324" class="rstpl-box-full-width-vertical-icon "> <div class="container"> <div class="row-fluid"> <div class="span8"> <h4 class="rstpl-box-title"> Enter the title </h4> <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> <a class="btn " href="http://www.rsjoomla.com/joomla-templates.html/joomla-templates.html">find out more</a> </div> <div class="span4"> <span class="icon-compass pull-right"> </span> </div> </div> </div> </div>

Back to contents

Simple vertical icon - Icons

• Select subset: Background Shell / Icon Shell - choose what type of background to use with this box
• Icon: Provide the path to an icon that will be displayed inside the box
• Title: The box's title
• Main Text: Type in a text description
• Button: A linkable button. You can set up its label, link, title and target (self / blank / parent / top).

In the text area below you can find a code example for the box presented in this section. The image in the gallery to the right illustrates a preview of the result.

Shortcode:

<div id="enter_the_title2068" class="rstpl-box-vertical-icon "> <div class="rstpl-box-icon"> <span class="icon-camera"> </span> </div> <h2 class="rstpl-box-title"> Enter the title </h2> <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> <a class="btn rstpl-box-button">Read more</a> </div>

Back to contents

Simple horizontal icon - Icons

• Icon: Provide the path to an icon that will be displayed inside the box
• Title: The box's title
• Main Text: Type in a text description

In the text area below you can find a code example for the box presented in this section. The image in the gallery to the right illustrates a preview of the result.

Shortcode:

<div id="enter_the_title7866" class="rstpl-box-horizontal-icon-left m-bot-small"> <div class="row-fluid"> <span class="icon-leaf span4"> </span> <div class="span8"> <h4 class="rstpl-box-title"> Enter the title </h4> <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>

Back to contents

Personal - Specials

• Image: Provide the path to the image that will be displayed inside the box
• Title: The box's title
• Subtitle: The box's subtitle (displayed directly beneath its title).
• Main Text: Type in a text description
• 3 x Social Buttons: 3 fully configurable buttons (link, title, target, icon) meant for linking to a person's profiles on social networks
• Button: A linkable button. You can set up its label, link, title and target (self / blank / parent / top).

In the text area below you can find a code example for the box presented in this section. The image in the gallery to the right illustrates a preview of the result.

Shortcode:

<div id="enter_the_title3841" class="rstpl-box-personal"> <div class="rstpl-box-image"> <a class="rstpl-shell-bg" href="http://www.rsjoomla.com/joomla-templates.html"><img class="rstpl-shell-shape" src="https://cdn.rsjoomla.com/RSFedra336/templates/rsfedra/images/sampledata/images/180x180-1.jpg" alt="Enter the title"></a> </div> <div class="rstpl-box-content"> <h4 class="rstpl-box-title"> Enter the title </h4> <span class="rstpl-box-subtitle"> Enter the subtitle of this box </span> <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 class="rstpl-box-social"> <a href="http://www.facebook.com/" class="icon-facebook"> </a> <a href="http://www.twitter.com/" class="icon-twitter"> </a> <a href="https://www.linkedin.com/" class="icon-linkedin"> </a> </div> </div> </div>

Back to contents

Price - Specials

• Select subset: Normal / Highlighted - choose what type of background to use with this box
• Price: Specify a price for the showcased product.
• Title: The box's title
• Main Text: Type in a text description
• 5 x Features: Specify 5 features (or less) for the showcased product

In the text area below you can find a code example for the box presented in this section. The image in the gallery to the right illustrates a preview of the result.

Shortcode:

<div id="enter_the_title7100" class="rstpl-box-pricing "> <div class="rstpl-box-pricetag-container"> <span class="rstpl-box-pricetag"> 79 ^.99€ </span> </div> <div class="rstpl-box-head"> <h3 class="rstpl-box-title"> Enter the title </h3> <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> <table class="table table-striped center"> <tbody> <tr> <td> Feature 1 </td> </tr> <tr> <td> Feature 2 </td> </tr> <tr> <td> Feature 3 </td> </tr> <tr> <td> Feature 4 </td> </tr> <tr> <td> Feature 5 </td> </tr> <tr> <td> <a class="btn btn-large " href="http://www.rsjoomla.com/joomla-templates.html/joomla-templates.html">Buy Now</a> </td> </tr> </tbody> </table> </div>

Back to contents

How to edit the items

Each item can be edited by right-clicking on it and choosing Edit. The possibility to delete them is also available, by clicking on Remove.

Editing a Title:

Editing a Box's Main Text:

Editing an Image:

Editing a Button:

Back To Top

You Should Also Read

Accordion

Tabs

Carousel

Adding Shortcodes within Bootstrap Grid System