Cookie Banner

**GK User** Tue May 21, 2013 10:50 am

Dear Support,

I am using the Games News template for a new site design, but I decided I did not want to use the standard Cookie law plugin (enabled in the template configuration settings). Instead I wanted to emulate the cookie banner that you use on your own site (the red banner with the following message.."GavickPro website uses cookies. By continuing to use this website, you are giving consent to cookies being used. For more information visit our Cookie policy.".

Taking a lead from a forum post via the Word press section https://www.gavick.com/forums/simplicit ... nt#p119030

I was able to add the following CSS code to my Override.css file...

Code: Select all: /* Cookie Law */ #gk-cookie-law { background: #E55E48; bottom: 0; color: #fff; font: 400 16px/52px 'Open Sans',sans-serif; height: 52px; left: 0; margin: 0!important; position: fixed; text-align: center; width: 100%; z-index: 10001; } #gk-cookie-law span { display: inline-block; max-width: 90%; } #gk-cookie-law a { color: #fff; font-weight: 600; text-decoration: underline} #gk-cookie-law a:hover { color: #222} #gk-cookie-law a.gk-cookie-law-close { background: #c33c26; color: #fff; display: block; float: right; font-size: 28px; font-weight: bold; height: 52px; line-height: 52px; width: 52px;text-decoration: none} #gk-cookie-law a.gk-cookie-law-close:active, #gk-cookie-law a.gk-cookie-law-close:focus, #gk-cookie-law a.gk-cookie-law-close:hover { background: #282828; } @media (max-width: 1280px) { #gk-cookie-law { font-size: 13px!important; } } @media (max-width: 1050px) { #gk-cookie-law { font-size: 12px!important; line-height: 26px!important; } } @media (max-width: 620px) { #gk-cookie-law { font-size: 11px!important; line-height: 18px!important; } #gk-cookie-law span { max-width: 80%; } } @media (max-width: 400px) { #gk-cookie-law { font-size: 10px!important; line-height: 13px!important; } }

And the HTML code I added to the default.php file (templates/gk_gamenews/layouts/) - and placed this under the header option.

Code: Select all: <head> <p id="gk-cookie-law"><span>Crowdedbrain's website uses cookies. By continuing to use this website, you are giving consent to cookies being used. For more information visit our <a href="/uncategorised/cookies.html">Cookie policy.</a></span> <a href="#close" class="gk-cookie-law-close">×</a></p> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" /> <?php if($this->API->get('rwd', 1)) : ?> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2.0"> <?php else : ?> <meta name="viewport" content="width=<?php echo $this->API->get('template_width', 1020)+80 ?>"> <?php endif; ?> <jdoc:include type="head" /> <?php $this->layout->loadBlock('head'); ?> <?php $this->layout->loadBlock('cookielaw'); ?> </head>

The banner displays fine and the link to the cookie policy page likewise. However the problem is the close button. When I click on the close button it does nothing (where as on your site it closes the page and the banner disappears). I've tried to change the button url from #close to point to a physical link on my site and while this works the banner keeps popping up.

I'm assuming this is because the cookie is not being set.

So my question is what I am missing? With the Game News template is there any other piece of code I need to add to the above code so that when the close button is pressed it will save a cookie and remove the banner?

Thanks for your time..

Brett

**GK User** Tue May 21, 2013 11:50 am

Hi,
for my small projects I used small code - just one line see below, Maybe you can customize to work also for you.

1) Add this line in <HEAD> section of template

Code: Select all: <script type="text/javascript" src="CookieRules.js"></script>

2) Create a CookieRules.js file and put it on root folder
Inside I have all content,

Code: Select all: function acceptationRulesCookie() {createRulesCookie();getRulesElement().style.display = 'none';} function createRulesCookie(){var date=new Date();date.setTime(date.getTime()+(365*24*60*60*1000));var expires="; expires="+date.toGMTString();document.cookie="CookieRules=accepted"+expires+"; path=/";} function getRulesCookie(){var nameEQ="CookieRules=";var ca=document.cookie.split(';');for(var i=0; i < ca.length; i++){var c=ca[i];while (c.charAt(0)==' ') c=c.substring(1,c.length);if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);}return '';} function getRulesElement() {with (document) var element = getElementById ? getElementById('CookieRules') : all ? all['CookieRules'] : layer['CookieRules'];if(element == null) ; else if(!element.style) element.style = element; return element;} if (getRulesCookie()!='accepted') {document.writeln('<div id="CookieRules" style="padding: 10px; position: fixed; top:80%;left:0; width:100%;background: #fff;z-index: 99999999; border: 1px solid #E3E3E3;filter:alpha(opacity=90); opacity:0.9;color:#999;"><div style="width: 900px; margin: 0 auto; position: relative;"><a style="float:right; color: #000; text-decoration:none;cursor:pointer;" onClick="acceptationRulesCookie();"><span style="color:red">accept [X]</span></a><h1 style="font-size: 15px; color: #242424; margin: 0; padding: 0;width:600px;">Cookie Politics</h1><p style="font-size: 11px; color: #1A1A1A; margin: 5px 0; padding: 0;"> ............bla bla bla..........</p></div></div>');}

Of course you should fight with css or leave my style. Life should be easy

p.s.
By the way you forgot about cookie js (when you tried to add your cookie banner)

**GK User** Tue May 21, 2013 11:54 am

You are missing a javascript that supports this banner.
Take a look at file:
https://static.gavick.com/templates/gk_ ... .5.2013.js

Code: Select all: // Cookie Law window.addEvent('domready', function() { if(document.getElement('#gk-cookie-law')) { document.getElement('#gk-cookie-law').getElements('a').each(function(el) { el.addEvent('click', function(e) { // stop propagation and prevent default action e.stop(); // for both links if(e.target.getProperty('href') == '#close') { Cookie.write('gk-cookie-law', '1', { duration: 365, path: '/' }); document.getElement('#gk-cookie-law').dispose(); } else { Cookie.write('gk-cookie-law', '1', { duration: 365, path: '/' }); window.location.href = e.target.getProperty('href') } }); }); } });

this parts closes banner and sets cookie.

Beside that there is still a part of php code that checks if cookie is set and then displays (or doesnt) the block.
I would suggest to redesign the plugin that is already in template instead of trying to bult it from scratch.

**GK User** Tue May 21, 2013 12:29 pm

Thanks for all your help guys, I think it may be wise to edit the existing Cookie law plugin.

I was going to start here templates/gk_gamenews/layouts/blocks/cookielaw.php

And then change the source .js file it points at to a local one and then modify the php and launguage file in this location...

/language/en-GB/en-GB.tpl_gk_gamenews.ini which seems to have the text used for the Cookie.

Do you think the above is a sound move?

Brett

**GK User** Tue May 21, 2013 12:36 pm

It should work well. If your site is not multilanguage, You could skip language files and enter text directly to cookielaw.php file.
If You will have any problems, please feel free to ask questions. We will try to help You as much as we can

.

**GK User** Tue May 21, 2013 5:39 pm

You can always insert module on the bottom of website with info, without any [x] - with just one line of text with link to full article. This is also good solution (also multilingual) but not for all , before you have to ask client about opinion and check your local cookies law. This is good because you don't need any jQuery to work and it's full responsible. :geek:

**GK User** Tue May 21, 2013 8:23 pm

Thanks again folks for your help..

I spent all day trying out both solutions but I ran into problems - mainly from a responsive layout point of view.

I.e. I could get it to look ok on one resolution but not on the other.

This was as far as I got with the js file (note I added a html link option)..

Code: Select all: function acceptationRulesCookie() {createRulesCookie();getRulesElement().style.display = 'none';} function createRulesCookie(){var date=new Date();date.setTime(date.getTime()+(365*24*60*60*1000));var expires="; expires="+date.toGMTString();document.cookie="CookieRules=accepted"+expires+"; path=/";} function getRulesCookie(){var nameEQ="CookieRules=";var ca=document.cookie.split(';');for(var i=0; i < ca.length; i++){var c=ca[i];while (c.charAt(0)==' ') c=c.substring(1,c.length);if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);}return '';} function getRulesElement() {with (document) var element = getElementById ? getElementById('CookieRules') : all ? all['CookieRules'] : layer['CookieRules'];if(element == null) ; else if(!element.style) element.style = element; return element;} if (getRulesCookie()!='accepted') {document.writeln('<div id="CookieRules" style="padding: 10px; position: fixed; top:87%;left:0; width:100%; height:auto; background: #fff; z-index: 10001; border: 1px solid #E3E3E3;filter:alpha(opacity=90); opacity:0.9;color:#999;"><div style="width: 100%; height: auto; margin: 0 auto; position: relative;"><h1 style="font-size: 15px; color: #242424; margin: 0; padding: 0;width:auto;">Crowdedbrain uses Cookies<a href="/Newsite/uncategorised/cookies.html"> More Info</a><a style="color: #000; text-decoration:none;cursor:pointer;" onClick="acceptationRulesCookie();"><span style="font-size: 15px; color:red"> CLOSE</span></a></h1><p style="font-size: 11px; color: #1A1A1A; margin: 5px 0; padding: 0;"> </p></div></div>');}

I also experimented with @media max-width: code but just couldn't work out the right way of doing it.

In the end I think I am going to go down the module route as this should fit in with the responsive nature of the template. Thanks though for all your help though guys.

Brett