Community @ The Turning Gate

Support community for TTG plugins and products.

NOTICE

The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.

This forum is now closed, and exists here as a read-only archive.

  • New user registrations are disabled.
  • Users cannot create new topics.
  • Users cannot reply to existing topics.

You are not logged in.

#1 2014-08-12 19:14:53

tomowensphoto
Member
From: Suffolk
Registered: 2012-11-21
Posts: 321
Website

Global Cookie Control

Hi,
I have the basic site working in CE4. This morning I have manged to implement a numpty friendly cookie control in my WordPress page which if the whole site was built with WordPress would have the privacy bar appear (apparently)http://tomowens.openpoint.co.uk/blog/.
The script which is visible on viewing the source of this page in theory ought to be able to be set up I would have though in the phplugins file .
I am treading where I expect I ought not to at this stage but is it possible to have this bar pop up on all pages using the plugins file? I tried Rod's suggestion last night but that did not work when I deleted to two line that say delete this line to activate it and when I uploaded thi sphplugins file the site did not work. Stage, Pages and Wordpress are all sharing resources and php is enabled.
the script is
<script type="text/javascript">
            //<![CDATA[
            jQuery(document).ready(function() {
               
                // Edit 09/05: remove globals and package into Object Literal, and removed the debug function
                cli_show_cookiebar({
                    html: '<div id="cookie-law-info-bar"><span>This website uses cookies to improve your experience. We\'ll assume you\'re ok with this, but you can opt-out if you wish.<a href=\"#\" id=\"cookie_action_close_header\"  class=\"medium cli-plugin-button cli-plugin-main-button\" >Accept</a> <a href=\"http://tomowens.openpoint.co.uk/cookies\" id=\"CONSTANT_OPEN_URL\" target=\"_new\"  class=\"cli-plugin-main-link\"  >Read More</a></span></div><div id="cookie-law-info-again"><span id="cookie_hdr_showagain">Privacy & Cookies Policy</span></div>',
                    settings: '{"animate_speed_hide":"500","animate_speed_show":"500","background":"#fff","border":"#444","border_on":true,"button_1_button_colour":"#000","button_1_button_hover":"#000000","button_1_link_colour":"#fff","button_1_as_button":true,"button_2_button_colour":"#333","button_2_button_hover":"#292929","button_2_link_colour":"#444","button_2_as_button":false,"font_family":"Helvetica, sans-serif","notify_animate_hide":true,"notify_animate_show":false,"notify_div_id":"#cookie-law-info-bar","notify_position_horizontal":"right","notify_position_vertical":"bottom","showagain_tab":true,"showagain_background":"#fff","showagain_border":"#000","showagain_div_id":"#cookie-law-info-again","showagain_x_position":"100px","text":"#000","show_once_yn":true,"show_once":"10000"}'
                });
               
            });
            //]]>
        </script>
Thanks,
TomO


Regards,
TomO
Just a simple photographer
Live site at http://tomowens.openpoint.co.uk/

Offline

#2 2014-08-12 21:10:15

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,830
Website

Re: Global Cookie Control

but that did not work when I deleted to two line that say delete this line to activate it and when I uploaded thi sphplugins file the site did not work

Could be a syntax error in the way you inserted the code.
But that script creates html elements that will be shown on the page. So you wouldn't want to put it in the <head> element anyway. Maybe ttg_canvas_top or ttg_canvas_bottom. Or even the footer. See here for other options.
I think you'll need an echo statement before the script and you'll need to be sure to close it afterwards:
echo '
....your script....
';

I don't know enough yet about jQuery to tell you if it will work in a TTG scenario or not.

Last edited by rod barbee (2014-08-12 21:12:14)


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site

Offline

#3 2014-08-12 21:25:21

tomowensphoto
Member
From: Suffolk
Registered: 2012-11-21
Posts: 321
Website

Re: Global Cookie Control

Thanks Rod,
I'll try the footer as that is where I chose to configure the code when I installed the plugin to Wordpress.
I have written to the author of the code asking him also about site wide deployment. I'll let you know how I get on.
Regards,
TomO

Last edited by tomowensphoto (2014-08-12 21:25:37)


Regards,
TomO
Just a simple photographer
Live site at http://tomowens.openpoint.co.uk/

Offline

#4 2014-08-13 00:54:44

tomowensphoto
Member
From: Suffolk
Registered: 2012-11-21
Posts: 321
Website

Re: Global Cookie Control

Thanks Rod,
I tried that, but it broke the site so back to not messing with the PHplugins. The Cookie Law Info plugin author has got back to me saying that the code he wrote is for Wordpress only so apart from re-building the site in WP I'll just leave it alone for the time being as I have shedloads of other stuff I should be doing. At least the control is working on the blog page and the privacy page created with Stage is working. Thanks for trying and to Lofty too.
Regards,
TomO


Regards,
TomO
Just a simple photographer
Live site at http://tomowens.openpoint.co.uk/

Offline

#5 2014-08-13 02:24:40

Daniel Leu
Moderator
Registered: 2012-10-11
Posts: 1,624
Website

Re: Global Cookie Control

Hi Tom,

There are several issues at work here:

  • you need to escape the single quotes and the already escaped single quotes (' becomes \' and \' becomes \\\')

  • cookielawinfo.js is needed

  • cookielaw custom css is needed

Here is the code that works for me:

function ttg_canvas_bottom(  $style, $path){
    echo '
        <script type="text/javascript" src="http://tomowens.openpoint.co.uk/blog/wp-content/plugins/cookie-law-info/js/cookielawinfo.js?ver=3.9.2"></script>
        <script type="text/javascript">
            //<![CDATA[
            jQuery(document).ready(function() {
                cli_show_cookiebar({
                    html: \'<div id="cookie-law-info-bar"><span>This website uses cookies to improve your experience. We\\\'ll assume you\\\'re ok with this, but you can opt-out if you wish.<a href=\"#\" id=\"cookie_action_close_header\"  class=\"medium cli-plugin-button cli-plugin-main-button\" >Accept</a> <a href=\"http://tomowens.openpoint.co.uk/cookies\" id=\"CONSTANT_OPEN_URL\" target=\"_new\"  class=\"cli-plugin-main-link\"  >Read More</a></span></div><div id="cookie-law-info-again"><span id="cookie_hdr_showagain">Privacy & Cookies Policy</span></div>\',
                    settings: \'{"animate_speed_hide":"500","animate_speed_show":"500","background":"#fff","border":"#444","border_on":true,"button_1_button_colour":"#000","button_1_button_hover":"#000000","button_1_link_colour":"#fff","button_1_as_button":true,"button_2_button_colour":"#333","button_2_button_hover":"#292929","button_2_link_colour":"#444","button_2_as_button":false,"font_family":"Helvetica, sans-serif","notify_animate_hide":true,"notify_animate_show":false,"notify_div_id":"#cookie-law-info-bar","notify_position_horizontal":"right","notify_position_vertical":"bottom","showagain_tab":true,"showagain_background":"#fff","showagain_border":"#000","showagain_div_id":"#cookie-law-info-again","showagain_x_position":"100px","text":"#000","show_once_yn":true,"show_once":"10000"}\'
                });

            });
            //]]>
        </script>
    ';
}

You might want to fiddle a bit with the position for the notice using custom CSS so it doesn't interfere with the standard TGG layout.

Cheers

Last edited by Daniel Leu (2014-08-13 02:25:14)


Daniel Leu | Photography   
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com

Offline

#6 2014-08-13 03:37:10

tomowensphoto
Member
From: Suffolk
Registered: 2012-11-21
Posts: 321
Website

Re: Global Cookie Control

Thanks Daniel,
I'll take a look at this.
Regards,
TomO


Regards,
TomO
Just a simple photographer
Live site at http://tomowens.openpoint.co.uk/

Offline

#7 2014-08-13 03:59:50

tomowensphoto
Member
From: Suffolk
Registered: 2012-11-21
Posts: 321
Website

Re: Global Cookie Control

Thanks a million Daniel,
I 'll take a look at the positioning to try and fix that on the non-blog pages and I'll try and analyze what you did to make it work.
Regards,
TomO


Regards,
TomO
Just a simple photographer
Live site at http://tomowens.openpoint.co.uk/

Offline

#8 2014-08-14 20:03:16

tomowensphoto
Member
From: Suffolk
Registered: 2012-11-21
Posts: 321
Website

Re: Global Cookie Control

Thanks for your help getting to appear on my other pages Daniel. After a frustrating day yesterday I gave up trying to get the banner to display the same way as it does on the Blog page. I guess that I ought to have told myself a while ago that going 'under the bonnet' is not my thing. Without an intensive training session I doubt I'll get the hang of this stuff.
The original Cookie Law Info has CSS it calls from wp-content/plugins/cookie-law-info/css/cli-style.css
I presume that this is the code that sets the style of the bar and how it behaves
#cookie-law-info-bar {
    border: 0;
    font-size: 10pt;
    margin: 0 auto;
    padding: 5px 0;
    text-align: center;
    width: 100%;
    z-index: 9999;
}
#cookie-law-info-again {
    font-size: 10pt;
    margin: 0;
    padding: 2px 10px;
    text-align: center;
    z-index: 9999;
    cursor: pointer;
}
#cookie-law-info-bar span {
    vertical-align: middle;
}
/** Buttons (http://papermashup.com/demos/css-buttons) */
.cli-plugin-button, .cli-plugin-button:visited {
    background: #222 url('../images/overlay.png') repeat-x;
    display: inline-block;
    padding: 5px 10px 6px;
    color: #fff;
    text-decoration: none;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer;
    margin: auto 10px;
}
.cli-plugin-button:hover {
    background-color: #111;
    color: #fff;
}
.cli-plugin-button:active {
    top: 1px;
}
.small.cli-plugin-button, .small.cli-plugin-button:visited {
    font-size: 11px;
}
.cli-plugin-button, .cli-plugin-button:visited,
    .medium.cli-plugin-button, .medium.cli-plugin-button:visited {
    font-size: 13px;
    font-weight: bold;
    line-height: 1;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
.large.cli-plugin-button, .large.cli-plugin-button:visited {
    font-size: 14px;
    padding: 8px 14px 9px;
}
.super.cli-plugin-button, .super.cli-plugin-button:visited {
    font-size: 34px;
    padding: 8px 14px 9px;
}
.pink.cli-plugin-button, .magenta.cli-plugin-button:visited {
    background-color: #e22092;
}
.pink.cli-plugin-button:hover {
    background-color: #c81e82;
}
.green.cli-plugin-button, .green.cli-plugin-button:visited {
    background-color: #91bd09;
}
.green.cli-plugin-button:hover {
    background-color: #749a02;
}
.red.cli-plugin-button, .red.cli-plugin-button:visited {
    background-color: #e62727;
}
.red.cli-plugin-button:hover {
    background-color: #cf2525;
}
.orange.cli-plugin-button, .orange.cli-plugin-button:visited {
    background-color: #ff5c00;
}
.orange.cli-plugin-button:hover {
    background-color: #d45500;
}
.blue.cli-plugin-button, .blue.cli-plugin-button:visited {
    background-color: #2981e4;
}
.blue.cli-plugin-button:hover {
    background-color: #2575cf;
}
.yellow.cli-plugin-button, .yellow.cli-plugin-button:visited {
    background-color: #ffb515;
}
.yellow.cli-plugin-button:hover {
    background-color: #fc9200;
}

The code you gave me almost works in mobile mode but not on every page for some strange reason so it cannot be far off being right.


Regards,
TomO
Just a simple photographer
Live site at http://tomowens.openpoint.co.uk/

Offline

#9 2014-08-14 23:59:01

Daniel Leu
Moderator
Registered: 2012-10-11
Posts: 1,624
Website

Re: Global Cookie Control

Hi Tom,

Finally I found why the small pop-up hides behind the footer. I tried it before but then I used the wrong element... bummer.

You need to add 'z-index: 1;' to #cookie-law-info-again to move it upfront. On mobile I noticed, that often the info notice showed instead of the small pop-up.

Please add following to phplugins/css/custom.css (this assumes that you already have custom.css enabled):

#cookie-law-info-again {
   z-index: 1;
}

#cookie-law-info {
   display: none;
}

If you want to move it a bit out of the way, there are two assignments in the original javascript code:

showagain_x_position: 100px
showagain_x_position: right

Changing it to 10px moved it to the side without being blocked by the scrollbar. Or moving to the left works too.

Have fun!


Daniel Leu | Photography   
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com

Offline

#10 2014-08-15 00:51:07

tomowensphoto
Member
From: Suffolk
Registered: 2012-11-21
Posts: 321
Website

Re: Global Cookie Control

Thanks again Daniel,
I have tried this. There is some difference on the iPAD but the behaviour is the same on the desktop.

This is what the CSS bit of the PHplugins.php file has

// CUSTOM STYLESHEET
// This function implements a custom stylesheet from which users may provide additional page styling or override existing styling set by the plugin
// Edit the custom.css file in /phplugins/css/ to define styles
// Serves as an example of a function being applied globally
function ttg_head_end( $style, $path ) {
    echo '
    <link rel="stylesheet" href="/phplugins/css/custom.css" />
   
   
    ';
} // END

This is the section I stuck in there the other night based on what you sent me.
//This sets the Cookie Control
//
// Serves as an example of a function being applied globally
function ttg_canvas_bottom(  $style, $path){
    echo '
        <script type="text/javascript" src="http://tomowens.openpoint.co.uk/blog/wp-content/plugins/cookie-law-info/js/cookielawinfo.js?ver=3.9.2"></script>
        <script type="text/javascript">
            //<![CDATA[
            jQuery(document).ready(function() {
                cli_show_cookiebar({
                    html: \'<div id="cookie-law-info-bar"><span>This website uses cookies to improve your experience. We\\\'ll assume you\\\'re ok with this, but you can opt-out if you wish.<a href=\"#\" id=\"cookie_action_close_header\"  class=\"medium cli-plugin-button cli-plugin-main-button\" >Accept</a> <a href=\"http://tomowens.openpoint.co.uk/cookies\" id=\"CONSTANT_OPEN_URL\" target=\"_new\"  class=\"cli-plugin-main-link\"  >Read More</a></span></div><div id="cookie-law-info-again"><span id="cookie_hdr_showagain">Privacy & Cookies Policy</span></div>\',
                    settings: \'{"animate_speed_hide":"500","animate_speed_show":"500","background":"#fff","border":"#444","border_on":true,"button_1_button_colour":"#000","button_1_button_hover":"#000000","button_1_link_colour":"#fff","button_1_as_button":true,"button_2_button_colour":"#333","button_2_button_hover":"#292929","button_2_link_colour":"#444","button_2_as_button":false,"font_family":"Helvetica, sans-serif","notify_animate_hide":true,"notify_animate_show":false,"notify_div_id":"#cookie-law-info-bar","notify_position_horizontal":"right","notify_position_vertical":"bottom","showagain_tab":true,"showagain_background":"#fff","showagain_border":"#000","showagain_div_id":"#cookie-law-info-again","showagain_x_position":"100px","text":"#000","show_once_yn":true,"show_once":"10000"}\'
                });

            });
            //]]>
        </script>
    ';
}
   


// This ends the Cookie control


The custom.css file has this in it
/* If your page background-color is red after enabling the PHPlugins function, then you know it's working.
* Delete this after confirmation, because it's hideous :
*/
#cookie-law-info-again {
   z-index: 1;
}

#cookie-law-info {
   display: none;
}

The mobile version displays properly on the info.php page i.e. the small window sits to the bottom right as per the blog page and on clicking it the Bar appears then will disappear at 10 secs leaving the small pop-up. It works properly on the blog page on both mobile and desktop but on the desktop versions, the small pop-up sits where it should but the bar displays to the left and is obscured by the ttg footer instead of floating over it then vanishing as it should.
Have I stuck your code in the right places? Should I have put something in the PHPlugis.php script?
I am really sorry for these numpty questions.
Regards
TomO


Regards,
TomO
Just a simple photographer
Live site at http://tomowens.openpoint.co.uk/

Offline

#11 2014-08-15 00:59:56

Daniel Leu
Moderator
Registered: 2012-10-11
Posts: 1,624
Website

Re: Global Cookie Control

Hi Tom,

Your code looks good and it works on my desktop using Google Chrome. But it looks like your site just went down when I wanted to try it in a different browser.

Cheers
Daniel


Daniel Leu | Photography   
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com

Offline

#12 2014-08-15 01:17:06

tomowensphoto
Member
From: Suffolk
Registered: 2012-11-21
Posts: 321
Website

Re: Global Cookie Control

Hi Daniel,
The site seems to be up and running OK this end although there are major electrical storms whizzing around the country at present.
I'm using Firefox 31.0. I just cleared the cache locally to see if that helped but no. I tried in Safari 7.05 but OI get the same result on the desktop in OSX.
If I drop out of the dark side and try Windows 7 I'll see if it is different.
Regards,
TomO


Regards,
TomO
Just a simple photographer
Live site at http://tomowens.openpoint.co.uk/

Offline

#13 2014-08-15 02:42:50

Daniel Leu
Moderator
Registered: 2012-10-11
Posts: 1,624
Website

Re: Global Cookie Control

Sorry, I misunderstood what you said....

It looks like we have to add the z-index to the notification bar too:

#cookie-law-info-again {
   z-index: 1;
}
#cookie-law-info {
   display: none;
   z-index: 1;
}

Daniel Leu | Photography   
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com

Offline

#14 2014-08-15 04:03:51

tomowensphoto
Member
From: Suffolk
Registered: 2012-11-21
Posts: 321
Website

Re: Global Cookie Control

Hi Daniel,
That did not seem to anything when I changed the custom.css.
The blog page that the plugin was designed for looks like this using Firefox 31.0 blog_page_default.PNG
on clicking the side pop up blog_page_on_click.PNG

The home page or anyother page than the blog page show like this on clicking the pop up home_page_display.PNG

Regards,
TomO


Regards,
TomO
Just a simple photographer
Live site at http://tomowens.openpoint.co.uk/

Offline

#15 2014-08-15 04:30:45

tomowensphoto
Member
From: Suffolk
Registered: 2012-11-21
Posts: 321
Website

Re: Global Cookie Control

Hi Daniel,
SORTED! Thanks for all your help and Rod and Lofty.
The answer was staring straight at me. It just took a while for the penny to drop. No Montepulciano D'Abruzzo tonight so less fuddled.

the custom.css file now just has this
/* If your page background-color is red after enabling the PHPlugins function, then you know it's working.
* Delete this after confirmation, because it's hideous :
*/
#cookie-law-info-bar {
    border: 0;
    font-size: 10pt;
    margin: 0 auto;
    padding: 5px 0;
    text-align: center;
    width: 100%;
    z-index: 9999;
}
#cookie-law-info-again {
    font-size: 10pt;
    margin: 0;
    padding: 2px 10px;
    text-align: center;
    z-index: 9999;
    cursor: pointer;
}
#cookie-law-info-bar span {
    vertical-align: middle;
}

I left the comments in at the top so I know where it came from originally.

I've now got a reasonably compliant site (I think).
Regards,
TomO


Regards,
TomO
Just a simple photographer
Live site at http://tomowens.openpoint.co.uk/

Offline

#16 2014-08-15 05:18:08

lofty
Member
From: UK
Registered: 2012-09-26
Posts: 259
Website

Re: Global Cookie Control

Well done Tom, glad you got it sorted. You'll be doing Navigation next! smile

Offline

#17 2014-08-15 06:31:51

Daniel Leu
Moderator
Registered: 2012-10-11
Posts: 1,624
Website

Re: Global Cookie Control

Great that it works now, Tom!


Daniel Leu | Photography   
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com

Offline

#18 2014-08-15 06:55:40

michilge
Member
From: Sprockhövel, Germany
Registered: 2013-04-15
Posts: 206
Website

Re: Global Cookie Control

Hello Tom,

I'm following this thread and I plan to add a similar cookie/privacy info to my site to.
What puzzles me, is that the banner at the bottom of the page tells that there is a way to opt out, but I can't find this option on Your Cookies-page. Is this still in progress?

Which of the various WP cookie plugins is the one You installed. Richard Ashby's?

Best wishes,
Michael

Offline

#19 2014-08-15 16:38:58

tomowensphoto
Member
From: Suffolk
Registered: 2012-11-21
Posts: 321
Website

Re: Global Cookie Control

Hi Michael,
It is indeed Richard Ashby's plugin https://wordpress.org/plugins/cookie-law-info/.
I can modify the content of the banner from within WordPress but Richard describes this as 'Implied Consent' which represents the ICO latest approach. Now that I have it working on all pages thanks to Rod, Daniel and Lofty, I'll look to the other options for configuration.
I use a similar approach on my top level domain but I use the civicuk code for that. Again it is implied consent and does not block anything.
Hope this helps?
Regards,
TomO


Regards,
TomO
Just a simple photographer
Live site at http://tomowens.openpoint.co.uk/

Offline

#20 2014-08-15 16:42:51

tomowensphoto
Member
From: Suffolk
Registered: 2012-11-21
Posts: 321
Website

Re: Global Cookie Control

Oh, and one other thing. I chose this plugin on account of the simplicity of the design. It does not really clash with the overall look and feel and by leaving the side pop-up visible it at least makes it covert that something or other is lurking beneath the page.
Regards,
TomO


Regards,
TomO
Just a simple photographer
Live site at http://tomowens.openpoint.co.uk/

Offline

#21 2014-08-15 19:41:21

michilge
Member
From: Sprockhövel, Germany
Registered: 2013-04-15
Posts: 206
Website

Re: Global Cookie Control

Hi Tom,

Thank You for sharing Your solution.
I just tripped over the words "but you can opt-out if you wish" in the text.
Inspired by Your topic I installed the cookie-law-info plugin.

Since I have visitor tracking on my pages, I feel particularly responible to offer an opt out possibility.

I have left the standard "Accept" Button to express consent in combination with a link to my disclaimer where I point out that my pages will respect do-not-track settings of visiting browsers and additionally offer a link to a page where users can actively opt out of tracking, while other cookies remain consented.

Next step is to read and understand the way, You already went, to make the infobar on the CE4 Pages outside WP.

BTW: Beautiful foto on Your entry page. I love that stunning blue.

Regards,
Michael

Offline

#22 2014-08-15 20:28:35

tomowensphoto
Member
From: Suffolk
Registered: 2012-11-21
Posts: 321
Website

Re: Global Cookie Control

Thanks Michael,
I'll document the process in the next day or so and share that.
Glad you like my home page photo. I use that on my business cards so people visiting the site having picked up a card know they have landed in the right place. I have, in the past, and I must get back to it, designed and made stained glass windows. When I made this image I had stained glass in mind.
I get through hundreds of business cards at events. Most people pick them up just because they like the colour. Nothing wrong with that in my opinion!
Glad that my struggles to do something about EU cookie law have helped others. This forum is a very friendly place.
Please post a link to your site so that we can see what your finished product looks like.
Regards,
TomO


Regards,
TomO
Just a simple photographer
Live site at http://tomowens.openpoint.co.uk/

Offline

#23 2014-08-15 21:53:51

michilge
Member
From: Sprockhövel, Germany
Registered: 2013-04-15
Posts: 206
Website

Re: Global Cookie Control

Hi Tom,

stained glass, translucency and Yves-Klein-Blue were my instant associations.

My site has just shifted to CE4. You can see it at http://fotos.michilge.de/blog/
I have decided to print my masthead image on cards. The image integrates a functioning QR-Code which will lead to my Site if scanned with a smartphone. It was tricky to create.
My site is rather eclectic, mostly live football photos of our local team.
It's fun not profession.
As You plan a writeup of Your experience I will gladly postpone work on PHPlugins to value Your effort best (and hopfully save some puzzle too). :-)

And yes. I like the friendlness an helpfulness in this forum too.

Cheers,
Michael

Offline

#24 2014-08-15 23:25:28

tomowensphoto
Member
From: Suffolk
Registered: 2012-11-21
Posts: 321
Website

Re: Global Cookie Control

Love the Red Squirrels.
Regards
TomO


Regards,
TomO
Just a simple photographer
Live site at http://tomowens.openpoint.co.uk/

Offline

#25 2014-08-16 00:17:45

tomowensphoto
Member
From: Suffolk
Registered: 2012-11-21
Posts: 321
Website

Re: Global Cookie Control

Hi Michael,
Please see thes instruction as to what I did to make this work site-wide.

Procedure for installing Cookie-Info-Law and integrating it with a CE4TTG site.

My CE4 site existed with pages created in CE4 Pages, Galleries in CE4 Galleries and published on-line using CE4 Publisher. My blog was created in WordPress using CE4 WordPress. SHARED RESOURCES IS TICKED IN EACH OF THE MODULES I USED TO CREATE MY COMPONENTS

The Problem
EU law states that there has to be an explicit statement about cookies in use on EU served websites. The interpretation of the law varies between member states but in the UK the ICO monitors and issues guidance. Recently they lowered the expectation of what webmasters had to do do and the lowest form of compliance is Implied consent.
WordPress is known for cookie usage especially with comments being made in posts so I decided to tackle that first and then see if it would fit with the rest of my site.

Step 1 - Download the Cookie-Law-Info Plugin for WordPress  https://wordpress.org/plugins/cookie-law-info/.

Follow the installation instructions. They are quite simple. I have not created a page with listings of cookies in use. This is an option. I may do that later.
For this plugin to work properly there must be a page with your cookie and privacy staement on your website. I used CE4Stage to create and publish this page (Lofty suggested this). You will configure the Cookie-Law-Info plugin to point at this page if a user clicks on the policy pop-up.

Test that this is working properly before doing anything else.

At this point there is no interference with Phplugins or custom.css.

Step 2

When CE4 exported your pages, a phplugins-sample folder was created.
In order to make the the Cookie-Law-Info plugin work across the other CE4 pages the phplugins.php file needs to be edited and the folder on the webserver where this file resides needs to be renamed from phplugins-sample to phplugins.

Use an appropriate text editor to edit the phplugins file in your export set. Notepad++ is good in Win7 or MOU in OSX.

The following code needs to be added to your phplugins.php file on your local machine. NOTE I have WordPress in the /blog folder hanging off the root of the site. The script below provided by Daniel Leu works for my setup.

function ttg_canvas_bottom(  $style, $path){
    echo '
        <script type="text/javascript" src="http://INSERT THE PATH ON YOUR WEBSERVER TO THIS LOCATION/blog/wp-content/plugins/cookie-law-info/js/cookielawinfo.js?ver=3.9.2"></script>
        <script type="text/javascript">
            //<![CDATA[
            jQuery(document).ready(function() {
                cli_show_cookiebar({
                    html: \'<div id="cookie-law-info-bar"><span>This website uses cookies to improve your experience. We\\\'ll assume you\\\'re ok with this, but you can opt-out if you wish.<a href=\"#\" id=\"cookie_action_close_header\"  class=\"medium cli-plugin-button cli-plugin-main-button\" >Accept</a> <a href=\"http://tomowens.openpoint.co.uk/cookies\" id=\"CONSTANT_OPEN_URL\" target=\"_new\"  class=\"cli-plugin-main-link\"  >Read More</a></span></div><div id="cookie-law-info-again"><span id="cookie_hdr_showagain">Privacy & Cookies Policy</span></div>\',
                    settings: \'{"animate_speed_hide":"500","animate_speed_show":"500","background":"#fff","border":"#444","border_on":true,"button_1_button_colour":"#000","button_1_button_hover":"#000000","button_1_link_colour":"#fff","button_1_as_button":true,"button_2_button_colour":"#333","button_2_button_hover":"#292929","button_2_link_colour":"#444","button_2_as_button":false,"font_family":"Helvetica, sans-serif","notify_animate_hide":true,"notify_animate_show":false,"notify_div_id":"#cookie-law-info-bar","notify_position_horizontal":"right","notify_position_vertical":"bottom","showagain_tab":true,"showagain_background":"#fff","showagain_border":"#000","showagain_div_id":"#cookie-law-info-again","showagain_x_position":"100px","text":"#000","show_once_yn":true,"show_once":"10000"}\'
                });

            });
            //]]>
        </script>
    ';
}

Save this file.

Step 3
Edit the same file to make the custom.css active. This is very simple. You just delete the line at the start of the custom.css section and at the end of it.
Save the file.

Step 4
The custom.css file that sits in the folder phplugins/CSS has to be edited. The sample file has code to make your page turn red if this file is activated. Leave that code in to test that the file is working first when you deploy it.


Step 5
In order to test the custom.css file is working FTP the phplugins.php and custom.css files to the relevant folder on your webserver. The phplugins.php sits in the phplugins folder and the custom.css file sits in the phplugins/css folder.

Test your site. The background pages go red. This is good. This means that the phplugins is working and calling the css file.

Step 6

When the WordPress plugin was installed and configured it created some css files. If this plugin is installed as per the instructions it wll create this path and content like this  wp-content/plugins/cookie-law-info/css/cli-style.css.
You need to copy some of the content from this file and paste it into the custom.css file in your own export set.
I copied this code from the cli-style.css file and pasted it into the custom.css file in my export set.

#cookie-law-info-bar {
    border: 0;
    font-size: 10pt;
    margin: 0 auto;
    padding: 5px 0;
    text-align: center;
    width: 100%;
    z-index: 9999;
}
#cookie-law-info-again {
    font-size: 10pt;
    margin: 0;
    padding: 2px 10px;
    text-align: center;
    z-index: 9999;
    cursor: pointer;
}
#cookie-law-info-bar span {
    vertical-align: middle;
}

I removed the code that made the pages red first and then saved the file. FTP this file to your phplugins/css folder on your webserver. The code in your cli-style.css file may differ as this depends on how you set up your plugin in WordPress


Step 7
The Cookie-Law_Ifo bar should then work as it does in the blog page where it was designed to work. It works properly on an iPAD and on a desktop. I have tried it in Firefox, Safari, Chrome. They all work well . IE works but does not present as well as other browsers. iPad in Portrait orientation displays best.
NOTE: If you change the WP setup make sure you check for any CSS changes etc. and make any adjustments in your custom.css and phplugins.php files.


Step 8
Thanks to Richard Ashby for the original code, to Daniel Leu for working out the ttg_canvas_bottom code, Lofty for his help off-line and Rod Barbee for always being patient with me.


Hope this helps?
Regards
TomO

Last edited by tomowensphoto (2014-08-16 00:19:30)


Regards,
TomO
Just a simple photographer
Live site at http://tomowens.openpoint.co.uk/

Offline

Board footer

Powered by FluxBB