change the color of the "Featured slider"

ahmedalhashimi · Member · Mar 14, 2013 at 3:52 pm
Copy link

Add topic to favorites
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 ahmedalhashimi.com.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Mar 14, 2013 at 5:18 pm
Copy link
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.
thesacredpath · Member · Mar 14, 2013 at 5:21 pm
Copy link
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.
ahmedalhashimi · Member · Mar 15, 2013 at 6:16 am
Copy link
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?
thesacredpath · Member · Mar 15, 2013 at 6:51 am
Copy link
Sorry, I must have been distracted when I did this. Add the following, code and then edit the color code.
```
.featured-wrapper {
    background: #68416C;
}
```
ahmedalhashimi · Member · Mar 15, 2013 at 6:59 am
Copy link
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 ??
thesacredpath · Member · Mar 15, 2013 at 10:34 am
Copy link
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.
ahmedalhashimi · Member · Mar 15, 2013 at 10:45 am
Copy link
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 ????
ahmedalhashimi · Member · Mar 15, 2013 at 10:50 am
Copy link
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 !!??
thesacredpath · Member · Mar 16, 2013 at 2:00 am
Copy link
#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;
}
```
ahmedalhashimi · Member · Mar 16, 2013 at 6:29 am
Copy link
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
thesacredpath · Member · Mar 16, 2013 at 10:51 pm
Copy link
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;
}
```
ahmedalhashimi · Member · Mar 17, 2013 at 11:12 am
Copy link
thanks a lot, I tried but it doesn’t work as well !!
thesacredpath · Member · Mar 17, 2013 at 3:52 pm
Copy link
Let me look at it and see if I can figure out what is confusing Internet Explorer.
thesacredpath · Member · Mar 17, 2013 at 4:03 pm
Copy link
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.
thesacredpath · Member · Mar 17, 2013 at 4:04 pm
Copy link
I’ll tag this for staff and see if they can happen to figure it out.
ahmedalhashimi · Member · Mar 18, 2013 at 10:19 am
Copy link
I appriciate your support mr thesacredpath.

but the problem is still the same, I am waiting for the solution !?
cainm · Staff · Mar 18, 2013 at 9:28 pm
Copy link
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!
cainm · Staff · Mar 18, 2013 at 9:31 pm
Copy link
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;
}
```
designsimply · Member · Mar 18, 2013 at 11:43 pm
Copy link
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.

No items found.