css pour cookieconsent et apparence graphique.

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par ortolojf, 28 Avril 2019.

  1. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    2 789
    J'aime reçus:
    8
    Bonjour

    Finalement j'ai opté pour Cookieconsent pour ma gestion de cookies.

    C'est en place, çà fonctionne mais les boutons ne sont pas tous à la bonne couleur et espacements, je ne sais pas comment mettre çà dans la catégorie "palette".

    Sinon le mécanisme fonctionne en version v3, mais je suis obligé de charger les derniers scripts sur cdnjs.cloudfire.com

    Comment adapter les css de cookieconsent ?

    Merci beaucoup.

    Amicalement.
     
  2. cthierry
    cthierry WRInaute passionné
    Inscrit:
    15 Janvier 2005
    Messages:
    2 187
    J'aime reçus:
    37
  3. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    2 789
    J'aime reçus:
    8
    Bonjour cthierry

    J'ai eu mis une feuille de style de mon cru en plus de celle d'origine.

    Mais bizarrement les boutons sont détachés de la bannière.

    Le script :

    https://www.pronostics-courses.fr/coookieconsent.js

    Code:
    
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
    <link rel="stylesheet" type="text/css" href="/css/cookieconsent.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
    <script>
    function remove_cookie(name)
    {
        // Cookie https.
        securite = true;
        var d = new Date();
        d.setTime(d.getTime() - 24*60*60*1000);
        var tmp_expire = "; expires=" + d.toUTCString();
        var tmp_value = "";
    //    alert(tmp_name + '=' + tmp_value + tmp_expire + '; path=/' + ((chemin === undefined) ? '' : chemin) + ((domaine === undefined) ? '' : '; domain=' + domaine) + ((securite === true) ? '; secure' : ''));
        document.cookie = tmp_name + '=' + tmp_value + tmp_expire + '; path=/' + ((chemin === undefined) ? '' : chemin) + ((domaine === undefined) ? '' : '; domain=' + domaine) + ((securite === true) ? '; secure' : '');
    }
    function getCookie(name)
    {
        var nameEQ = name + "=";
        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 null;
    }
    function getAllCookies()
    {
        var AllCookies = Array();
        var nameRegexp = new RegExp("[^=]+=");
        var ca = document.cookie.split(';');
        k=0;
        for(var i=0;i < ca.length;i++) {
            var c = ca[i].toString().trim();
            if(c.match(nameRegexp))
            {
                var j = c.indexOf('=');
                AllCookies[k] = c.substring(0, j);
                k++;
            }
        }
        if(k > 0)
        {
            return AllCookies;
        }
        return null;
    }
    function remove_All_Cookies()
    {
        var AllCookies = Array();
        AllCookies = getAllCookies();
        if(AllCookies !== null)
        {
            for(var i = 0;i < AllCookies.length; i++)
            {
                var cookie = AllCookies[i].toString().trim();
                /*
                * Cookie de session
                * et cookie de gestion
                * de cookies.
                */
                if((cookie != "SES")&&(cookie != "cookieconsent_status"))
                {
                    remove_cookie(cookie);
                }
            }  
        }
    }
    function onLog (status) {
      console.log(status ? 'enable cookies' : 'disable cookies');
    }
    window.addEventListener("load", function(){
    window.cookieconsent.initialise({
      "law": {
        "regionalLaw": false
      },
      "location": false,
      "cookie": {
        "name": "cookieconsent_status",
          "path":"/",
          "domain": "www.pronostics-courses.fr",
          "expiryDays":395,
          "secure": true
      },
      "theme": "block",
      "position": "bottom",
      "revokable": true,
      "content": {
        "header": "Cookies utilis&eacute;s.",
        "message": "Ce site utilise des cookies et des hash-codes anonymes.",
        "dismiss": "Abandonner",
        "allow": "Accepter",
        "deny": "Refuser",
        "link": "Savoir plus",
        "href": "https://www.pronostics-courses.fr/php/cgu/mentions-legales.html",
        "close": "Close",
        "policy": "R&eacute;voquer les cookies",
        "target": false
      },
      "type": "opt-in",
      "palette" : "null",
      onInitialise: function (status) {
        var type = this.options.type;
        var didConsent = this.hasConsented();
        if (type == 'opt-in' && didConsent) {
          // enable cookies
        }
        if (type == 'opt-in' && !didConsent) {
          // disble cookies
          remove_All_Cookies();
        }
        if (type == 'opt-out' && !didConsent) {
          // disable cookies
          remove_All_Cookies();
        }
      },
      onStatusChange: function(status, chosenBefore) {
        var type = this.options.type;
        var didConsent = this.hasConsented();
        if (type == 'opt-in' && didConsent) {
          // enable cookies
        }
        if (type == 'opt-in' && !didConsent) {
          // disble cookies
          remove_All_Cookies();
        }
        if (type == 'opt-out' && !didConsent) {
          // disable cookies
          remove_All_Cookies();
        }
      },
      onRevokeChoice: function() {
        var type = this.options.type;
        if (type == 'opt-in') {
          // disable cookies
          remove_All_Cookies();
        }
        if (type == 'opt-out') {
          // enable cookies
        }
      }
    })});
    </script>
    
    

    Le css :

    https://www.pronostics-courses.fr/css/coookieconsent.css

    Code:
    
    .cc-window {
      color: darkgreen;
      font-weight:bold;
    }
    .cc-banner .cc-message {
      background: #8fd8f3;
      padding: 10px;
      border-radius: 10px;
    }
    .cc-link,
    .cc-link:visited {
      color: darkgreen;
      background: #f2d813;
      font-weight:bold;
      padding: 6px;
      border-radius: 6px;
      margin-left:15px;
    }
    /*
    .cc-btn {
      color: darkgreen;
      font-weight:bold;
      background: #f2d813;
      padding: 5px;
      border-width: 1px;
      border-color: black;
      border-radius: 5px;
    }
    */
    .cc-allow {
      color: darkgreen;
      font-weight:bold;
      background: #f2d813;
      border-width: thin;
      border-color: darkgreen;
      padding: 5px;
      border-radius: 6px;
    }
    .cc-deny {
      color: darkgreen;
      font-weight:bold;
      background: #f2d813;
      padding: 5px;
      border-width: thin;
      border-color: darkgreen;
      border-radius: 6px;
    }
    .cc-revoke {
      color: darkgreen;
      font-weight:bold;
      background: #f2d813;
      padding: 5px;
      border-width: thin;
      border-color: darkgreen;
      border-radius: 6px 6px 0 0;
    }
    
     

    A part çà tout est correct, le cookie dure 395 jours, et en mode sécurisé https.

    Que faire ?

    Merci.

    Amicalement.
     
    #3 ortolojf, 29 Avril 2019
    Dernière édition: 29 Avril 2019
  4. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    2 789
    J'aime reçus:
    8
    Super merci cthierry ;)

    Voilà, j'ai tout bon.

    J'ai simplement récupéré les sources Javasript et css de Cookieconsent et arrangé le css en faisant attention à ne pas faire d'effets de bord.

    Cependant je ne sais pas encore ce que çà donne avec des smartphones.

    Merci de voir : https://www.pronostics-courses.fr

    Merci beaucoup de ton aide.

    Amicalement.
     
  5. ABCWEB
    ABCWEB WRInaute impliqué
    Inscrit:
    22 Octobre 2015
    Messages:
    634
    J'aime reçus:
    47
    Balancer sur la prod sans tester toujours une bonne idée..
     
  6. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    2 789
    J'aime reçus:
    8
    Bonjour ABCWEB

    J'ai réduit le cache css/js etc... à 1h.

    J'ai ajouté les préfixes propriétaires et minifié le css.

    La logique de Cookieconsent étant exclusivement css, normalement assurer la compatibilité devrait être suffisant.

    Merci beaucoup.

    Amicalement.
     
  7. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    2 789
    J'aime reçus:
    8
    Bonjour

    Voilà c'est fait.

    Merci de vérifier.

    J'ai essayé avec l'outil de Chrome => Outils de Développement => Simulation, mais celà ne donne pas le même résultat qu'avec l'extension User Agent Switcher.

    Avec ce dernier le bouton "Revoke Cookies" reste visible, et le simulateur non.

    Autre problème :

    Avant de migrer mon site de serveur, j'ai l'intention de mesurer ma fréquentation avec GA entièrement anonymisé.

    Comment anonymiser entièrement GA ?

    Merci beaucoup pour vos réponses.

    Amicalement.
     
Chargement...
Similar Threads - css cookieconsent apparence Forum Date
Extension Chrome utile pour afficher le code source HTML, JS, CSS Développement d'un site Web ou d'une appli mobile 5 Juillet 2019
Appliquer style CSS CMS GHOST Développement d'un site Web ou d'une appli mobile 21 Mars 2019
Wordpress et site html/css Débuter en référencement 15 Décembre 2018
Temps de réponse et minimisation CSS et JS Débuter en référencement 30 Novembre 2018
Texte qui apparait au scroll ou au chargement en CSS Débuter en référencement 24 Octobre 2018
trop de style CSS dans un code HTML Demandes d'avis et de conseils sur vos sites 12 Octobre 2018
Quel site pour produire les styles css d'une page ? Développement d'un site Web ou d'une appli mobile 25 Avril 2018
css avec media queries pour pour 3 pavés ? Développement d'un site Web ou d'une appli mobile 25 Mars 2018
CMS type Forum HTML5 CSS3 SEO Développement d'un site Web ou d'une appli mobile 17 Janvier 2018
CSS - Affichage de plusieurs images au passage de la souris Développement d'un site Web ou d'une appli mobile 19 Novembre 2017
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice