Box

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.

Article Contents(click to jump to section)

Full width horizontal image
Simple vertical image
Simple horizontal image
Simple horizontal image small

Rotating vertical image
Simple vertical icon
Simple horizontal icon

Personal
Personal full width
Price
Image gallery

Full width horizontal image - Images

Image: Provide the path to the image that will be displayed inside the box
Title: The box's title
Text: Type in a text description
2 x buttons: 2 linkable buttons. 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_title8382" class="rstpl-box-full-horizontal-image">
    <div class="rstpl-box-image pull-left">
        <img src="https://cdn.rsjoomla.com/RSLens3331/templates/rslens/images/sampledata/images/100x100-4.jpg"
        alt="">
    </div>
    <h2 class="rstpl-box-title m-top-large">
        Enter the title
    </h2>
    <div class="rstpl-box-content rstpl-margin-large">
        <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="m-bot-large rstpl-box-buttons">
            <a href="http://www.rsjoomla.com/" class="btn btn-primary rstpl-box-button pull-left">Read more</a>
            <a href="http://www.rsjoomla.com/" class="btn btn-inverse rstpl-box-button pull-left">Read more</a>
        </div>
    </div>
</div>

Editing the items

Back to contents

Simple vertical image - Images

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="randomid8249" class="rstpl-box-vertical-image">
    <h3 class="rstpl-title">
        Enter the title
    </h3>
    <div class="rstpl-box-image">
        <img alt="Enter the title" src="https://cdn.rsjoomla.com/RSLens3331/templates/rslens/images/sampledata/images/300x300-8.jpg"
        width="100%">
    </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>
    <a href="http://www.rsjoomla.com/" class="btn btn-primary rstpl-box-button m-small">Read more</a>
</div>

Editing the items

Back to contents

Simple horizontal image - Images

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

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_title2423" class="rstpl-box-image-left m-bot-large">
    <div class="rstpl-box-image pull-left">
        <img src="https://cdn.rsjoomla.com/RSLens3331/templates/rslens/images/sampledata/images/100x100-5.jpg"
        alt="" width="80">
    </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>

Editing the items

Back to contents

Simple horizontal image small - Images

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

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_title1463" class="rstpl-box-image-left-small m-bot-small">
    <div class="rstpl-box-content rstpl-back-pattern">
        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-details rstpl-back-pattern">
        <div class="rstpl-box-image pull-left">
            <img src="https://cdn.rsjoomla.com/RSLens3331/templates/rslens/images/sampledata/images/75x75-1.jpg"
            width="100%">
            <div class="rstpl-over-image-pattern">
            </div>
        </div>
        <div class="rstpl-title-details pull-left">
            <h4 class="rstpl-box-title">
                Enter the title
            </h4>
            <div class="rstpl-box-subtitle">
                Enter the subtitle of this box
            </div>
        </div>
    </div>
    <div class="rstpl-absolute-graphic">
    </div>
</div>

Editing the items

Back to contents

Rotating vertical image - Images

Image: Provide the path to the image that will be displayed inside the box
Title: The box's title
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_title3494" class="rstpl-box-rotating-image rstpl-padding">
    <div class="img-circle rstpl-box-rotating-bottom-right">
        <img class="img-circle" alt="Event Photography" src="https://cdn.rsjoomla.com/RSLens3331/templates/rslens/images/sampledata/images/300x300-8.jpg"
        width="100%">
        <div class="rstpl-over-image-pattern img-circle">
        </div>
    </div>
    <h2 class="rstpl-box-title rstpl-m-padding">
        Enter the title
    </h2>
    <div class="rstpl-box-content m-large">
        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 btn-primary rstpl-box-button m-small" href="http://www.rsjoomla.com/">Read more</a>
</div>

Editing the items

Back to contents

Simple vertical icon - Icons

Icon: Provide the path to an icon that will be displayed inside the box
Title: The box's title
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_title1259" class="rstpl-box-vertical-icon rstpl-padding">
    <div class="rstpl-box-icon">
        <span class="icon-bubbles2">
        </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 href="http://www.rsjoomla.com/" class="btn btn-primary rstpl-box-button">Read more</a>
</div>

Editing the items

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
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_title9012" class="rstpl-box-horizontal-icon-left m-top-large">
    <div class="rstpl-box-icon pull-left rstpl-back-pattern">
        <span class="icon-embed pull-left">
        </span>
    </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>

Editing the items

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: This will be displayed below the box's title
Text: Type in a text description
4 x Social links: Four (4) pre-defined buttons with icons defaulted for Facebook, Twitter, Google Plus and LinkedIn. They are fully configurable, you can set up any links on them and choose from 450 icons. You can also set up their 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_title9257" class="rstpl-box-personal m-bot-large">
    <div class="rstpl-box-image b-color-dark rstpl-pos-relative">
        <img alt="Enter the title" src="https://cdn.rsjoomla.com/RSLens3331/templates/rslens/images/sampledata/images/300x300-6.jpg"
        width="100%">
        <div class="rstpl-over-image-pattern">
        </div>
    </div>
    <div class="rstpl-box-content rstpl-padding rstpl-back-pattern">
        <h3 class="rstpl-box-title">
            Enter the title
        </h3>
        <span class="rstpl-box-subtitle m-bot-small">
            Enter the subtitle of this box
        </span>
        <div class="rstpl-box-innertext">
            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-social m-top-small">
            <a title="" href="http://www.facebook.com/" class="icon-facebook pull-left"></a>
            <a title="" href="http://www.twitter.com/" class="icon-twitter pull-left"></a>
            <a title="" href="https://plus.google.com/" class="icon-google-plus pull-left"></a>
            <a title="" href="http://www.linkedin.com/" class="icon-linkedin pull-left"></a>
            <a title="" href="http://www.example.com/" class="icon-plus pull-right"></a>
        </div>
    </div>
</div>

Editing the items

Back to contents

Personal full width - Specials

Title: The box's title
Text: Type in a text description
Icon Button:v
2 x Images: 2 images that will be displayed inside the box. You can provide the path to them and set up their alt attribute.
4 x Social Links: Four (4) pre-defined buttons with icons defaulted for Facebook, Twitter, Google Plus and LinkedIn. They are fully configurable, you can set up any links on them and choose from 450 icons. You can also set up their 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="randomid1557" class="rstpl-box-full-personal m-bot-small rstpl-back-pattern">
    <div class="row-fluid rstpl-back-pattern">
        <div class="span4 rstpl-box-content">
            <h3 class="rstpl-title">
                Enter the title
            </h3>
            <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>
            <a class="btn btn-link rstpl-box-button" href="http://www.rsjoomla.com/"><i class="icon-bubbles pull-left"></i> view all albums</a>
            <div class="rstpl-box-social">
                <a title="" href="http://www.facebook.com/" class="icon-facebook"></a>
                <a title="" href="http://www.twitter.com/" class="icon-twitter"></a>
                <a title="" href="https://plus.google.com/" class="icon-google-plus"></a>
                <a title="" href="http://www.linkedin.com/" class="icon-linkedin"></a>
                <a title="" href="http://www.example.com/" class="icon-plus"></a>
            </div>
        </div>
        <div class="span8">
            <div class="rstpl-box-image rstpl-half-width">
                <img alt="Enter the title" src="https://cdn.rsjoomla.com/RSLens3331/templates/rslens/images/sampledata/images/300x300-7.jpg"
                width="100%">
                <div class="rstpl-over-image-pattern">
                </div>
            </div>
            <div class="rstpl-box-image rstpl-half-width">
                <img alt="Enter the title" src="https://cdn.rsjoomla.com/RSLens3331/templates/rslens/images/sampledata/images/300x300-6.jpg"
                width="100%">
                <div class="rstpl-over-image-pattern">
                </div>
            </div>
        </div>
    </div>
</div>

Editing the items

Back to contents

Price - Specials

Title: The box's title
Price: Set up a price for the showcased product
Text: Type in a text description
5 x Feature: Specify 5 features of the showcased product
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_title3330" class="rstpl-box-pricing m-bot-small ">
    <h3 class="rstpl-box-title rstpl-back-pattern">
        Enter the title
    </h3>
    <div class="rstpl-box-content">
        <div class="rstpl-box-pricingtag-container img-circle">
            <span class="rstpl-box-pricingtag">
                19
                <sup>
                    .99 €
                </sup>
            </span>
        </div>
        <div class="rstpl-box-pricing-details">
            <div class="rstpl-box-pricing-text">
                This is sample content. In order to change this text please type in the
                text box the content you wish to be displayed.
            </div>
            <table class="table table-striped center">
                <tbody>
                    <tr class="rs-even">
                        <td>
                            Feature 1
                        </td>
                    </tr>
                    <tr class="rs-odd">
                        <td>
                            Feature 2
                        </td>
                    </tr>
                    <tr class="rs-even">
                        <td>
                            Feature 3
                        </td>
                    </tr>
                    <tr class="rs-odd">
                        <td>
                            Feature 4
                        </td>
                    </tr>
                    <tr class="rs-even">
                        <td>
                            Feature 5
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="rstpl-box-pricing-button">
                <a class="btn btn-inverse" href="http://www.rsjoomla.com/">Buy Now</a>
            </div>
        </div>
    </div>
</div>

Editing the items

Back to contents

Image gallery - Specials

Icon Button: A button that will be used in conjunction with a provided image. You can set up its label, link, title and target (self / blank / parent / top).
Image: Provide the path to the image that will be displayed inside the box, in conjunciton with the button described above
Container: By default, there are 8 image/button containers available for configuration. You are given the option to remove / restore any of them, to do so right-click on the container and choose Remove. To restore them, right-click in an empty space inside the box, hover over Restore and choose the container to have restored.

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="randomid8299" class="rstpl-image-gallery">
    <div class="rstpl-image-inner-row">
        <div class="rstpl-box-image">
            <div class="rstpl-box-actual-image">
                <img src="https://cdn.rsjoomla.com/RSLens3331/templates/rslens/images/sampledata/images/300x300-1.jpg">
                <div class="rstpl-over-image-pattern">
                </div>
            </div>
            <div class="rstpl-box-description-container">
                <div class="rstpl-box-relative-container rstpl-back-pattern">
                    <a href="#" class="rstpl-box-description">Read more<br><br><i class="icon-eye2"></i></a>
                </div>
            </div>
        </div>
        <div class="rstpl-box-image">
            <div class="rstpl-box-actual-image">
                <img src="https://cdn.rsjoomla.com/RSLens3331/templates/rslens/images/sampledata/images/300x300-2.jpg">
                <div class="rstpl-over-image-pattern">
                </div>
            </div>
            <div class="rstpl-box-description-container">
                <div class="rstpl-box-relative-container rstpl-back-pattern">
                    <a href="#" class="rstpl-box-description">Read more<br><br><i class="icon-eye2"></i></a>
                </div>
            </div>
        </div>
        <div class="rstpl-box-image">
            <div class="rstpl-box-actual-image">
                <img src="https://cdn.rsjoomla.com/RSLens3331/templates/rslens/images/sampledata/images/300x300-3.jpg">
                <div class="rstpl-over-image-pattern">
                </div>
            </div>
            <div class="rstpl-box-description-container">
                <div class="rstpl-box-relative-container rstpl-back-pattern">
                    <a href="#" class="rstpl-box-description">Read more<br><br><i class="icon-eye2"></i></a>
                </div>
            </div>
        </div>
        <div class="rstpl-box-image">
            <div class="rstpl-box-actual-image">
                <img src="https://cdn.rsjoomla.com/RSLens3331/templates/rslens/images/sampledata/images/300x300-4.jpg">
                <div class="rstpl-over-image-pattern">
                </div>
            </div>
            <div class="rstpl-box-description-container">
                <div class="rstpl-box-relative-container rstpl-back-pattern">
                    <a href="#" class="rstpl-box-description">Read more<br><br><i class="icon-eye2"></i></a>
                </div>
            </div>
        </div>
    </div>
    <div class="rstpl-clear">
    </div>
    <div class="rstpl-image-inner-row">
        <div class="rstpl-box-image">
            <div class="rstpl-box-actual-image">
                <img src="https://cdn.rsjoomla.com/RSLens3331/templates/rslens/images/sampledata/images/300x300-5.jpg">
                <div class="rstpl-over-image-pattern">
                </div>
            </div>
            <div class="rstpl-box-description-container">
                <div class="rstpl-box-relative-container rstpl-back-pattern">
                    <a href="#" class="rstpl-box-description">Read more<br><br><i class="icon-eye2"></i></a>
                </div>
            </div>
        </div>
        <div class="rstpl-box-image">
            <div class="rstpl-box-actual-image">
                <img src="https://cdn.rsjoomla.com/RSLens3331/templates/rslens/images/sampledata/images/300x300-6.jpg">
                <div class="rstpl-over-image-pattern">
                </div>
            </div>
            <div class="rstpl-box-description-container">
                <div class="rstpl-box-relative-container rstpl-back-pattern">
                    <a href="#" class="rstpl-box-description">Read more<br><br><i class="icon-eye2"></i></a>
                </div>
            </div>
        </div>
        <div class="rstpl-box-image">
            <div class="rstpl-box-actual-image">
                <img src="https://cdn.rsjoomla.com/RSLens3331/templates/rslens/images/sampledata/images/300x300-7.jpg">
                <div class="rstpl-over-image-pattern">
                </div>
            </div>
            <div class="rstpl-box-description-container">
                <div class="rstpl-box-relative-container rstpl-back-pattern">
                    <a href="#" class="rstpl-box-description">Read more<br><br><i class="icon-eye2"></i></a>
                </div>
            </div>
        </div>
        <div class="rstpl-box-image">
            <div class="rstpl-box-actual-image">
                <img src="https://cdn.rsjoomla.com/RSLens3331/templates/rslens/images/sampledata/images/300x300-8.jpg">
                <div class="rstpl-over-image-pattern">
                </div>
            </div>
            <div class="rstpl-box-description-container">
                <div class="rstpl-box-relative-container rstpl-back-pattern">
                    <a href="#" class="rstpl-box-description">Read more<br><br><i class="icon-eye2"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>

Editing the items

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 Text:

Editing an Image:

Editing a Button:

Note: Although we've only illustrated how editing the items is done for the Full width horizontal image container, the very same process is applicable for the rest of the box types as well.

2 persons found this article helpful.

Was this article helpful?

Yes No

You Should Also Read

Carousel
Accordion
Tabs
Adding Shortcodes within Bootstrap Grid System

Search In:

Ordering:

Our Latest Template

RSVario!

Join The Template Club

Free Downloads

Paid Downloads

General FAQ

Documentation

Home / Support / Documentation / RSLens! / Shortcodes / Box

Box

Article Contents(click to jump to section)

Full width horizontal image - Images

Shortcode:

Simple vertical image - Images

Shortcode:

Simple horizontal image - Images

Shortcode:

Simple horizontal image small - Images

Shortcode:

Rotating vertical image - Images

Shortcode:

Simple vertical icon - Icons

Shortcode:

Simple horizontal icon - Icons

Shortcode:

Personal - Specials

Shortcode:

Personal full width - Specials

Shortcode:

Price - Specials

Shortcode:

Image gallery - Specials

Shortcode:

How to edit the items

Editing a Title:

Editing a Box Text:

Editing an Image:

Editing a Button:

Was this article helpful?

Sorry about that

You Should Also Read

Carousel

Accordion

Tabs

Adding Shortcodes within Bootstrap Grid System

Connect With Us

RSJoomla! in your language:

Demo

Partners

Support

Our Policies