How to create a new slider theme?

How to create a new slider theme?


Short step by step instruction:
  1. Copy and rename default folder from and into modules/mod_djimageslider/themes
  2. Switch the theme to {YOURTHEME} in the module settings
  3. Find "-default" suffix and replace it with "-{YOURTHEME}" for all css selectors in both css files
  4. Adjust styles of your new slider theme
Creating a new slider theme is very simple. At the beginning, you just need to copy and rename default folder from and into modules/mod_djimageslider/themes. Your new theme will be listed right away in the module settings where you can switch the theme to the newly created one.

The next step is to replace a suffix (theme name) of all css selectors in the {YOURTHEME}/css/djimageslider.css and {YOURTHEME}/css/djimageslider_rtl.css files. You can use any text editor with a "find & replace" feature to accomplish this step in seconds (e.g. Notepad++, WordPad, etc.).

Now you are ready to make the changes you want in the {YOURTHEME}/css/djimageslider.css file and optionally also in the {YOURTHEME}/css/djimageslider_rtl.css file depends on what is the direction of your site language. The djimageslider_rtl.css file is loaded only for RTL languages together with djimageslider.css what means it should contain styles' overrides for RTL languages. It's optional, so you can delete it from your theme and then only the djimageslider.css file will be used for both language directions.

Theme overridden in the template

Alternatively you can customise slider in your template. You can copy from the default theme the djimageslider.css file into templates/{YOURTEMPLATE}/css folder and set the slider theme to "- override from template -". In this case you need to replace "-default" suffix with "-override" for all css selectors. The same rule with the djimageslider_rtl.css file applied here. It will be loaded for RTL languages only if it exists in your template css folder. 

      • Related Articles

      • How to create a new menu theme?

        Mega Menu Theme Short step by step instruction: Copy and rename default folder from and into modules/mod_djmegamenu/themes Switch mega menu theme to {YOURTHEME} in the module settings (Mega Menu Options tab) Find "-default" suffix and replace it with ...

      • Simple products slider

        Simple products slider is an element that allows displaying products list in the yootheme's core slider element. Content This element contains following fields: image - field reserved for the product's image, video - field reserved for the product's ...

      • Creating new Custom Item

        To create new Custom Item click on the  New Item  button from the Control Panel and you will be directed to the form display below. Note that you need to create at least one Album to be able to save new Custom Item. There are two columns in this ...

      • Creating new Album

         To display an Album on the frontpage first you need to create new one. Click on the New Album button from the Control Panel and you will be directed to the form: There are only a few parameters required. You'll see them at the first sight. These ...

      • How to create full-width slider in DJ-MediaTools ?

        You can set up the slideshow to display on whole window width. First of all, you need to choose proper module position in your Joomla template which is 100% wide. If you are not sure if there is such module position you can contact your template ...