banner for new EU law about cookies

Hikin' Mike

I just checked it again. While your site was loading, the popup 'X' worked until it finished loading. So it seems like the slideshow is the culprit.

Donlivix

Hikin' Mike wrote: »

I just checked it again. While your site was loading, the popup 'X' worked until it finished loading. So it seems like the slideshow is the culprit.

True, that's exactly what happens. I don't know if somebody has a clue now, without making me choose between a cookie message and a slideshow

Hikin' Mike

This should take care of this. Add this in red:

#popup {
    background-color: rgba( 0, 0, 0, 0.7 );
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    [COLOR=Red][B]z-index: 100;[/B][/COLOR]
    -webkit-animation: autopopup 2s;
       -moz-animation: autopopup 2s;
            animation: autopopup 2s;
    }    

Donlivix

Hikin' Mike wrote: »

This should take care of this. Add this in red:

#popup {
    background-color: rgba( 0, 0, 0, 0.7 );
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    [COLOR=Red][B]z-index: 100;[/B][/COLOR]
    -webkit-animation: autopopup 2s;
       -moz-animation: autopopup 2s;
            animation: autopopup 2s;
    }    

A step ahead
You can close the banner now but every time you change page (clicking on the high menu) the banner appears again

Hikin' Mike

Donlivix wrote: »

A step ahead
You can close the banner now but every time you change page (clicking on the high menu) the banner appears again

Looks like you have your HTML/CSS block set for 'Site-wide' and not 'Just This Page'.

It's getting late, so I'm off to bed. I'll check in when I get up.

Donlivix

Admin dashboard blocked
My admin page don't let me open the HTML/CSS block anymore now as the banner is superimposed to commands.
Please let me know what I can do

---

Sorry for this panic attack: I got into my dashboard in the end so, please, don't consider this post

Donlivix

Hikin' Mike wrote: »

Looks like you have your HTML/CSS block set for 'Site-wide' and not 'Just This Page'.

It's getting late, so I'm off to bed. I'll check in when I get up.

Yep, thats what I did 'cause you should show the banner at visitor first visit, no matters which is the arrival landing page.
At this point I'll wait for you: if you can find a solution I'll try to apply it, otherwise I'll put your code just onto my homepage.

Sleep tight Mike

Donlivix

Hikin' Mike wrote: »

Looks like you have your HTML/CSS block set for 'Site-wide' and not 'Just This Page'.

It's getting late, so I'm off to bed. I'll check in when I get up.

In addition I must say that even on your website the banner appears each time you come back to your Custom EU Popup page while it shouldn't for not being annoying to visitors (especially if it is a popular page); it shouldn't till the visitor leaves the website in my opinion.

Hikin' Mike

I'm up.

The code I posted is a CSS popup and I don't know how to set a cookie so it only displays once. I can see if I can find a solution, but I kind of doubt it.

Donlivix

Hikin' Mike wrote: »

I'm up.

The code I posted is a CSS popup and I don't know how to set a cookie so it only displays once. I can see if I can find a solution, but I kind of doubt it.

Good morning Mike

Smugmug has adopted a banner that works fine from this specific point of view. You can see it on my website as I installed it again: http://www.valeriolivigni.com. Until you don't close your browser cancelling the cache, it will be shown just once.

Hikin' Mike

Donlivix wrote: »

Good morning Mike

Smugmug has adopted a banner that works fine from this specific point of view. You can see it on my website as I installed it again: http://www.valeriolivigni.com. Until you don't close your browser cancelling the cache, it will be shown just once.

I'll have to take your word for it because I don't see it. I assume this is only for people from Europe, and since I live in California, I don't see it.

Glad to see that Smugmug got it fixed. I figured they would...it was their "problem" and not yours.

Donlivix

Hikin' Mike wrote: »

I'll have to take your word for it because I don't see it. I assume this is only for people from Europe, and since I live in California, I don't see it.

Glad to see that Smugmug got it fixed. I figured they would...it was their "problem" and not yours.

You're right, you cannot see it unless you don't use a free VPN like Tunnelbear

As for SmugMug, they didn't get it fixed at all, as it is not compliant with European Law: the cookie banner must have a link to the website owner's privacy policy page and not a SmugMug page as it happens now and moreover it should be customizable by users, at least those who want the banner written in their native language.

Your banner is much better as it is customizable in text and link; it just misses a cookie to make the banner invisible after visitor first visit. In other words a cookie to cancel the cookie banner

Donlivix

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&quot; 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;
	}	

Hi Mike

You should change your code as follow otherwise mobile devices won't be able to show your banner completely but just a part:

}
@media only screen and (max-width: 799px){
.popup-container {
width: auto;
}

You can see it perfectly working here. Well it is just on my home page and doesn't disappear whenever you come back there, but about these two problems I opened a ticket directly with SmugMug. IMHO they should add two new fields into our Account Setting panel where people can customize text and link, a guy living in Finland would write his banner in Finnish I guess

Have a glorious Sunday
Cheers
Valerio

Hikin' Mike

Donlivix wrote: »

Hi Mike

You should change your code as follow otherwise mobile devices won't be able to show your banner completely but just a part:

}
@media only screen and (max-width: 799px){
.popup-container {
width: auto;
}

You can see it perfectly working here. Well it is just on my home page and doesn't disappear whenever you come back there, but about these two problems I opened a ticket directly with SmugMug. IMHO they should add two new fields into our Account Setting panel where people can customize text and link, a guy living in Finland would write his banner in Finnish I guess

Have a glorious Sunday
Cheers
Valerio

Thanks, I don't own a mobile, so I just guessed. I removed the media query and changed the margin 'popup-container':

.popup-container {
    position: relative;
    [COLOR=Red][B]margin: 25% 5%;[/B][/COLOR]
    padding: 30px 50px;
    background-color: #fafafa;
    color: #333;
    border-radius: 3px;
    }    

Donlivix

Hikin' Mike wrote: »

Thanks, I don't own a mobile, so I just guessed. I removed the media query and changed the margin 'popup-container':

.popup-container {
    position: relative;
    [COLOR=Red][B]margin: 25% 5%;[/B][/COLOR]
    padding: 30px 50px;
    background-color: #fafafa;
    color: #333;
    border-radius: 3px;
    }    

Hi Mike, just a last thing before westing time: do you think it would be possible to get this banner bilingual? More precisely I'd like to know if using a SmugMug HTML/CSS block I can manage a couple of versions of this banner letting my website recognize automatically the visitor language.

I read something on the web and it looks like we'd need to write it in php.

Have a great day
Valerio

Hikin' Mike

Donlivix wrote: »

Hi Mike, just a last thing before westing time: do you think it would be possible to get this banner bilingual? More precisely I'd like to know if using a SmugMug HTML/CSS block I can manage a couple of versions of this banner letting my website recognize automatically the visitor language.

I read something on the web and it looks like we'd need to write it in php.

Have a great day
Valerio

The only thing I can think of is to just add your other language(s) below the English version.

Lille Ulven

tomnovy wrote: »

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

tomnovy you don't happen to have found a solution for this yet? It still does not work - tried private sites from both chrome & safari from home and work...no luck as long as I am in Norway ;-(

crisnet21

Hi all
I'm trying to add a cookies advice on my site.
I tried to add the css code in THEME > ADVANCED > CSS but nothing's happened, even after deleting browser's history. Where I have to paste the css and html code? The tutorial's page posted by Hikin' Mike doesn't work anymore.
Thanks and sorry for my bad english.

crisnet21

Ok, I got it by adding the HTML block, not CSS.
But I would have just a discreet line on the top of the page, not a floating popup. If someone is able to help me I'd be grateful.
Thanks!

Hikin' Mike

crisnet21 wrote: »

Hi all
I'm trying to add a cookies advice on my site.
I tried to add the css code in THEME > ADVANCED > CSS but nothing's happened, even after deleting browser's history. Where I have to paste the css and html code? The tutorial's page posted by Hikin' Mike doesn't work anymore.
Thanks and sorry for my bad english.

I fixed the link.

crisnet21

Thank you Mike!
Could you help me to create just a discreet banner on the top of the page rather than a floating popup?
Thanks a lot, you are very helpful for us!

Hikin' Mike

crisnet21 wrote: »

Thank you Mike!
Could you help me to create just a discreet banner on the top of the page rather than a floating popup?
Thanks a lot, you are very helpful for us!

Why can't you use a HTML block on the page(s) and add something like this:

<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="url-here" target="_blank" >Privacy Policy</a></p>
</div>

You'll have to edit the privacy page URL.

crisnet21

Thank you Mike, that's great.
Just another question. How can I add an "X" on the right of the message to close the popup?

Hikin' Mike

crisnet21 wrote: »

Thank you Mike, that's great.
Just another question. How can I add an "X" on the right of the message to close the popup?

You can't unless you use the pop-up.

crisnet21

But I see many sites that has the pop-up on the top with the X close button o_O
Do you think it's possible including a static popup on the top of the page?

Also, is there a way to set this popup only on the top of the homepage? If I choose "Entire site" I can set it on the top, but if I choose "Homepage" I'm able to add the announce only under the site's title, not on the top.

Thanksssss

Hikin' Mike

crisnet21 wrote: »

But I see many sites that has the pop-up on the top with the X close button o_O
Do you think it's possible including a static popup on the top of the page?

Those pop-ups generally use Javascript and the new Smugmug doesn't allow Javascript.

crisnet21 wrote: »

Also, is there a way to set this popup only on the top of the homepage? If I choose "Entire site" I can set it on the top, but if I choose "Homepage" I'm able to add the announce only under the site's title, not on the top.

Thanksssss

You should be able to add it to any single page. That's what I did on the demo. Didn't try it on my home page because I don't need it.

crisnet21

Thank you Mike

But it's possible to modify the script of the floating popup you posted in order to set a static popup on the top of the page? I would eliminate just the "floating"...

Hikin' Mike

crisnet21 wrote: »

Thank you Mike

But it's possible to modify the script of the floating popup you posted in order to set a static popup on the top of the page? I would eliminate just the "floating"...

Not that I'm aware of, sorry.

crisnet21

I published the floating popup but now when I click on "Content and design" the pop-up appears, the X doesn't work and I'm not able to modify the content of the homepage!

Also, the pop-up appears everytime I come back on the homepage (working well, including the X button), but I'd like to be shown just once while I'll delete the browser's history.

Hikin' Mike

crisnet21 wrote: »

Also, the pop-up appears everytime I come back on the homepage (working well, including the X button), but I'd like to be shown just once while I'll delete the browser's history.

There is no way to do that. Unfortunately each time you visit the page, you're going to get that. Probably why I hid the example....it really doesn't work well.