We've had the Google CookieChoices banner in our blogs - thanks to the European Union cookie privacy issue - since April 2015.
Not all blog owners - even those in Europe, where its presence may be required by law - appreciate what Google provided for us. The banner clutters up many templates, making our blogs more busy looking. In some cases, it may hide - or be hidden by - important blog components.
There are several ways of customising the banner, to make it more acceptable - that are not too difficult to use.
Different blog owners have different blog designs, which may not work with the CookieChoices banner at the very top of the screen.
There are different solutions, to handle the banner.
Push the CookieChoices banner below the menu / navbar.
The most obvious is to increase the top margin of the cookiechoices banner, and push the banner down. Simply add one custom CSS rule, using the Template Designer "Add CSS" wizard.
50 px is the normal amount of vertical space used by many menu bars. If your template has a menu bar at the top, you may need to adjust the size as necessary.
Move the CookieChoices banner, to the bottom of the screen.
Alternately, you may prefer to reposition the banner, at the bottom of the screen.
This code is present, in the "Responsive" class templates. The banner is positioned at the bottom, already.
Force the CookieChoices banner to display on top of the owner content.
A third choice is to force the banner to display on top of the content - as it does, normally, with the Blogger navbar.
With all 3 solutions, insert either code block in "Add CSS" with a blank line separating it, from any previous CSS rule.
Disable the CookieChoices banner.
A fourth choice - if you really need - is to disable the banner. This requires that you add a script, just after the "<Head>" tag. You'll use Template Editor, to install this tweak.
As always, please backup the template - before and after making this change.
You'll hopefully do this, just before adding a third party banner - which may be more to your tastes.
There are still more possibilities, to improve the banner, on your blog.
Start with Blogger Help: Cookies notification in European Union countries.
Also, you'll find suggestions in How to style, change or disable the Blogger EU Cookie Notice.
The bottom line.
Verify the results of your changes, by careful testing. Done properly, these solutions will keep your blog in compliance - and hopefully help you to avoid an all expenses trip (one way) to the Euro Capital City of your nightmares.
Not all blog owners - even those in Europe, where its presence may be required by law - appreciate what Google provided for us. The banner clutters up many templates, making our blogs more busy looking. In some cases, it may hide - or be hidden by - important blog components.
There are several ways of customising the banner, to make it more acceptable - that are not too difficult to use.
Different blog owners have different blog designs, which may not work with the CookieChoices banner at the very top of the screen.
There are different solutions, to handle the banner.
- Push the CookieChoices banner, below the menu / navbar.
- Move the CookieChoices banner, to the bottom of the screen.
- Force the CookieChoices banner to display on top of the owner content.
- Disable the CookieChoices banner.
Push the CookieChoices banner below the menu / navbar.
The most obvious is to increase the top margin of the cookiechoices banner, and push the banner down. Simply add one custom CSS rule, using the Template Designer "Add CSS" wizard.
#cookieChoiceInfo {
margin-top:50px;
}
50 px is the normal amount of vertical space used by many menu bars. If your template has a menu bar at the top, you may need to adjust the size as necessary.
Move the CookieChoices banner, to the bottom of the screen.
Alternately, you may prefer to reposition the banner, at the bottom of the screen.
#cookieChoiceInfo {
bottom: 0;
top: auto;
}
This code is present, in the "Responsive" class templates. The banner is positioned at the bottom, already.
Force the CookieChoices banner to display on top of the owner content.
A third choice is to force the banner to display on top of the content - as it does, normally, with the Blogger navbar.
.cookie-choices-info {
z-index: 99999999;
}
With all 3 solutions, insert either code block in "Add CSS" with a blank line separating it, from any previous CSS rule.
Disable the CookieChoices banner.
A fourth choice - if you really need - is to disable the banner. This requires that you add a script, just after the "<Head>" tag. You'll use Template Editor, to install this tweak.
As always, please backup the template - before and after making this change.
<Head>
<script type="text/javascript">
cookieChoices = {};
</script>
You'll hopefully do this, just before adding a third party banner - which may be more to your tastes.
There are still more possibilities, to improve the banner, on your blog.
Start with Blogger Help: Cookies notification in European Union countries.
Also, you'll find suggestions in How to style, change or disable the Blogger EU Cookie Notice.
The bottom line.
Verify the results of your changes, by careful testing. Done properly, these solutions will keep your blog in compliance - and hopefully help you to avoid an all expenses trip (one way) to the Euro Capital City of your nightmares.
Comments
Thanks for the question.
Yes, there are more CSS rules for changing both formatting and wording of the banner.
Start with Cookies notification in European Union countries.
Also, you'll find suggestions in How to style, change or disable the Blogger EU Cookie Notice.