css pour cookieconsent et apparence graphique.

WRInaute accro
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.
 
WRInaute accro
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.
 
Dernière édition:
WRInaute accro
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.
 
WRInaute accro
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.
 
WRInaute accro
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.
 
Discussions similaires
Haut