change the formatting of copy within the Cookie Policies

Answered

Comments

50 comments

  • Hi Bevan,

    You can modify the view of the cookie declaration by changing the template manually from the
    Cookiebot Admin panel under DeclarationTemplate (just switch from Default to Custom) and then modify the code below as your desire, e.g. modify “table tr and td” to “ul and li”.
    You could read more about it here: https://support.cookiebot.com/hc/en-us/articles/360004374474-What-is-the-Cookie-Declaration-cookie-policy-and-what-is-included-in-it-.

     

    Regards,
    Spas

    0
    Comment actions Permalink
  • Avatar
    ALTA-ICT

    Hi,

    This not work for me

    Changing below result in error before saving. Same view problem on mobile iphone 7

    “table tr and td” to “ul and li”.

    thank you

    0
    Comment actions Permalink
  • Hi ALTA-ICT,

    The error occurs, because of invalid html you are trying to save. Changing the TD/TR to UL/LI was just an example and is not enough. If you want the display the Cookie declaration not as a table then you need to write the html, so that you don't have any table elements ( such as th, tbody ) inside the LI.
    Also please keep in mind that you will need to write some CSS in order to style the changes you made.


    Regards,
    Spas

    0
    Comment actions Permalink
  • Avatar
    ALTA-ICT

    Hi Spas,

    Thanks, do u have a responsive mobile/desktop html template ? So everybody can see the declaration nice on desktop and mobile. i have iPhone 7. 

    Thanks again

    1
    Comment actions Permalink
  • Hi ALTA-ICT,

    The default layout of the CookieDeclaration is mobile friendly, maybe your own stylesheet is "messing" with the layout.
    Could you send me your domain, so I can have a look and see what might went wrong and help you solve this issue afterwards instead of guessing. You could post your domain here if you like or send it to me at: s.velinov@vconnect.dk 

    Regards, 
    Spas 

    0
    Comment actions Permalink
  • Hi ALTA-ICT,

    Checking you domain and the screenshot you send me, the problem with the CookieDeclaration on mobile devices seems to be because of the different language you use. Different languages might have very long words, which in this case is the problem and it breaks the layout of the table. You can try to apply some css style to the cookie declaration "th" and "td" elements in order to fix this issue e.g. "use word-wrap: break-word".

    Regards,
    Spas

    0
    Comment actions Permalink
  • Avatar
    ALTA-ICT

    Hi Spas,

    Thanks. How exactly to edit and apply some css style to the cookie declaration "th" and "td" elements in order to fix this issue e.g. "use word-wrap: break-word".

    Can you send me new html so i can copy paste it to my site?

    0
    Comment actions Permalink
  • Hi ALTA-ICT,
     
    You can simply copy/paste this css style into your css stylesheet:

    .CookieDeclarationTableHeader
     {
            word-wrap: break-word;
    0
    Comment actions Permalink
  • Avatar
    Fox

    Spas wrote "The default layout of the CookieDeclaration is mobile friendly, maybe your own stylesheet is "messing" with the layout."

     

    CookieDeclaration isn't mobile friendly. No 4 column table can be mobile friendly. Example: https://gdprdemo.foxtucker.com/cookie-settings/ 

     

     

    0
    Comment actions Permalink
  • Avatar
    ALTA-ICT

    Hi Fox,

    Thanks, i see it. So let we hope Spas can help us make Cookiedeclaration mobile friendly

    0
    Comment actions Permalink
  • Hi ALTA-ICT,

    If your want to make the CookieDeclaration to look pretty on small mobile screens you could use CSS rules to determine the number of columns shown on mobile devices, (e.g. use media queries to set different columns number under a specific screen resolution). Use could use "display: none" to hide some of the columns in mobile screen resolutions, e.g.

    // this example will hide the last column under 700px
    @media screen and (max-width: 700px){
    .CookieDeclarationTable thead tr th:last-child, .CookieDeclarationTable tbody tr td:last-child{
    display:none
    }
    }

    The other option that you could use it to modify the table by displaying the data horizontal, see example here.

    Regards,
    Spas

    0
    Comment actions Permalink
  • Avatar
    Kenan

    @Fox the 4 column table looks fine on mobile devices horizontally.

    Have a look at: https://www.cookiebot.com/en/cookie-declaration/

    Vertically it could be better.

    If you look at https://www.cookiebot.com/en/developer/ with desktop and mobile, you'll see that the mobile version only displays 2 columns, while the desktop version displays 4 columns. 

    In continuation of Spas answer, you can also target specific columns that you want to hide with the nth-child rule.

    Example:

    table tr td:nth-child(2) {
    display: none;
    }

    0
    Comment actions Permalink
  • Avatar
    Richard Vencu

    Guys. I came up with a method to solve this issue without editing anything on Cookiebot. The idea is to add the table column names as data-label attribute in td elements then use basic responsive css to alter the table format.

    Of course, it would be much simpler if the default table would have these elements added by default I mean here for everyone so we can only rely on css. Or even better include the css too into the default cookie declaration.

    When we rely on editing the declaration for someone with many many languages the proceedings can become a mess. This method just does not care  how many languages you use for declaration.

    As it is now, we need  to first detect the column names and apply the attributes accordingly via some javascript. I will be using jQuery since I use the cookiebot data declaration on my WordPress installations.

    Because the table is not in DOM from beginning I needed first to detect when it appears in DOM. I had to add this jQuery plugin: https://github.com/eclecto/jQuery-onMutate

    Then I used these css rules (add them to custom css somewhere) and the javascript snipped that creates the data-label attributes - just add them somewhere  in the footer.

    https://gist.github.com/rvencu/0c0960f920fef23c2aad6f4c3f539e6f

    0
    Comment actions Permalink
  • Avatar
    ALTA-ICT

    Hi Richard,

    Thank you a lot.

    Look's nice, i gonna test it and let you know. Do you have an example how it looks like after your solution above?

    0
    Comment actions Permalink
  • Avatar
    Richard Vencu

    Yes, just hit this link https://www.dentfix.ro/

    0
    Comment actions Permalink
  • Avatar
    ALTA-ICT

    Nice, looks very good on my iPhone 7 now. asap i will test is. From line 46 till and i must copy past in my  javascript snipped area? and the first part in my CSS ?

    0
    Comment actions Permalink
  • Avatar
    Richard Vencu

    Wherever you have some Custom CSS editor, just copy everything between <style> and </style> without these tags.

    On your footer, maybe just before </body> add the script snippet including <script type="text/javascript"> and </script>

    Make sure you also install the onmutate script. Just download the minified version from here https://github.com/eclecto/jQuery-onMutate/tree/master/src and load it like <script type="text/javascript" src="/url/to/downloaded/script.,,," />

    This script must be loaded before the javascript snippet.

    Do you use WordPress? For WordPress you  can do this:

    save the css into a new css file

    save the javascript (without script tags) into a js file

    add the onmutate js file

    use this loading technique inside function.php:

    function cookiebot_dialog()
    {
        wp_register_style('cookiebot-responsive', '/js/cookiebot_responsive_tables.css');
        wp_enqueue_style('cookiebot-responsive');
    wp_register_script('jquery-onmutate', '/js/jquery.onmutate.min.js', array('jquery'));
    wp_enqueue_script('jquery-onmutate');
    wp_register_script('cookiebot-responsive', '/js/cookiebot_responsive_tables.js', array('jquery-onmutate'));
        wp_enqueue_script('cookiebot-responsive');
     
    }
    add_action('init', 'cookiebot_dialog');
     
    This loading technique always ensures the onmutate is loaded after jquery and our script is loaded after onmutate.
    0
    Comment actions Permalink
  • Avatar
    Richard Vencu

    Just for simplification I put everything into a WordPress plugin, It works on my test site but if there is any trouble with it please let me know

    https://github.com/rvencu/Cookiebot-Responsive

    0
    Comment actions Permalink
  • Avatar
    ALTA-ICT

    Richard,

    Thanks a lot. I have WordPress for this scenario, hence i gonna try the wordpress plugin and put the whole code in. How to install the plugin in wordpress? Whats is the name of the plugin? I do not use cookiebot plugin but GTM.

    if i can email you, should be nice. Let me know...

    0
    Comment actions Permalink
  • Avatar
    Richard Vencu

    No need to use Cookiebot plugin. You have to install my plugin manually since it is not published on WordPress repository. Go to the Github link https://github.com/rvencu/Cookiebot-Responsive , click download as zip. Once in your computer unzip it somewhere.

    Then by using a ftp client or similar you have to upload just the cookiebot-responsive folder and all its content to your plugin folders resulting this structure:

    .../wp-content/plugins/cookiebot-responsive/...

    Please note cookiebot-responsive folder is under cookiebot-responsive-master folder, do not upload this folder but only the subfolder as mentioned above.

    After this you can see the plugin listed in Modules admin page where you just activate it.

    If any of this seems hard, please contact your hosting company or your developer and refer them to this discussion. They would do it easily for you.

    0
    Comment actions Permalink
  • Avatar
    ALTA-ICT

    Hi,

    I download, extract in wp-content/plugin, and activate you .zip plugin. How to get the settings of it to copy paste the code? Nirmal by setting or extra in wordpress

    0
    Comment actions Permalink
  • Avatar
    Richard Vencu

    everything is inside the plugin. no need to copy any code anymore, if the plugin is active it should work. Can you provide a link to your site to check?

    0
    Comment actions Permalink
  • Avatar
    ALTA-ICT

    Wauww, you are a her. Thanks a million.

    https://alta-ict.nl/cookies

    Only on vertical i do not see colomn names on my mobile.

    0
    Comment actions Permalink
  • Avatar
    Richard Vencu

    Well, I can see them very well on my mobile. I guess you need to refresh cache on mobile or something.

    0
    Comment actions Permalink
  • Avatar
    ALTA-ICT

    No in incognito also i do not see columns like tpe, expire date etc.

    Do the page display in your language, if not what is you language?

    0
    Comment actions Permalink
  • Avatar
    Richard Vencu

    Is not that you wanted to get? I took it just now from your website. I can see the same with my phone. there are not anymore column headers since the header is now displayed in bold characters in each cell...

    0
    Comment actions Permalink
  • Avatar
    ALTA-ICT

    no, check the declaration page https://alta-ict.nl/cookies/ not the banner. 




    0
    Comment actions Permalink
  • Avatar
    Richard Vencu

    Cool. This is how I can see from my location so I cannot reproduce your issue...

    0
    Comment actions Permalink
  • Avatar
    ALTA-ICT

    Hi, yes that should be great. Please update versionand let meknow how to update. Let me know how i can follow you also. Thanks

    0
    Comment actions Permalink
  • Avatar
    ALTA-ICT

    I have Danish language, strange how it not shows in danish at your side. If you my sitewithdanish ip the bannerand declaration page must automatically translate. You or Spas know how to solve this?

    https://wordpress.org/support/topic/multilanguage-website-5/

    auto-detect and different languages are checked and configured

    https://support.cookiebot.com/hc/en-us/articles/360003793394-How-do-I-set-the-language-of-the-consent-banner-dialog-

    0
    Comment actions Permalink

Please sign in to leave a comment.