Need help? Check out our Support site, then

change the color of the "Featured slider"

  1. 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

  2. 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.

  3. 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.

  4. 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?

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

    .featured-wrapper {
        background: #68416C;
  6. 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 ??

  7. 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.

  8. 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 ????

  9. 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 !!??

  10. #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;
  11. 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

  12. 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;
  13. thanks a lot, I tried but it doesn't work as well !!

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

  15. 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.

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

  17. I appriciate your support mr thesacredpath.

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

  18. 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!

  19. 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;
  20. 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.

  21. I didn't see cainm's reply before I posted mine. His solution is simpler, so try that first. :)

  22. Thanks bunches for solving this. I've tacked that up on the bulletin board in my cluttered mind. :)

  23. woooow, perfict, it's working now so well ^^

    thank you cainm, you solve it ..
    thank you designsimply, I tried his code as you said, and it's work
    thank you thesacredpath, you are always there


    may ask one more question gentelmen: how can I make my menu same as the menu in this blog "I couldn't find the code of it !"

    the menu is up to the right which have 4 buttoms (MY TMZ) (CELEBS) (VIDEOS) (PHOTOS)


  24. No answer !!

  25. @ahmedalhashimi, first, could you please make a separate help request about the menu since it's a separate issue? You can add it here:

    Also, please note that we don't offer extensive full-service design consulting here, so if you are asking for a lot of updates or extensive design changes, then we may direct you to inquire about hiring a designer to help you. Here is a form for that in case you are interested:

    If you decide to make a new help request here in the forums instead of hiring a designer, please be a little more specific. Are you just trying to remove the background color from your menu items? I think that would make it look similar to the other menu and here's some example CSS to get you started when editing the menus:

    .main-navigation li {
         background-color: inherit;

    You can use that same selector to make other adjustments if you would like. We can help point you to resource you can use if you are interested in improving your CSS skills so you can make such adjustments on your own. Here is a great tutorial if you are new to CSS that I often recommend:

Topic Closed

This topic has been closed to new replies.

About this Topic