banner for new EU law about cookies

paddo · June 3, 2015

hi, as I writ ein the title, as I can insert in my website (hosted by smugmug) a banner that it informs the customer of the use of cookies?
can you explique me like i can?
thanks.

tomnovy · June 9, 2015

Hi Paddo,

We are already showing the COOKIE message on SmugMug sites for European Visitors - see my screenshot:

Lille Ulven · June 9, 2015

tomnovy even though I am certain that I have seen that banner before for my page (and was surprised by it too) - possibly when visiting my parents in Germany. I cannot see it from Norway, the company network should be resolving me as being logged in from Norway (possibly Sweden -- double checked: registered as Norway in my stats), or from my home network telling the world I am looking at this from Great Britain... So this makes me wonder a little bit about getting to see it at all.
To make sure it is not a setting in my browsers (and I tested with four different ones) I have also tested this against your site now, which I am certain to not have had opened previously. ;-(
I don't know maybe the definition of "Europe" is "continental Europe"? - even though countries like Norway or (I think even) Iceland who are not EU members but EWR members are required to follow EU Law...
So maybe the banner is not working 100%? I'll see if I can find someone willing to test this for me from my European contacts...maybe I can spot a pattern.

I'll try to give you a list of countries (will take some time to get build up):
Norway: No banner shown (confirmed by someone else but me - browsers used so far: IE, Chrome, Firefox, Safari)
UK: Banner shown (browsers so far: Chrome)

tomnovy · June 9, 2015

Lille Ulven,

Norway and Iceland is not part of the European Union and that is why they do not see this banner - it is not required to have this information displayed in those countries. You can read more about this - here:

http://cookiepedia.co.uk/cookie-laws-across-europe

Lille Ulven · June 9, 2015

tomnovy believe me, the banner is required in Norway.
Even though Norway is not part of the EU, as you said, it is part of another European agreement (EWR in German I think, could be because of the EFTA agreements not sure) which basically means that Norway has to obey and implement every single EU law and as a matter of fact also this one. I could link you up to a Norwegian news article from today which actually resulted in 81% of the large companies with websites in Norway not obeying to this rule even though they have to... So I am sorry to say but cookipedia is wrong.
See here: http://www.nrk.no/livsstil/fire-av-fem-nettsteder-bryter-loven-1.12400893 (Four out of five websites break the law) or here:

ekom_eng.pdf page 12/50 wrote:

Section 2-7b. Use of cookies
Retaining information in the user’s communication equipment, or gaining access to this, is not permitted unless the user is informed on which information is processed, the purpose of this processing and who will process the information and consents to this. The first point is not an obstacle for technical storage or access to information:
1. exclusively for the purpose of transferring communication in an electronic communications network
2. which is necessary to supply an information societal service in accordance with the user’s explicit request.
Inserted by Act No. 54 of 14 June 2013 (in force 1 July 2013 pursuant to Decree No. 618 of 14 June 2013).

which you can download here: http://eng.nkom.no/laws-and-rules/_attachment/12665?_download=true&_ts=1453bfacd60 (PDF) or read in its original Norwegian here: http://www.nkom.no/teknisk/internett/cookies/informasjonskapsler-cookies

tomnovy · June 10, 2015

Thanks for this. Let me check this and I will get back to you.

Donlivix · June 11, 2015

Hi there

The banner you're talking about is present but it needs to be formatted to be completely seen: The question "What and why?" is not visible as you canNOT see here:

Any advice?

Thanks

Valerio

Donlivix · June 12, 2015

EU Cookie Law
Hi there

Europe is just a Currency Union where everybody keeps doing whatever he wants, you know. As for everything EU Cookie Law is being applied in different ways throughout EU Countries and in some of them, like Italy, you must:

1) Have a short banner with a notice about cookies (and that's what we already have here on Smugmug)

2) Have a link to a Cookie Policy page inside that banner (the policy page is not a problem to do but I'm not able to add a link to that banner)

3) Have a Opt-In button accepting cookies

Some examples:

I would have found an easy and free solution usable also for people like me who aren't developers, but it needs to past a piece of Java script code. You can find the easy wizard to get exactly what we need here:

https://silktide.com/tools/cookie-consent/download/

So I'm gonna ask you for a way to past that code or a way to customise the current banner (and translate in a different language as well)

Please consider to solve this problem otherwise many of us will be forced to move on a different platform.

Thanks a lot in advance

Valerio

tomnovy · June 12, 2015

Valerio,

Please add this CSS to your THEME → ADVANCED tab → CSS :

.sm-eu-cookie-message a {
color: #fff !important;
}

Lille Ulven - we are working on solving the Cookie issue in Norway - please standby!

Lille Ulven · June 12, 2015

Thanks tomnovy, for the news. I'll patiently wait until you've found the solution

And I tried to find the connection that made it a requirement for Norway to implement EU laws in national laws as well.
It is as I thought the EEA (EWR in German) contract. This means that the "cookie-law" should also be a requirement in Iceland and Liechtenstein - which also are in the EEA but not in the EU in the same way as Norway. So if you can find a solution for Norway, it sounds like it might be a good plan to use the same solution for Liechtenstein and Iceland as well.

Could I please get some tasty fresh cookies now ;-)

tomnovy · June 12, 2015

Lille Ulven we are working on this - I will update this thread as soon as I have some news.

Donlivix · June 13, 2015

tomnovy wrote: »

Valerio,

Please add this CSS to your THEME → ADVANCED tab → CSS :

.sm-eu-cookie-message a {
color: #fff !important;
}

Lille Ulven - we are working on solving the Cookie issue in Norway - please standby!

Thanks a lot tomnovy, it works!
Just to know: have you seen my previous link about an easy way to solve the different EU Cookie Law throughout European countries with a Javascript code? I know new Smugmug doesn't love Javascript, but it really would solve everything:

This is what I'd get with it just putting the following code after the </head> tag


<script type="text/javascript">
window.cookieconsent_options = {"message":"This website uses cookies to ensure you get the best experience on our website. If you agree with accepting cookies click OK","dismiss":"OK","learnMore":"More info","link":"http://www.valeriolivigni.com/Privacy-Policy/n-VvbJH5","theme":"dark-top"};
</script>

<script type="text/javascript" src="//s3.amazonaws.com/cc.silktide.com/cookieconsent.latest.min.js"></script>


Thanks again for your time

Donlivix · June 13, 2015

Another try
If you cannot manage the previous Javascript, a partial but relevant solution could be a customisation of the present banner: are you able to let me change the link "What and why?" with a link to my privacy policy page? http://www.valeriolivigni.com/Privacy-Policy/n-VvbJH5

Valerio

Donlivix · June 14, 2015

Donlivix wrote: »

If you cannot manage the previous Javascript, a partial but relevant solution could be a customisation of the present banner: are you able to let me change the link "What and why?" with a link to my privacy policy page? http://www.valeriolivigni.com/Privacy-Policy/n-VvbJH5

Valerio

In other words I'd like to paste this HTML but I don't know where as in THEME → ADVANCED tab there is just a CSS section:

<div class="sm-eu-cookie-message">
FYI: This website uses cookies to make sure your visit is as awesome as possible. Continuing to browse this website, you agree to our use of cookies. To find out more about it see our <a class"headermessagelink"="" target="_blank" href="http://www.valeriolivigni.com/Privacy-Policy/n-VvbJH5"> Privacy Policy</a>
<div class="sm-eu-cookie-close"> <button type="button" class="sm-button sm-button-size-small sm-button-skin-default sm-button-nochrome">
<span class="sm-fonticon sm-button-fonticon sm-fonticon-small sm-fonticon-XCross"></span>
</button>
</div>
</div>

Lille Ulven · June 17, 2015

tomnovy I know you are working hard on a solution to this subject - and that is highly appreciated.
But I just saw one more "error" with the banner (as I have right now a chance to test from within the EU): the banner is not shown in Safari (8.0.6) on Mac OS 10.10.3 (Yosemite), it works fine on the very same machine and location for Firefox 38.0.5 and Chrome 43.0.2357.124 (64-bit), so I figured to rather mention this one here than opening yet another thread for it, I hope that's OK for you

Best of luck

Lille Ulven

tomnovy · June 17, 2015

Lille Ulven,

You can keep this on this thread - I will check this for you and I will come back to you as soon as I have some information.

tomnovy · June 17, 2015

Lille Ulven,

I have tested this on multiple computers and the cookies message does appear on Safari with clear cookies and cache - see my screenshot:

http://take.ms/MHVp9

you can also test this by visiting your site in PRIVATE MODE

The cookie is not visible if you have already visited your site using this browser.

Lille Ulven · June 17, 2015

Thank you, tomnovy...deleting cookies was something that did not occur in my reasonably tired brain this morning

I can see it now in Safari too.

tomnovy · June 17, 2015

No worries! It happened to me many times.

tomnovy · June 17, 2015

I have created little bit of CSS code that will make the COOKIE message stand out more - you can test this on my SmugMug site: http://www.photom.me

Here is the code { you have to add it to the THEME → ADVANCED tab → CSS}:

/* Cookie section modification */

/* First part of the code is to make the cookie message wider */
.sm-eu-cookie-message {
line-height: 40px !important;
}

/* This code controls the colour of the cookie message close button */
.sm-fonticon-XCross {
color: #fff !important;
}

/* This code changes the WHY AND WHAT? link - first line is the colour of the link, second creates a border, third part creates space between the text and the border and the last part moves the link little bit to the right side from the text */

.sm-eu-cookie-message a {
color: #fff!important;
border: 1px white solid;
padding: 2px 6px 2px 6px;
margin-left: 8px;
}

Donlivix · June 17, 2015

tomnovy wrote: »

I have created little bit of CSS code that will make the COOKIE message stand out more - you can test this on my SmugMug site: http://www.photom.me

Here is the code { you have to add it to the THEME → ADVANCED tab → CSS}:

/* Cookie section modification */

/* First part of the code is to make the cookie message wider */
.sm-eu-cookie-message {
line-height: 40px !important;
}

/* This code controls the colour of the cookie message close button */
.sm-fonticon-XCross {
color: #fff !important;
}

/* This code changes the WHY AND WHAT? link - first line is the colour of the link, second creates a border, third part creates space between the text and the border and the last part moves the link little bit to the right side from the text */

.sm-eu-cookie-message a {
color: #fff!important;
border: 1px white solid;
padding: 2px 6px 2px 6px;
margin-left: 8px;
}

I think you should also add a piece of code to change the cookie-message font size. I've used this one:

/* First part of the code is to make the cookie message wider */
.sm-eu-cookie-message {
line-height: 40px !important;
font-size: 130%;
}

As Italian I had to delete the What and Why? link because we cannot link a third party cookie policy/instructions but ours (hopefully in the future). Thus i wrote:

.sm-eu-cookie-message a {
display: None;
}

Donlivix · June 17, 2015

Customized cookie bar
Well, I got something decent even though not completely functional yet:

The problem is that the X button on the right doesn't work and then it's impossible to close the cookie bar

HTML

<div class="cookie-bar">
This website uses cookies to make sure your visit is as awesome as possible. Continuing to browse this website, you agree to our use of cookies. To find out more about it see our <a class"headermessagelink"="" target="_blank" href="http://www.valeriolivigni.com/Privacy-Policy/n-VvbJH5"> Privacy Policy</a>
<div class="sm-eu-cookie-close"> <button type="button" class="sm-button sm-button-size-small sm-button-skin-default sm-button-nochrome">
<span class="sm-fonticon sm-button-fonticon sm-fonticon-small sm-fonticon-XCross"></span>
</button>
</div>
</div>

CSS

.sm-eu-cookie-message {
display: None;
}

.cookie-bar {
line-height: 30px !important;
font-size: 100%;
top: 0px;
left: 0px;
right: 0px;
bottom: auto;
padding: 0px 0px 0px 6px;
color: #fff!important;
background-color: #555;
opacity: 0.6;
}

.cookie-bar a {
color: #fff!important;
border: 1px white solid;
padding: 1px 6px 2px 6px;
margin-left: 2px;
}

.sm-fonticon-XCross {
color: #fff !important;
padding: 0px 6px 0px 0px;
}

Donlivix · June 18, 2015

I must give up
I'm not a developer, just a patient guy who tried to look for some piece of code on the net after not having got any comforting post here on Dgrin . Well, everything I found which would have been useful to solve the Cookie Message problem is a Javascript and SmugMug doesn't support it. At this point I'll start browsing some other web platform, maybe better a Europe-based one, to migrate from here. I know that the EU Cookie Law is a stupid law but we risk to pay a fine from 6,000 to 35,000 euros having a website not compliant with it and I don't want to.

Goodbye
Valerio

Hikin' Mike · June 18, 2015

Donlivix wrote: »

I'm not a developer, just a patient guy who tried to look for some piece of code on the net after not having got any comforting post here on Dgrin . Well, everything I found which would have been useful to solve the Cookie Message problem is a Javascript and SmugMug doesn't support it. At this point I'll start browsing some other web platform, maybe better a Europe-based one, to migrate from here. I know that the EU Cookie Law is a stupid law but we risk to pay a fine from 6,000 to 35,000 euros having a website not compliant with it and I don't want to.

Goodbye
Valerio

Try doing this:

HTML
[html]
<div class="popup-wrapper" id="popup">
<div class="popup-container">
<p>This website uses cookies to make sure your visit is as awesome as possible. Continuing to browse this website, you agree to our use of cookies. To find out more about it see our <a class="privacy-policy" href="http://www.valeriolivigni.com/Privacy-Policy/n-VvbJH5" target="_blank" >Privacy Policy</a></p>
<a class="popup-close" href="#popup">X</a>
</div>
</div>
[/html]CSS:

/**
* Custom EU Pop-up 
*/
.sm-eu-cookie-message {
	display: none;
	}

@-webkit-keyframes autopopup {
	from {
		opacity: 0;
		margin-top: -200px;
	}
	to {
		opacity: 1;
	}
}
@-moz-keyframes autopopup {
	from {
		opacity: 0;
		margin-top: -200px;
	}
	to {
		opacity: 1;
	}
}
@keyframes autopopup {
	from {
		opacity: 0;
		margin-top: -200px;
	}
	to {
		opacity: 1;
	}
}

#popup {
	background-color: rgba( 0, 0, 0, 0.7 );
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	z-index: 100;
	-webkit-animation: autopopup 2s;
	   -moz-animation: autopopup 2s;
	        animation: autopopup 2s;
	}	
#popup:target {
	-webkit-transition: all 1s;
	   -moz-transition: all 1s;
	        transition: all 1s;
	opacity: 0;
	visibility: hidden;
	}	

.popup-container {
	width: 50%;
	position: relative;
	margin: 20% auto;
	padding: 30px 50px;
	background-color: #fafafa;
	color: #333;
	border-radius: 3px;
	}
@media only screen and (max-width: 799px){
	.popup-container {
		width: 95%;
		}
	}	
a.popup-close {
	position: absolute;
	top: 3px;
	right: 3px;
	background-color: #333;
	padding: 7px 10px;
	font-size: 20px;
	font-weight: bold;
	font-family: Arial, sans-serif;
	text-decoration: none;
	line-height: 1;
	color: #fefefe;
	border: 1px solid #fefefe;
	border-radius: 50%;
	}
a.popup-close:hover {
	color: #fff;
	background-color: #000;
	border: 1px solid #000;
	}

Hikin' Mike · June 18, 2015

To add, you can see it live in my Smugmug Customization page: http://gallery.imagesinthebackcountry.com/Smugmug-customization/Custom-EU-Popup

Lille Ulven · June 19, 2015

That's looking really good, Hikin' Mike. I like your policy text too - still looking for one for my own site...

Hikin' Mike · June 19, 2015

Lille Ulven wrote: »

That's looking really good, Hikin' Mike. I like your policy text too - still looking for one for my own site...

Thanks! I technically don't need a privacy policy, but I added one recently. I pretty much copied (with permission) from WordPress (I use WP).

Donlivix · June 19, 2015

Hikin' Mike wrote: »

Try doing this:

HTML
[html]
<div class="popup-wrapper" id="popup">
<div class="popup-container">
<p>This website uses cookies to make sure your visit is as awesome as possible. Continuing to browse this website, you agree to our use of cookies. To find out more about it see our <a class="privacy-policy" href="http://www.valeriolivigni.com/Privacy-Policy/n-VvbJH5" target="_blank" >Privacy Policy</a></p>
<a class="popup-close" href="#popup">X</a>
</div>
</div>
[/html]CSS:

/**
* Custom EU Pop-up 
*/

.sm-eu-cookie-message {
    display: none;
    }

@-webkit-keyframes autopopup {
	from {
		opacity: 0;
		margin-top: -200px;
	}
	to {
		opacity: 1;
	}
}
@-moz-keyframes autopopup {
	from {
		opacity: 0;
		margin-top: -200px;
	}
	to {
		opacity: 1;
	}
}
@keyframes autopopup {
	from {
		opacity: 0;
		margin-top: -200px;
	}
	to {
		opacity: 1;
	}
}

a.popup-link {
    padding: 17px 0;
    text-align: center;
    margin: 10% auto;
    position: relative;
    width: 300px;
    color: #fff;
    text-decoration: none;
    background-color: #FFBA00;
    border-radius: 3px;
    box-shadow: 0 5px 0px 0px #eea900;
    display: block;
    }    
a.popup-link:hover {
    background-color: #ff9900;
    box-shadow: 0 3px 0px 0px #eea900;
    -webkit-transition: all 1s;
       -moz-transition: all 1s;
            transition: all 1s;
    }

#popup {
    background-color: rgba( 0, 0, 0, 0.7 );
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    -webkit-animation: autopopup 2s;
       -moz-animation: autopopup 2s;
            animation: autopopup 2s;
    }    
#popup:target {
    -webkit-transition: all 1s;
       -moz-transition: all 1s;
            transition: all 1s;
    opacity: 0;
    visibility: hidden;
    }
    
@media only screen and (max-width: 799px){
    .popup-container {
        width: 95%;
        }
    }
.popup-container {
    width: 50%;
    position: relative;
    margin: 20% auto;
    padding: 30px 50px;
    background-color: #fafafa;
    color: #333;
    border-radius: 3px;
    }    
a.popup-close {
    position: absolute;
    top: 3px;
    right: 3px;
    background-color: #333;
    padding: 7px 10px;
    font-size: 20px;
    text-decoration: none;
    line-height: 1;
    color: #fff;
    }

Thanks a lot Mike, I truly appreciated your time and efforts: it is the first time I got such piece of advice from the day I start asking a solution for this problem here.

I tried your code but there's a big problem with it: it's impossible to close the cookie banner clicking on X or wherever you want and so it keeps floating on your pages.

As far as I know the X closing button is another Javascript question, which cannot be applied here as SmugMug doesn't like JSqueries.

Hopefully somebody can complete what we started with a definitive suggestion.

Have a nice day and a great weekend
Valerio

Hikin' Mike · June 19, 2015

Donlivix wrote: »

Thanks a lot Mike, I truly appreciated your time and efforts: it is the first time I got such piece of advice from the day I start asking a solution for this problem here.

I tried your code but there's a big problem with it: it's impossible to close the cookie banner clicking on X or wherever you want and so it keeps floating on your pages.

As far as I know the X closing button is another Javascript question, which cannot be applied here as SmugMug doesn't like JSqueries.

Hopefully somebody can complete what we started with a definitive suggestion.

Have a nice day and a great weekend
Valerio

Do you have a link to the page that shows the popup?

Donlivix · June 19, 2015

Hikin' Mike wrote: »

Do you have a link to the page that shows the popup?

Mine works fine: http://gallery.imagesinthebackcountry.com/Smugmug-customization/Custom-EU-Popup.

'Course! http://www.valeriolivigni.com/

Hikin' Mike · June 19, 2015

It looks like it should work. I did change the code above after you used it, but it was only appearance stuff. The only thing different from your site and my page is you are using a slideshow and I'm not. That shouldn't matter. Can you create a testing page and post that here? I'm going to be going to bed shortly, so if I'm off-line, I'll take a look in the morning.

banner for new EU law about cookies

Comments