Search Our Knowledgebase

  • Joomla
  • Video
  • WordPress
Or ask a question in our official product support forum boards

S5 Box - Login and Register Setup

This tutorial will explain how to install and configure the S5 Box module.


This module allows for up to 10 different S5 Box's on one page all via 10 module positions. It is most commonly used for the login and register modules on our paid templates. Setup for the login and register modules is outlined below, as well as using this module for other areas.

Note - Many of our club products contain specific styling for our extensions. These styles cannot be transferred from one product to another; they are integrated into the design. The same extension is used on all installations, the themes themselves contain the styling overrides. If a particular theme does not include unique styling for a particular extension, then the default style is used.

Be sure to read the tooltips and other descriptions in the backend of this extension. There are a lot of tips and further information found in these areas.

1. Installation

The first thing you'll need to do is install the module. Once you have it downloaded it just follow the below tutorial if you need help installing the module into Joomla. Typically this module is published to a position very low on the template, such as "bottom_menu", the module itself is not visible on the page

http://www.shape5.com/documentation/Joomla/Getting-Started/How-To-Install-An-Extension-Into-Joomla

2. Next you will need to setup the options in the admin

Typically if you are just setting up this module to use the Login and Register links the default settings will work fine.

Below is a complete list of all the settings:

  1. Powered By - Here you can pick to power the module with javascript or CSS3 effects
  2. Effect Style - Pick what effect you would like the S5 Box to enter with. Typically this is set to "elastic".
  3. Effect Speed - If you have selected the CSS3 effect, how fast would you like the boxes to enter?
  4. Min Width - The boxes will never become smaller than the width set here.
  5. Widths - Each box has a width setting that you control.

3. Login and Register Modules

Many Shape5 templates have a built in are for the S5 Box module to display a Login and Register module. The login module is the default Joomla login module and there is nothing to install. The register module is our own S5 Register module.

  1. Install the S5 Box module. Make sure it is published to all pages under the Menu Assignments tab. We recommend publishing it to the "bottom_menu" position, or another position that is low on the template.
  2. Publish the default Joomla login module to the "login" module position. Download the S5 Register module and publish it to the "register" module position.
  3. In the template configuration enter the Login and Register text under the General tab. Note - in order to remove this text simply leave these fields blank and they will no longer show on the template.

4. Use With Other Positions

S5 Box works not only with the Login and Register positions, but you can use it with other modules as well. These steps will guide you through how to setup other modules in the S5 Box and setup their anchor points.

  1. Adding the S5 Box positions. This step is not necessary if you are using a Shape5 template:

    • Open up the templateDetails.xml file included with the template you are using.
    • Locate the positions area.
    • Start adding new positions s5_box1, s5_box2, s5_box3, etc all the way up to s5_box10.
  2. Adding the S5 Box classes:

    • The S5 Box class name of the corresponding position must be added to the link that will open the box. For example the following code will display a link that says Click Here and will open the S5 Box and display whatever module is published to the s5_box3 module position:

    • These classes can be added to any element, ie: divs, spans, etc., but the common use will be to add this into content with a link similar to the one shown in the picture above. To enter this link you must do so from the HTML edit screen on your content editor:

      Once you have clicked the HTML button the HTML code window will appear much like the first image.
    • You can continue adding these classes throughout your site just be sure to have published a module to the corresponding position or the box will not work correctly. So if you add the class s5box_two you will also have to publish a module to the s5_box2 position.
    • Module positions and their corresponding classes:

      s5_box1 = s5box_one
      s5_box2 = s5box_two
      s5_box3 = s5box_three
      s5_box4 = s5box_four
      s5_box5 = s5box_five
      s5_box6 = s5box_six
      s5_box7 = s5box_seven
      s5_box8 = s5box_eight
      s5_box9 = s5box_nine
      s5_box10 = s5box_ten
  3. Lastly, publish your modules to the S5 Box positions:

    • Now that you have added the s5 box positions just go to your site modules area and publish modules to those positions
    • Make sure that you have added a class to an HTML element as described above or the s5 box will have no activation button
    • Also make sure to publish the actual s5 box to a non s5 box position, perhaps publish it to the "debug" position or a similar one in your template.
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.