-
Posts
-
Hi, I am looking at the forum but did not find a working answer. I am trying to change the background color of whole message into something lighter. And also I want to reduce the font size of the buttons. But the only thing working is the color of the button “accept” all other settings in advanced styling seem not to change anything. How could I change them? This is the domain: https://martindreher.de.
Thanks a lot.
SophieHey Sophieja23,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
.avia-cookie-consent { background-color: rgba(50, 39, 39, 0.64); }If you need further assistance please let us know.
Best regards,
VictoriaHi Victoria,
thanks. But both methods seems not to work…
And the second part of my question was how to reduce the font-size of the buttons. Comparing with the text the buttons are really big…
Best regards,
SophieHi,
.avia-cookie-consent {
font-size: 10px;
}This takes care of the font size.
Best regards,
BasilisHi Sophieja,
try this:
.avia-cookie-close-bar, .avia-cookie-link-btn { font-size: 10px !important; }To change the background color of your cookie message, Victorias solution actually should work. Did you try to use this code by using an “!important”? It would be like
.avia-cookie-consent { background-color: rgba(50, 39, 39, 0.64) !important; }Hi Sophie,
Glad to hear that :)
Let us know if you need further assistance.
@Chili2908 thanks for helping out :)Best regards,
NikkoHi!
I use a child theme and tried this css and it doesn’t work:.avia-cookie-consent {
width: 100%;
position: fixed;
background-color: rgba(116, 167, 194, 1) !important;
z-index: 999;
color: rgba(255, 255, 255, 1) !important;
padding: 1.1em;
text-align: center;
opacity: 1;
visibility: visible;
transition: all 0.3s ease-in-out;
overflow: hidden;
}It only works if I add it to quick css in theme options which is NOT a good solution for me. We want all our custom CSS in the same place which is in our style.css file in child theme.
Can you tell us when this will be fixed so I can remove it from quick CSS and have it only in child theme where it should be?
Is it because of the Data-contents serial added to the code?:
<div class=”avia-cookie-consent avia-cookiemessage-bottom” data-contents=”18ce70fe……..8b2a7a”><div class=”container”>Thanks!
Hi GriffinGraffix,
The only reason why it works in Quick CSS and not on your custom css is because of caching, if you view page source and then check your custom css you’ll see it’s fetching the old css.
Try to check this article: https://technumero.com/css-changes-not-showing-up-in-wordpress-cache-busting-css/
Hope it helps.Best regards,
NikkoI’m a bit confused. I don’t understand what you mean by fetching old css. My custom css for the cookie consent bar was working before. It stopped working after an update a little while back. I figured you guys would fix that issue and so I waited to fix it.
What I see in page source is that my custom css is before yours in the <head> list of css fetches and so yours negates mine.
For my custom styling to override any other avia ones it should be last in <head> and it’s not.<link rel=’stylesheet’ id=’avia-style-css’ href=’https://purrproject.com/wp-content/themes/enfold-child/style.css?ver=4.6.1′ type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’avia-cookie-css-css’ href=’https://purrproject.com/wp-content/themes/enfold/css/avia-snippet-cookieconsent.css?ver=4.6.1′ type=’text/css’ media=’screen’ />Please clarify to help me understand.
Thanks!
Hi GriffinGraffix,
Sure, what I meant with fetching old css is for example in the style.css of your child theme you recently added some css code however when you view you didn’t see its effect, the first thing you can do is check view page source then find the link in style.css: https://purrproject.com/wp-content/themes/enfold-child/style.css?ver=4.6.1
Browsers often stores css/js files in the cache, and when you check on it the css code you added isn’t showing in there, the solution for this is busting css cache or you can clear your browser cache.
If the recently added code is showing but isn’t working on your site, you can try to inspect element and see what css is overriding it.As for the generated css file from Enfold overriding your custom styling, it’s because of the order and the only way ensure that your code won’t be overridden is to put more weight on your selectors. For example you have this code:
.avia-button { font-weight: bold; }and this gets overriden, you can instead replace it with:
#top .avia-button { font-weight: bold; }For more information on this you can check for CSS Specificity: https://www.w3schools.com/css/css_specificity.asp
Best regards,
Nikko
- You must be logged in to reply to this topic.