[TOUTES VERSIONS]Modifier l'apparence du module de validation des cookies

Bonjour,

Un petit JS provenant de FA anglais ou espagnol qui permet de modifier l'apparence du module de validation des cookies en bas du forum lors de la connexion.


Modules/HTML JAVASCRIPT/Gestion des codes JavascriptCréer un nouveau javascript


Mettez un titre explicite.
Cochez sur toutes les pages

Code:


//Changer apparence barre cookies
    /* ----------------------------------------------------
     FA anglais: https://help.forumotion.com/t147313-topic
     FA Espagnol: https://asistencia.foroactivo.com/t153194-topic
     ------------------------------------------------------ */
    $(function(){
      $(function(){
        $('div').has('a#accept_rgpd').addClass('lo1pruf');
        $('div.lo1pruf').children('div').removeClass('lo1pruf').addClass('lopr2uf');
      });
    });

Panneau de configuration -> Affichage -> Images et couleurs -> Couleurs -> Feuille de style CSS

Code:


/*validation cookies bas de page invité*/
.lopr2uf{
          width: 100%!important;
}
.lo1pruf {
          bottom: 10px!important;
          left: 25% !important;
      width: 50% !important;
          border-radius: 4px;
          box-shadow: 0px 2px 4px #000;
 background-color: rgba(0, 54, 153, 0.9)!important;
        }

        .lo1pruf li > a {
          background: #4973b1;
          display: block;
          border: 0!important;
          box-shadow: 0px 2px 4px #00000055;
          border-radius: 2px!important;
        }
        .lo1pruf li {
          /*display: block;*/
  display: inline-block !important;
        }
        .lo1pruf li:first-child > a {
          background: #1f8f48!important;
          display: inline-block !important;
          margin: 3px 0!important;
        }
        #close_rgpd {
          background: #831919;
        }

Les éléments à modifier en fonction de votre thème:

Code:

.lo1pruf

Il correspond au fond

Code:

.lopr2uf

Il correspond au texte
   

Code:

.lo1pruf li:first-child > a

Il correspond au bouton "Accepter"

Code:

.lo1pruf li> a

Il correspond au bouton "En savoir plus et gérer mon choix" à modifier également en fonction de votre thème.

Enfin,

Code:

#close_rgpd

Il correspond au bouton "Fermer (et accepter)" Vous pouvez également modifier le style de ce bouton selon vos préférences.




Les images avant après:

Avant:


Après:


.

Merci @PHOTOCLIC pour ce tuto
Tu as oublié le titre de ton topic également

Je viens de donner un titre et mettre les images Serge .
Le bouton éditer doit être affiché désormais.

C'est tout bon

Merci Philippe.

Merci Photoclic,

il y a par contre un erratum dans cette partie

Code:

.lo1pruf li {
          /*display: block;*/
  display: inline-block !important;
        }

Hello Stéphane et Bruno,
@fascicularia

Pourquoi un erratum Stéphane ?

Bonjour Philippe et Stéphane.

J'ai personnellement modifié le

Code:


/*display: block;*/ que j'ai mis en commentaire par
  display: inline-block !important;