How to Update Slider Colors

slider colors

In some cases you may want to customize the Camera Slider colors of the homepage slider you use. It can be done easily and it will require really small code changes. Here are all of the necessary steps:

1) Naviaget to Admin Panel -> Left Menu -> Appearance -> Editor

2) Open style.css file

3) If you want to update the caption background color (the text background in the bottom of the slider), update the color values marked as bold:

.camera_caption > div {
background: #FDCC08;
background: rgba(253, 204, 8, 0.8);
}

4) If you want to change the points (number of slides) under the slider, update the color values marked as bold:

.camera_wrap .camera_pag .camera_pag_ul li {
background: #FDCC08;
}
.camera_wrap .camera_pag .camera_pag_ul li:hover > span {
background: #FDCC08;
}

5) If you want to update the background color of previous and next arrows, update the value of the background color (the bolder values):

.camera_prevThumbs, .camera_nextThumbs, .camera_prev, .camera_next, .camera_commands, .camera_thumbs_cont {
background: #FDCC08;
background: rgba(253, 204, 8, 0.85);
-webkit-border-radius:2px;
-moz-border-radius:2px;
-ms-border-radius:2px;
-o-border-radius:2px;
border-radius:2px;
}

6) Click on ‘Update File’ button.

Note: The above steps can be applied to the following premium themes (or their free versions): tArt, tAthenaeum, tBozz, tCooking, tCorpo, tCreat, tDental, tGrdnr, tGymm, tKidd, tLanguageschool, tLibrary, tMeditation, tMuzz, tNutrit, tOptics, tProp, tPsychology, tSpiritual, tTechy, tTourism, tYoga.

About the Author

Tihomir Ivanov is a WordPress web developer, founder of tishonator.com, a fan of Linux and Open Source, a gym enthusiast, a vegan, a fan of minimalism, good movies and books :)

Leave a Reply