Code CSS Avertissement Admin et Modo

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Code CSS Avertissement Admin et Modo

Message par Samuel987 le Mer 29 Avr 2015 - 3:27

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : http://www.electronslibres.org/

Description du problème

Bonjour Smile

Depuis quelques jours je bidouille le code CSS de mes boutons "Avertissement rapide Admin et Modo"

Je suis confronté à un problème que je ne parviens pas à résoudre.

Je souhaiterais obtenir ceci :

Et voilà l'apparence actuelle :

Comme vous le voyez, le rond dans lequel se trouve mon point d'exclamation (qui est une image hébergé) n'est pas situé là ou je le voudrais. Sad
Je voudrais donc le placer en haut à gauche.

Comment puis-je faire cette modification ?


Dernière édition par Samuel987 le Mer 29 Avr 2015 - 18:16, édité 1 fois

Samuel987
Nouveau membre

Masculin
Messages : 12
Inscrit(e) le : 04/12/2014

http://www.electronslibres.org/
Samuel987 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Code CSS Avertissement Admin et Modo

Message par no_way le Mer 29 Avr 2015 - 6:42

Bonjour, j'ignore le code html que vous utilisez autant que le code CSS mais la solution la plus simple est de mettre la propriété position de l'élément parent à "relative", mettre la propriété position de l'image à "absolute" puis jouer avec les propriétés "top" et "left" de l'image pour la positionner correctement.

no_way
Aidactif
Aidactif

Messages : 1739
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code CSS Avertissement Admin et Modo

Message par Samuel987 le Mer 29 Avr 2015 - 13:34

Voici le code CSS correspondant aux avertissements :

Code:
/*()Bouton avertissement rapide */
 
.mod_mess, .adm_mess {
margin: 5px auto;
width: 700px;
-webkit-border-radius: 4px;
-webkit-border-top-left-radius: 60px;
-moz-border-radius: 4px;
-moz-border-radius-topleft: 60px;
border-radius: 4px;
border-top-left-radius: 60px;
}
 
.mod_mess a.postlink, .adm_mess a.postlink {
color: #FFF !important;
text-decoration: underline !important;
}
 
/* administrateur bb-Code - bloc de message d'enregistrement */
 .adm_mess {
background: rgb(41,137,216); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(41,137,216,1) 62%, rgba(41,137,216,1) 62%, rgba(32,124,202,1) 62%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(62%,rgba(41,137,216,1)), color-stop(62%,rgba(41,137,216,1)), color-stop(62%,rgba(32,124,202,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(41,137,216,1) 62%,rgba(41,137,216,1) 62%,rgba(32,124,202,1) 62%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(41,137,216,1) 62%,rgba(41,137,216,1) 62%,rgba(32,124,202,1) 62%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(41,137,216,1) 62%,rgba(41,137,216,1) 62%,rgba(32,124,202,1) 62%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(41,137,216,1) 62%,rgba(41,137,216,1) 62%,rgba(32,124,202,1) 62%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#207cca',GradientType=0 ); /* IE6-9 */
}

/* Administrateur bb-Code - Titre */
.adm_mess .titl {
font-size: 15px;
text-align: center;
font-weight: bold;
padding: 5px;
color:#ffffff
}
   
/* Administrateur BB-Code - présentation du texte */
.adm_mess .titl + div {
display: block;
margin-left: 10px;
padding: 25px 5px 25px 150px;
background: transparent url(http://i19.servimg.com/u/f19/19/19/10/04/image_10.png) no-repeat left center;
color:#ffffff
}
 
/* Messages BB-Code - bloc de message d'enregistrement */
.mod_mess {
background: rgb(157,213,58); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(157,213,58,1) 0%, rgba(161,213,79,1) 50%, rgba(128,194,23,1) 51%, rgba(124,188,10,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(157,213,58,1)), color-stop(50%,rgba(161,213,79,1)), color-stop(51%,rgba(128,194,23,1)), color-stop(100%,rgba(124,188,10,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); /* IE6-9 */
}
 
/* Messages BB-Code - Un titre */
.mod_mess .titl {
font-size: 15px;
text-align: center;
font-weight: bold;
padding: 5px;
color:#ffffff 
}
   
/* moderateur BB-Code - présentation du texte */
.mod_mess .titl + div {
display: block;
margin-left: 10px;
padding: 25px 5px 25px 100px;
background: transparent url(http://i19.servimg.com/u/f19/19/19/10/04/sans_t12.png) no-repeat left center;
color:#ffffff
}

Si cela peut vous éclairer, j'ai suivi votre tuto pour leurs installations :
http://forum.forumactif.com/t357504-bouton-avertissement-rapide-pour-modo-et-admin

@no_way a écrit:mettre la propriété position de l'élément parent à "relative", mettre la propriété position de l'image à "absolute"
Je n'ai pas compris, quel est l'élément parent ? Je ne suis pas familier avec tout ça... Confused

Samuel987
Nouveau membre

Masculin
Messages : 12
Inscrit(e) le : 04/12/2014

http://www.electronslibres.org/
Samuel987 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Code CSS Avertissement Admin et Modo

Message par no_way le Mer 29 Avr 2015 - 16:05

Remplacez le code Javascript par celui-ci:
Code:
        $(function() { 
       
        jQuery('div.postbody div').each(function () {
        if(jQuery(this).text().indexOf('[adm]') != -1) {
        jQuery(this).html(jQuery(this).html().replace(/\[adm\](.+?)\[\/adm\]/gi, '<div class="adm_mess"><div class="exclamation"></div><div class="titl">Avertissement Administrateur</div><div>$1 </div></div>')) } 
        }); 
       
        jQuery('div.postbody div').each(function () {
        if(jQuery(this).text().indexOf('[mod]') != -1) {
        jQuery(this).html(jQuery(this).html().replace(/\[mod\](.+?)\[\/mod\]/gi, '<div class="mod_mess"><div class="exclamation"></div><div class="titl">Avertissement Modérateur</div><div>$1 </div></div>')) } 
        });  });
et le code CSS par celui-ci:
Code:
        /*()Bouton avertissement rapide */
       
        .mod_mess, .adm_mess {
        margin: 5px auto;
        width: 700px;
     min-height:90px;
        -webkit-border-radius: 4px;
        -webkit-border-top-left-radius: 60px;
        -moz-border-radius: 4px;
        -moz-border-radius-topleft: 60px;
        border-radius: 4px;
        border-top-left-radius: 60px;
     position:relative;
        }
       
        .mod_mess a.postlink, .adm_mess a.postlink {
        color: #FFF !important;
        text-decoration: underline !important;
        }
       
        /* administrateur bb-Code - bloc de message d'enregistrement */
        .adm_mess {
        background: rgb(41,137,216); /* Old browsers */
        background: -moz-linear-gradient(top,  rgba(41,137,216,1) 62%, rgba(41,137,216,1) 62%, rgba(32,124,202,1) 62%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(62%,rgba(41,137,216,1)), color-stop(62%,rgba(41,137,216,1)), color-stop(62%,rgba(32,124,202,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  rgba(41,137,216,1) 62%,rgba(41,137,216,1) 62%,rgba(32,124,202,1) 62%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  rgba(41,137,216,1) 62%,rgba(41,137,216,1) 62%,rgba(32,124,202,1) 62%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  rgba(41,137,216,1) 62%,rgba(41,137,216,1) 62%,rgba(32,124,202,1) 62%); /* IE10+ */
        background: linear-gradient(to bottom,  rgba(41,137,216,1) 62%,rgba(41,137,216,1) 62%,rgba(32,124,202,1) 62%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#207cca',GradientType=0 ); /* IE6-9 */
        }
       
        /* Administrateur bb-Code - Titre */
        .adm_mess .titl {
        font-size: 15px;
        text-align: center;
        font-weight: bold;
        padding: 5px;
        color:#ffffff
        }
   /*position image point d'exclamation*/
   .adm_mess .exclamation,.mod_mess .exclamation{
    background: transparent url(http://i19.servimg.com/u/f19/19/19/10/04/sans_t12.png) no-repeat left center;
        position:absolute;
     width:90px;
     height:90px;
     top:0px;
     left:-43px
        }
         
        /* Administrateur BB-Code - présentation du texte */
        .adm_mess .titl + div {
        display: block;
        margin-left: 10px;
        padding: 25px 5px 25px 150px;
        color:#ffffff
        }
       
        /* Messages BB-Code - bloc de message d'enregistrement */
        .mod_mess {
        background: rgb(157,213,58); /* Old browsers */
        background: -moz-linear-gradient(top,  rgba(157,213,58,1) 0%, rgba(161,213,79,1) 50%, rgba(128,194,23,1) 51%, rgba(124,188,10,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(157,213,58,1)), color-stop(50%,rgba(161,213,79,1)), color-stop(51%,rgba(128,194,23,1)), color-stop(100%,rgba(124,188,10,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* IE10+ */
        background: linear-gradient(to bottom,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); /* IE6-9 */
        }
       
        /* Messages BB-Code - Un titre */
        .mod_mess .titl {
        font-size: 15px;
        text-align: center;
        font-weight: bold;
        padding: 5px;
        color:#ffffff
        }
         
        /* moderateur BB-Code - présentation du texte */
        .mod_mess .titl + div {
        display: block;
        margin-left: 10px;
        padding: 25px 5px 25px 100px;
        color:#ffffff
        }

no_way
Aidactif
Aidactif

Messages : 1739
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code CSS Avertissement Admin et Modo

Message par Samuel987 le Mer 29 Avr 2015 - 18:16

Merci infiniment no_way ! Very Happy
Tout fonctionne très bien à présent !
Un grand merci à toi et au staff de Forumactif toujours très compétent !

Samuel987
Nouveau membre

Masculin
Messages : 12
Inscrit(e) le : 04/12/2014

http://www.electronslibres.org/
Samuel987 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum