Cookies at the Library

| 0 comments

Actually, we do have cookies at the library

However, unfortunately not this sort:

By EU law, all Danish web sites have to be equipped with a big, ugly notification about the cookies they apply to the user’s computer.

At Horsens Public Library we are running WordPress, and until now, we have used the plugin Cookie Law Info. Well, it works, but it is not very beautiful and generally plugins do tend to add a lot of extra JavaScript, CSS and thereby more HTTP calls to the overall codebase of the site. This makes the web site slower and heavier for the user to download.

Could it be just a bit more discrete?

Cookie message on Horsensbibliotek.dk

That is why I chose a simple solution. Namely, to hardcode it into the theme, I already built for the web site. Of course, the message has to be visible but I would really like it to be a bit more discrete than what you usually see out there. You can have the code, if you want to.

Throw a bit of HTML into the footer of your site:

<div class="cookie-message">
	<p class="cookie-header">Cookies</p>
	<p class="cookie-content">This website uses cookies. You can manage or block these in the settings of your browser.</p>
	<p class="cookie-content"><button class="button">OK, thanks!</button> &nbsp; <a href="http://here-goes-your-page-about-cooki.es">Read more about cookies</a></p>	
</div>

Add a few lines to your JavaScript (you need jQuery):

$('.cookie-header').click(function() {
	$('.cookie-content').slideToggle('fast');
	$('.cookie-content button').click(function() {
		$('.cookie-content').slideUp('fast');
	});
});

Add this to your CSS:

.cookie-message {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  background: #333;
  color: #ddd;
  padding: 1em 1em .5em;
  position: fixed;
  left: -5px;
  bottom: 2em;
  text-align: left;
}
.cookie-message p {
  font: normal 1em/1.5em Helvetica, Sans-serif;
  margin: 0 0 .5em 5px;
}
.cookie-message .cookie-header {
  font-size: 1.2em;
  cursor: pointer;
}
.cookie-message .cookie-content {
  display: none;
  width: 20em;
}
.cookie-message a {
  color: #fff;
}

See also my Codepen example with SASS.

Translations: Danish

Author: Morten Brunbjerg Bech

Webdesigner, front end udvikler og bibliotekar. Arbejder primært med udvikling og design af Horsens Kommunes Bibliotekers webløsninger og er specialist i semantisk strukturering af webdokumenter samt Adobe Photoshop og Illustrator.

Leave a Reply