How to customize slide in DJ-ImageSlider

How to customize slide in DJ-ImageSlider

You can create an attractive slideshow using unregular shapes, and customized colors for each element of the slide.
Change the overall look of your slides with a border-radius feature, background color, fonts for title, fonts for read-more, description and customize its colors.

How to customize the settings?

Go to "Modules" in your Joomla panel. Open (or create new) DJ-ImageSlider module. Now open the "Customize Slider" tab.

Available settings are:
  1. Title color - choose the title color and a transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent. The color can be chosen from the color palette or defined by typing RGBA parameters.
  2. Title font - enter the name of the selected font. You can use generic system fonts or Google Fonts.
  3. Title font size - set the font size by entering the px or em value. Leave the field empty for a default size.
  4. Description color - choose the description color and a transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent. The color can be chosen from the color palette or defined by typing RGBA parameters.
  5. Description font -  enter the name of the selected font. You can use generic system fonts or Google Fonts.
  6. Description font size - set the description size by entering the px or em value. Leave the field empty for a default size.
  7. Read more color - choose the read more color and a transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent. The color can be chosen from the color palette or defined by typing RGBA parameters.
  8. Read more font - enter the name of the selected font for the read more option. You can use generic system fonts or Google Fonts.
  9. Read more font size - set the read more font size by entering the px or em value. Leave the field empty for a default size.
  10. Background color - choose the background color and a transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent. The color can be chosen from the color palette or defined by typing RGBA parameters.
  11. Include Google fonts - Yes/No
  12. Border radius - you can give any slide "rounded corners" by applying a border-radius through CSS.  If you are not sure how to configure it, visit Border-Radius page and use the generator.
 We have used sample settings here:

 
And that is how the slider looks on the front page:


      • Related Articles

      • How to customize slide in DJ-MediaTools

        Make a creative slideshow with unregular shapes, customized colors for each element of the slide. You can change the overall look of the slide using a border-radius feature, background color, fonts for title, fonts for read-more, description and ...
      • DJ-ImageSlider module

        DJ-Image Slider module is necessary to display component slides in the module position. However, this module can work without component and then displays only images from a specified folder. Navigate Extensions > Module Manager and choose ...
      • DJ-ImageSlider component

        The DJ-ImageSlider component allows you to display image slides with title and short description linked to any menu item or url address. See the basic steps to configure DJ-ImageSlider component: Create a category Create a slide 
      • Customize layout DJ-MediaTools

         Slide settings Title Show title - yes/no Link title - yes/no Title limit - Limit the number of characters in a slide title to show in a description box.  Title color - choose the title color and a transparency level, where 1 is not transparent at ...
      • DJ-ImageSlider example views

        Check the Demo site to see the comprehensive list of available layouts See examples of DJ-ImageSlider views: a) horizontal slider with one image visible, taken from the component, containing a short description with the linked title  b) horizontal ...