/blogger/community?hl=en
/blogger/community?hl=en
7/28/15
Original Poster
Tom de Beer

Change design elements of cookie bar

So the cookie alert showed up on my blog. And I'm fine with having one, since I actually already had a custom designed one. Since it was so slow at loading everytime I just deleted in favor of the new cookie bar. However, there is one problem: its design. It is not consistent with the rest of my blog. The black / dark grey color and font have to be changed, but I have no idea where to do that.

I am experienced with HTML, CSS and even a bit JavaScript. But the problem is that I can't find the div that is used with the new cookie alert. I know already that Blogger really messes div names and all that kind of stuff up. But usually 'Inspect element' does the job for me. Now I just can't seem to find it at all. Like Google locked it up somewhere.

Again, I just want to be able to change the CSS values. The alert itself stays, including the message and maybe even the link (although I've got my own Privacy page telling users more about how cookies are being used.

Anyone who can help me with this?? Thanks in advance!
Community content may not be verified or up-to-date. Learn more.
Recommended Answer
Was this answer helpful?
How can we improve it?
All Replies (32)
PeggyK
7/28/15
PeggyK
You can remove the default Cookie alert and add your own code to your blog.


Google's resources for adding cookie notification code: http://www.cookiechoices.org/
Marc Ridey
7/28/15
Marc Ridey
The cookie notice is generated using the script http://your.blog.domain/js/cookiechoices.js similar to the instructions on www.cookiechoices.org

The generated HTML elements are:

<div id="cookieChoiceInfo" class="singleton-element" style="position: fixed; width: 100%; margin: 0px; left: 0px; top: 0px; padding: 0px; z-index: 4000; text-align: center; font-weight: bold; color: rgb(255, 255, 255); line-height: 200%; background-color: rgb(102, 102, 102);"><div style="position: relative; width: initial; margin: 0px; left: 0px; top: 0px; padding: 16px 8px;"><span>This site uses cookies from Google to deliver its services, to personalize ads and to analyze traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies.</span><a href="https://www.blogger.com/go/blogspot-cookies" target="_blank" style="border-radius: 6px; font-weight: bold; color: rgb(255, 255, 255); margin-left: 8px; padding: 6px; background-color: rgb(51, 51, 51);">Learn More</a><a id="cookieChoiceDismiss" href="#" style="border-radius: 6px; font-weight: bold; color: rgb(255, 255, 255); margin-left: 8px; padding: 6px; background-color: rgb(51, 51, 51);">Got it</a></div></div>

The top DIV is id=cookieChoiceInfo

Try to visit your blog on a European Union domain like blogspot.fr, the notice should be displayed and then you can right-click and inspect the generated elements.

Marc
7/28/15
Original Poster
Tom de Beer
Both thank you for the quick reply.

First of all (PeggyK), as I've mentioned in my main post I don't want to use my own cookie alert anymore. It did load very slow, but the new alert loads right away. So I want to keep that one, but by adding my own design elements to it.

Second (Mark), I know the DIV I'm searching for is called cookieChoiceInfo. But once I dive into the HTML editor of Blogger and try to search for it, nothing shows up. Also, I've got my own domain (dutch-tech.nl), so that last tip you gave me doesn't apply to my situation. :P

--

I know WHAT to search for, and I know I want to keep the new cookie alert. But again, in the HTML editor it's nowhere. Really nowhere. :P
Marc Ridey
7/28/15
Marc Ridey
Yes, the cookie notice is inserted independently of templates so you will not be able to modify it there.
There isn't an easy way right now to style the notice. Possibly using !important in CSS rules to cookieChoiceInfo may work.
We'll update the integration using CSS classes to allow styling. This will probably take a couple of weeks.
I'll let you know on this thread once it's available.
7/28/15
Original Poster
Tom de Beer
Thanks for that Marc! Looking forward to it. :)
26 MORE
divalin
8/20/15
divalin
To disable the default notice, add the following script just above </head> tag inside your template.

<script type="text/javascript">
cookieChoices={};
</script>

You can now add your own saying at:https://silktide.com/tools/cookie-consent/download/   It gives you options to add a bar on the bottom, top, slideout in black or white.  Use theirs or create your own words.
 
This question is locked and replying has been disabled. Still have questions? Ask the Help Community.

Badges

Some community members might have badges that indicate their identity or level of participation in a community.

 
Google Employee — Google product team members and community managers
 
Community Specialist — Google partners who help ensure the quality of community content
 
Platinum Product Expert — Community members with advanced product knowledge who help other Google users and Product Experts
 
Gold Product Expert — Community members with in-depth product knowledge who help other Google users by answering questions
 
Silver Product Expert — Community members with intermediate product knowledge who help other Google users by answering questions
 
Product Expert Alumni — Former Product Experts who are no longer members of the program
Community content may not be verified or up-to-date. Learn more.

Levels

Member levels indicate a user's level of participation in a forum. The greater the participation, the higher the level. Everyone starts at level 1 and can rise to level 10. These activities can increase your level in a forum:

  • Post an answer.
  • Having your answer selected as the best answer.
  • Having your post rated as helpful.
  • Vote up a post.
  • Correctly mark a topic or post as abuse.

Having a post marked and removed as abuse will slow a user's advance in levels.

View profile in forum?

To view this member's profile, you need to leave the current Help page.

Report abuse in forum?

This comment originated in the Google Product Forum. To report abuse, you need to leave the current Help page.

Reply in forum?

This comment originated in the Google Product Forum. To reply, you need to leave the current Help page.