Change color on stripe

That particular element has a gradient background colour — a very suttle gradient which is styled from this:

#header-footer {
height: 22px;
background: #f7f7f7; /* Old browsers */
background: -moz-linear-gradient(left,  #f7f7f7 0%, #ebeced 50%, #f7f7f7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f7f7f7), color-stop(50%,#ebeced), color-stop(100%,#f7f7f7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #f7f7f7 0%,#ebeced 50%,#f7f7f7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #f7f7f7 0%,#ebeced 50%,#f7f7f7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #f7f7f7 0%,#ebeced 50%,#f7f7f7 100%); /* IE10+ */
background: linear-gradient(to right,  #f7f7f7 0%,#ebeced 50%,#f7f7f7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#f7f7f7',GradientType=1 ); /* IE6-9 */
}

There is no setting for gradients, so to change this, you will need to create some custom CSS, either as a nother gradient background or a solid colour. Making custom CSS changes can be done from Jetpack’s Custom CSS feature (if you use Jetpack), or a child theme’s style.css file, or, a plugin such as “Simple Custom CSS”.

If you want to use a solid colour only, you can do it with:

#header-footer {
   background-color: #ffffff;
}

Of course, you would use the colour you want. If you want a different gradient, you can use an online tool such as: https://www.colorzilla.com/gradient-editor/

Thank’s I like the gradient so I don’t want to change that ??

When I change the color code, the gradient changes to start from the center. Should it do that? I haven’t changed anything else.
Thank you! ??

#header-footer {
height: 22px;
background: #a33038; /* Old browsers */
background: -moz-linear-gradient(left, #a33038 0%, #ebeced 50%, #a33038 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#a33038), color-stop(50%,#ebeced), color-stop(100%,#a33038)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #a33038 0%,#ebeced 50%,#a33038 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #a33038 0%,#ebeced 50%,#a33038 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #a33038 0%,#ebeced 50%,#a33038 100%); /* IE10+ */
background: linear-gradient(to right, #a33038 0%,#ebeced 50%,#a33038 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#a33038′, endColorstr=’#a33038′,GradientType=1 ); /* IE6-9 */
}

reverse it so that the darker colour is the middle. Did you use that online tool to generate the code for you?

No, all I did was replace the Color Code in a document and then copy/paste it into the CSS editor. I haven’t changed anything else. I don’t know where to change it ??

Perhaps I’m misunderstood….you don’t want it to start from the center and go outwards?

I want it to fade?like it does in the original settings, I want?the color?to be 100% at the center and then go outwards. I think it’s what it does in the theme?

That is what it does in the theme yes. So the original css code I pasted of what is creating the gradient, you just need to replace the HEX colour values. In the code, the #ebeced value is the darker colour and the #f7f7f7 is the lighter.

Adding yours will replace those, starting with the darker colour of your preference replacing the #ebeced.

I was trying to do this too, didn’t need the gradient so used:

#header-footer {
background-color: #000099;
}

pasted it in the customizing additional CSS it didn’t work… did I do something wrong?

Hi @beccarosenkrans Best to start a new topic for yours as the forum moderators will request that. However, this one is an easy fix. Instead of doing backgroud-color, do just background:

#header-footer {
background: #000099;
}

The gradient uses “background” instead of background-color, so overriding it with a solid colour, you would have to do just background.