Hey there,
I don’t see any widgets on your site as of now. We can’t really help you if the elements in question are not visible. Hope you understand.
I will put one on now for the purposes of working on this.
There is now a subscription widget in Footer 1.
Hey there,
You can achieve what you are after by adding following Custom CSS to your theme using Advanced CSS Editor.
.widget-areas{
background: #bee;
}
h1.widget-title{
color: #000;
}
Change the HEX color codes according to your need. Also note that every widget has different CSS selectors. That means you will first have to setup your widgets and then let us know so we can inspect which selector we need to change the font color. Hope you understand.
That worked. However, now you’ll see that the button is the Pictorico blue, which is not what I want. I need that button (both original and hover) to be a different colour. Do you know how to fix that?
Hey there,
Sure, you can change the button color and hover color with the help of following custom CSS
button, .button, input[type="reset"], input[type="button"], input[type="submit"]{
background: #000;
border-color: #000;
box-shadow: 0 0 4px 0 #000;
}
button, input[type="button"], input[type="reset"], input[type="submit"]:hover{
background-color: #FF0000;
border-color: #FF0000;
box-shadow: 0 0 4px 0 #FF0000;
}
Change HEX codes according to your need. Hope it helps.
Should I replace the following CSS with that, or simply adjust my current CSS?
button, .button, input[type="reset"], input[type="button"], input[type="submit"] {
background: #BBE7DA;
border-color: #BBE7DA;
box-shadow: 0 0 4px 0 #BBE7DA;
}
input.search-submit:hover {
background: #BBE7DA;
color: #fff;
border-bottom: #BBE7DA;
}
#submit:hover {
background: #BBE7DA;
color: #fff;
border-bottom: #BBE7DA;
}
Hey there,
It is not recommended to make modifications in theme’s main stylesheet since they will be lost when the theme is updated. You can just add the code I gave you using Advanced CSS Editor.
That is not in my theme’s main stylesheet, that is CSS I was using previously to ensure the buttons would change colour (which has since stopped working for some reason). That is currently being used in CSS Editor. Should I amend or replace?
Hey there,
Just replace it with the CSS I gave you and it should work. Let me know if it doesn’t. Thanks!
That CSS has not effectively changed the colour of the “Subscribe” button. Is there simply something I need to add to it?
Hi @breecrowder,
Replacing your existing CSS with the following should work as intended:
button, .button, input[type="reset"], input[type="button"], input[type="submit"]{
background: ##BBE7DA;
border-color: ##BBE7DA;
box-shadow: 0 0 4px 0 ##BBE7DA;
}
button, input[type="button"], input[type="reset"], input[type="submit"]:hover{
background-color: ##BBE7DA;
border-color: ##BBE7DA;
box-shadow: 0 0 4px 0 ##BBE7DA;
}
If your buttons aren’t the colour you wish them to be after that, then please point me to the specific page that I can see this on your site.
Thanks!
That CSS is still not working at the bottom of my homepage.
I can see that your HEX codes have two hashtags in them, which would cause the CSS to not work correctly:
button, .button, input[type="reset"], input[type="button"], input[type="submit"] {
background: ##BBE7DA;
border-color: ##BBE7DA;
box-shadow: 0 0 4px 0 ##BBE7DA;
}
Can you please remove the second hashtag from your custom CSS?
