Community @ The Turning Gate

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

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

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

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
on clicking the side pop up

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

Regards,
TomO

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

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

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

Thanks Rod,
I've tried that. The site still works so I'm trying to see if the cookie warning activates now.

So long as it is a double espresso I'm in! Stage may well be the next TTG stage for me.
Very clever link.

Thanks Rod and Lofty,
I don't use Stage - maybe I should look at that option, but I have just added the extra page and I have it open in a new window using an absolute URL. It opens the Privacy page on the top level domain. I just need to edit the words on that site to include the sub-domain. The only things I am doing are the contact forms and Webalizer that gathers anonymous stats. I don't use Google analytics
I'm just testing at the present. I have not included the link on my Blog page as there is something different about WordPress and cookies methinks. I'm sure I read that somewhere so more stuff to dig around in.
I now know what the little grey button is on the left hand side of the toolbar in OSX. Something new every day.
Regards
TomO