RedSLIDER

From redWIKI
Revision as of 12:16, 20 November 2014 by JavierG (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Contents

About redSLIDER

redSLIDER is a Joomla extension for creating continuous horizontal scroller of images and videos in a module

250

Install redslider

To install redSLIDER2 in your Joomla! site follow the following steps:

000-redslider-extensionsmanager.png
001-redslider-install.png

If is your first time using redSLIDER we encourage you to install the Demo Data:

002-redslider-demo data.png

Firsts Steps

The first screen of redSLIDER is the Dashboard, from there you are able to go to any place in redSLIDER component

003-redslider-dashboard.png

For using redSLIDER you will need to learn about the three main concepts: galleries, slides and templates.

A Gallery is a container of slides. The Galleries can be loaded by the Joomla Modules and placed anywhere in your website.

004-redslider-galleries.png

Slides are each of the images or videos that you want to show in a Gallery

005-redslider-slides.png

The Templates are the entity in redSLIDER that takes care about how you distribute the content of a slide

006-redslider-templates.png

Using the installed demo data you can easily see redSLIDER in action in your website with just a few steps. First go to the Joomla Module Manager:

007-redslider-module.png

Click on the redSLIDER module:

008-redslider-module2.png

Once into the Module configuration select the Sample Gallery provided with the redSLIDER package:

010-redslider-module4.png

In the right side of the screen select a position in the template (if your are using the default template of Joomla 3 called Protostar, select the "Banner" position)

009-redslider-module3.png

Right behind the position you will find the publish/unpublish selector. Please make sure you publish the module:

011-redslider-module5.png

Finally, go to the Menu Assignment tab and select the option on all pages

012-redslider-module6.png

Now go to your website, you should be able to see redSLIDER in action:

013-redslider-module7.png

Customization for advanced users and designers

redSLIDER has been created to be overrided and customized. If you are skilled with CSS you will be able to modify the Colors and Structure of the redSLIDER output.

Customise the CSS without hacking

redSLIDER loads a CSS file called redslider.min.css that is located at the media folder /media/com_redslider/css/

In the distributed software we provide the original version redslider.css and the minified one redslider.min.css in order to increase performance. note that in normal execution redslider loads the minified file, however with Joomla Debug (Global Configuration -> System -> system Debug) activated redslider loads redslider.css instead.

If you want to customise the CSS we recommend you to not modify any of the previous mentioned files because you will not be able to update the component when new versions will be released. Instead, Joomla already offers an override system that allows you to modify the appearance without hacks.

If you want to customize this CSS file, just copy

/media/com_redslider/css/redslider.css 

and place it into your template folder:

# note that we have renamed redslider.css into redslider.min.css).
/templates/YOUR_ACTIVE_TEMPLATE/css/com_redslider/redslider.min.css 

From that moment in ahead Joomla will load your customized CSS file instead of the one provided with redCOMPONENT original package.

Now you can freely modify the file and it will not be overwritten when you will install new versions of redSLIDER in the future.

More information at: http://www.babdev.com/blog/139-use-the-media-folder-allow-overridable-media

Customise the HTML without hacking

redSLIDER output is generated by a template file located at /modules/mod_redslider/tmpl/default.php

If you want to customise the HTML output we recommend you to not modify any of the previous mentioned files because you will not be able to update the component when new versions will be released. Instead, Joomla already offers an override system that allows you to modify the appearance without hacks.

If you want to customize the HTML output, just copy

/modules/mod_redslider/tmpl/default.php 

and place it into your template folder:

/templates/YOUR_ACTIVE_TEMPLATE/html/mod_redslider/default.php

Now you can freely modify the file and it will not be overwritten when you will install new versions of redSLIDER in the future.

More information at: http://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core

Troubleshooting

If after installing redSLIDER you experience problems in your page may be because of a conflict with the jQuery library. Some extensions like redSLIDER use jQuery Javascript library to work and when different extensions load this same library several times ends up in conflicts. To avoid this issue redSLIDER2 allows you to deactivate the load of JQuery. If your page already loads it redSLIDER will use that existing instance instead of loading it's own.

To prevent redSLIDER loading jQuery go to:

Extensions -> Modules Manager

Redslider2-modulemanager.png

Find the redSLIDER module:

Redslider2-redslidermodule.png

And set the configuration option Load jQuery to No:

Redslider2-jquerytono.png

Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox