Vous désirez faire ressortir certains textes importants dans des zones de couleur et refusez de charger votre page de shortcode voici comment le faire simplement en codant vos class dans le CSS
Conseil d’un spécialiste WordPress:
- Ouvrez la feuille de style css de votre thème enfant.
- Copiez le code ci-dessous dans la feuille de style de votre thème (enfant).
- Enregistrez votre feuille de style modifiée.
- Mettez vos images (32px x 32px) dans un dossier « images » dans le dossier de votre thème (enfant)
[sourcecode language=’css’]
/* Les Boites */
.twf_info, .twf_success, .twf_warning, .twf_error {
border: 1px solid;
margin: 10px 0px;
padding:15px 30px ;
background-repeat: no-repeat;
background-position: 10px center;
-moz-border-radius:.5em;
-webkit-border-radius:.5em;
border-radius:.5em;
}
/* Sans Icones */
.twf_info {
color: #00529B;
background-color: #BDE5F8;
}
.twf_success {
color: #4F8A10;
background-color: #DFF2BF;
}
.twf_warning {
color: #9F6000;
background-color: #FEEFB3;
}
.twf_error {
color: #D8000C;
background-color: #FFBABA;
}
/* Avec Icones */
.twf_info.icon{
background-image: url(‘../images/info.png’);
padding-left:50px;
}
.twf_error.icon {
background-image: url(‘../images/error.png’);
padding-left:50px;
}
.twf_success.icon {
background-image:url(‘../images/success.png’);
padding-left:50px;
}
.twf_warning.icon {
background-image: url(‘../images/warning.png’);
padding-left:50px;
}
[/sourcecode]
Comment insérer les boites de message (message box) ?
Entourez le texte à surligner par une balise <div> avec le style choisi dans l’éditeur de contenu de WordPress, en mode « texte ».
Ex:<div class= »twf_info icon« >ici le texte à surligné</div>
twf_info = la box info
icon = avec l’icône .
[sourcecode language=’php’]
[/sourcecode]
Ce qui donne
Cliquez droit, puis « enregistrer-sous » pour récupérer les icônes.
le-com-manager dit
Une tuto qui tombe à point nommé! Actuellement dans le projet d’insérer un message box dans un de mes sites, je ne savais pas que cela était aussi simple. Parti tout simplement sur un chemin plus tortueux! Merci de ce partage qui va grandement m’aider!
TWF dit
Pas de problème ça me fait plaisir. Merci pour ton message.
le-marketing.org dit
J’ai essayé et çà marche! Merci pour le code! Çà conforte mon choix comme quoi WP est le meilleur.
superuvienne.com dit
Ca pourrait égayer les blogs trop tristes et puis çà change! et qui dit changement dit plus envie de rester ce qui est bon pour les blogueurs! Merci à toi et je partage à mes connaissances qui en ont bien besoin!
encaretentrain.org dit
J’aime beaucoup et puis il n’est pas encore trop tard d’apporter un peu de couleurs aux blogs! Pour démarquer différents rubriques c’est intéressants et offrent un très joli visuel. Merci pour le code!