Code CSS Avertissement Admin et Modo
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Code CSS Avertissement Admin et Modo
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
BonjourDepuis 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.
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
Re: Code CSS Avertissement Admin et Modo
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- Membre actif
- Messages : 2214
Inscrit(e) le : 26/03/2010
Re: Code CSS Avertissement Admin et Modo
Voici le code CSS correspondant aux avertissements :
Si cela peut vous éclairer, j'ai suivi votre tuto pour leurs installations :
https://forum.forumactif.com/t357504-bouton-avertissement-rapide-pour-modo-et-admin
- 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 :
https://forum.forumactif.com/t357504-bouton-avertissement-rapide-pour-modo-et-admin
Je n'ai pas compris, quel est l'élément parent ? Je ne suis pas familier avec tout ça...no_way a écrit:mettre la propriété position de l'élément parent à "relative", mettre la propriété position de l'image à "absolute"
Re: Code CSS Avertissement Admin et Modo
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>')) }
}); });
- 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- Membre actif
- Messages : 2214
Inscrit(e) le : 26/03/2010
Re: Code CSS Avertissement Admin et Modo
Merci infiniment no_way !
Tout fonctionne très bien à présent !
Un grand merci à toi et au staff de Forumactif toujours très compétent !
Tout fonctionne très bien à présent !
Un grand merci à toi et au staff de Forumactif toujours très compétent !
Sujets similaires
» Bouton avertissement rapide admin et modo non visible
» Avertissement rapide modo et admin
» Message Admin/Modo (avertissement)
» Problème : avertissement rapide modo/admin
» Bouton Avertissement Rapide pour Modo et Admin
» Avertissement rapide modo et admin
» Message Admin/Modo (avertissement)
» Problème : avertissement rapide modo/admin
» Bouton Avertissement Rapide pour Modo et Admin
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum