HomePage Slider Customization | Empire - Documentation | JoomShaper

Empire

Updated Last: 20 March 2023
Back to Templates

HomePage Slider Customization

 

How to remove thumbs under main slider?

Please use following css code:

#slider.flexslider .flex-direction-nav, 
.slide_thumb_wrap .flexslider {display:none;}


How to remove button or empty box from slider?

Please use following css code:

#slider.flexslider .slides li.flex-active-slide a { display: none !important; }


How to reduce dark layer in slider?

Please use following css code:

#slider.flexslider .slides li::after { background: rgba(0, 0, 0, 0.3) !important; }
Default value is 0.6, less value means brighter bg color. The RGBA declaration was used to set opacity as part of the color value. This allows us to fill areas with transparent color; the first thee numbers representing the color in RGB values and the fourth representing a transparency value between 0 and 1 (zero being fully transparent and one being fully opaque).

How to change Thumbs backgrounds?

Each thumb tab have its own unique background color (orange, blue, purple etc.) with small value of transparency. All is based on RGBA colors.
Here is default CSS code from Empire template:

.slide_thumb_wrap .flexslider .slides li .thumb-wrap .thumb-text:hover {
    background: rgba(242,101,34,0.9); }

.slide_thumb_wrap .flexslider .slides li:nth-child(2) .thumb-wrap .thumb-text:hover {
    background: rgba(0,169,157,0.9); }

.slide_thumb_wrap .flexslider .slides li:nth-child(3) .thumb-wrap .thumb-text:hover {
    background: rgba(102,45,145,0.9);}

.slide_thumb_wrap .flexslider .slides li:nth-child(4) .thumb-wrap .thumb-text:hover {
    background: rgba(0,84,166,0.9);}

You can change RGB color and transparency level from 0.9 to 0.1 as you need. You have to override CSS styles, in custom.css file or Custom CSS section from template.

 

Was This Helpful? Yes (0) No (1)