change the color of the "Featured slider"

  • Author
  • #1183174

    Dear Gentlmen
    I am using the “Skylark” Theme and I was tring to change the color of the “Featured slider” in the “Custom Design” bottum but I couldn’t !!

    The blog I need help with is

    The blog I need help with is


    That would have to be changed with CSS I believe since there is not an entry in the customize page for the slider. Not all elements in the themes can be changed through the customize feature.

    Do you have the custom design upgrade? It would be included with the value bundle if you purchased that.


    Actually, since you posted in the CSS forum I’ll assume you do have it (I need more coffee). The background color for the slider would be set here:

    .featured-wrapper, #content .nav-next a, #content .next-image a, #content .nav-previous a, #content .previous-image a {
    background-color: #68416C;

    Add the above to the custom CSS edit window (after deleting the informational text) and then change the hex color code as you desire.


    Hi Mr

    thanks a lot for your reply.
    I copyed the code and I past it there (after deleting the informational text) and I changed the color code “the last numbers”, But nothing happen & the option I need didn’t appear !!

    can you help me in this?


    Sorry, I must have been distracted when I did this. Add the following, code and then edit the color code.

    .featured-wrapper {
        background: #68416C;

    oops, again it doesn’t appear !!

    after I put this code I went to the Custom Design > Color but the option that change the “Featured slider” doesn’t appear ??


    You won’t be going to the custom design section. Once you put the code into the CSS edit page, you edit the color code right in the CSS. You don’t edit from the Customize section.

    What color did you want? Give me the code and I’ll put it in and then all you have to do is put the CSS in the CSS edit window and save. Nothing else has to be done.


    I did the same belive me ^.^

    this is the code of the colore I want: #5b3d5a

    This the code I put:

    .featured-wrapper {
    background: #5b3d5a;

    there is nothing to do with the options in the right.. the “Publish” options ????


    also I tried this

    .featured-slider {
    background: #5b3d5a;

    I changed the word “wrapper” to “slider” as I want to change the feature slider color. but It doesn’t work as well !!??


    #5b3d5a is the purple color I see right now on your site for the slider background. The code is working. Change the color code in what I gave you to #CC0000 and watch the background color of the featured slider turn to red.

    .featured-wrapper {
    background: #CC0000;

    Ooooops, It was a problem in my internet Explorer !!
    when I brows the page from google chrome or even from my ipad I saw the colore.

    thanks a lot my friend, you helped me on this


    You are welcome. You might try using an !important attribute on the background declaration to see if that works in IE like this:

    .featured-wrapper {
    background: #CC0000 !important;

    thanks a lot, I tried but it doesn’t work as well !!


    Let me look at it and see if I can figure out what is confusing Internet Explorer.


    You know, I don’t see anything that should cause a problem in IE. I wish I had IE to be able to check it, but I’m on a Mac.


    I’ll tag this for staff and see if they can happen to figure it out.


    I appriciate your support mr thesacredpath.

    but the problem is still the same, I am waiting for the solution !?



    Hi there,

    It seems like the “filter” property is causing the issue you’re seeing. It’s adding a gradient on top of the new background color you’ve set.

    Try the following:

    .featured-wrapper {
    	background: #473246;
    	filter: none;

    Let us know if you have any other questions, or if that doesn’t work!



    The same issue also occurs to the button inside the featured wrapper. You will need to edit those styles too.

    .featured-post-content .more-link  {
    	filter: none;

    I think you need to grab the entire “.featured-wrapper” blog as set by the theme and update each color code inside. Here is an example:

    .featured-wrapper {
    	background-color: #473246;
    	background: -webkit-gradient(linear, left top, left bottom, from(#5b3d5a), to(#473246));
    	background: -moz-linear-gradient(top, #5b3d5a, #473246);
    	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5b3d5a', endColorstr='#473246');
    	border-top: 1px solid #6aa3df;

    The “filter” property is the one that affect the gradient in Internet Explorer. I tested the example posted above with IE9 on Windows Vista, and it worked in my tests.

The topic ‘change the color of the "Featured slider"’ is closed to new replies.