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


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

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

Be sure to read the tooltips and other descriptions in the backend of this plugin. 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 widget. Once you have it downloaded it just follow the below tutorial if you need help installing the widget into WordPress. Typically this widget is published to a position very low on the theme, such as "bottom_menu", the widget itself is not visible on the page

http://www.shape5.com/documentation/WordPress/Getting-Started/How-To-Install-A-Widget-Into-WordPress

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

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

First you'll need to click the "basic options" button and then you can configure the settings:


Below is a complete list of all the settings:

  1. Powered By - Here you can pick to power the widget 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 themes have a built in are for the S5 Box widget to display a Login and Register widget. The login widget is the default WordPress login widget and there is nothing to install. The register widget is our own S5 Register widget.

  1. Install the S5 Box widget. 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 theme.
  2. Publish the default WordPress login widget to the "login" widget position. Download the S5 Register widget and publish it to the "register" widget position.
  3. In the theme 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 theme.

4. Use With Other Positions

S5 Box works not only with the Login and Register positions, but you can use it with other widgets as well. These steps will guide you through how to setup other widgets 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 theme:

    • Open up the themeDetails.xml file included with the theme 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 widget is published to the s5_box3 widget 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 widget 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 widget 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 widgets to the S5 Box positions:

    • Now that you have added the s5 box positions just go to your site widgets area and publish widgets 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 theme.
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.