SuperJoom - SJ Sticky Any Module

Quick install guide

1. Log in to the Joomla administration back-end.

2. Select Extensions --> Install/Uninstall from the top menu.

3. In the panel Upload package file, click Browse and locate the installation package you have downloaded to your local computer.

4. Click the button Upload & Install.

5. Select Extensions -->Module Manager from the top menu and click SJ Sticky Any Module in the list.

6. Open the module and folow the setup.

Setup

Setup Sticky Any Module

1. Positioning:
Let's  set where we want to stick, i said here to sit at 0px distance from the right side of the screen and at 330px from the top.

2. Custom position:
This is the main feature that "Sticky any module" has and basically creates a custom module position that can be named whatever you want and saves'it for later use.
So let's create a position named "SJ_Sticky".

3. Setup appearance:
The appearance options are pretty straight forward, tho i will explain them a bit:

Starting position - let you choose if the module will start opened or closed.

Enable Flip Bar - the "Flip Bar" is a bar wich can be clicked to open the module. By enabling/disabling this bar various types of sticky stuff can be set, for instance for a banner that must be always visible this must be hidden (disabled), tho for a login module this comes in handy because we don't always need to be visible.

Flip bar text align - it's used to align the text from the bar

Flip bar background, and text color - gives a specific color to the bar and the text on it

Flip bar Height and Width - gives the size of the width and height of the bar in pixels

Flip bar icon - a set of icons are available to place on the bar near the text, aditional icons can be added by request

Flip bar position - The position of the flip bar depending on the positioning. For ex: if the module is positioned on the right side of the screen (Margin Right: 0) the "Vertical Left" option must be used, if is on the left (Margin Left: 0) then "Vertical Right" must be used, for Top and Bottom positioning the "Top" option.

Transitions - to spice things a bit a set of 10 effects are available for use. However depending of the module you want to stick some of them might work or might not work. The default one tho works for evrything.

4. CSS Options

Because of the verry large number of modules supported by our application a custom css has been added to maximise the flexibility.
Tho is not required, some knowledge of css can be handy here. 

The basic div we start here as holder, is named dinamically with id="sj_sticky_any_module_yourcustomposition". As illustrated bellow to add a custom transparent background to the position "SJ_Stycky" defined above we use

#sj_sticky_any_module_SJ_Sticky{background:rgba(0, 0, 0, 0.37);} .

In the same manner we have class="flip_yourcustomposition" for the flip bar and class="panel_yourcustomposition" for the interior.

5. Publishing

For publishing we look on the left side of the screen; I will show only the key options.

a. First we type a title.

b. We set a position. For this module any position can be used, depending on how manny pages you want to publish. For example to publish on all the website i will choose the "debug" position, because is a site wide position. Aswell positions from the left or right columns are visible on all pages.

c. We check to be published, on the status option.

d. Module Assignement - because i want to publish on all the pages will select "On all pages", for specific pages select accordingly

6. Save and exit.

After the settings are in place is time to select what module we want to stick at the place we just setup. It can be anything a facebook/twitter module, a video player, a banner you name it. How we gona do that? Follow me.

7. Stick your module

Once the "SJ Sticky Any Module" is set we have a custom position at disposal to place any module we want to stick in there. For ex. let's take a simple login module, navigate to it and click on.

On Module Login left hand part we have the basic options.

All we need to do is type manually the position "SJ_Sticky" or what position name have you defined on Pct. 2 above. Save this module aswell and all is set. Enjoy. :)

*In order to customize your module like the one in the demo, use the following options:

Version history

v1.0

• options to allow setting up position of sticky
• option to write any custom position
• multiple module support
• css option to add new css to customize your sticky

v1.1

• starting position(how your sticky should to be opened or closed on the start of your page)
• flip bar(option for show/hide toggle)
• text bar alignment
• bar text with color picker
• flip bar adjustments
• lots of icons for flip bar
• any text on your flip bar
• position your flip-bar
• 9 effects for your close open sticky

v1.2

v1.3

• flip-bar border radius 
• flip bar font-size 
• font-family 
• open/close on mouse hover 
• padding option between module and flip bar

v1.4

Support

For any problems regarding our products do not hesitate to contact us on our suport emails:  This email address is being protected from spambots. You need JavaScript enabled to view it. /  This email address is being protected from spambots. You need JavaScript enabled to view it.  or place your questions, comments and critics in the comment form below.

You should also make sure :

1. Joomla! is up to date and properly configured;
2. Your SuperJoom products are up to date;
3. The website is live and open to public (not localhost)

License
GNU General Public License