Codes css

Changer l'écriture.
Pour que l'écriture prenne effet , cliquer sur "Modifier le thème" et décocher partout tout ce qui concerne l'écriture et la taille même les "textes et liens"

Code html à mettre dans le code source <> " module simple "

Le code html

Code à mettre dans le css

Toutes les valeurs en PX sont ajustable à vous de voir ce qui vous convient comme grandeur d'écriture

/* Ecriture */ #body {font-family: 'Dancing Script', cursive; } #menubar{font-family: 'Dancing Script', cursive;font-size: 19px; } #titre_header{ font-size:70px; } #slogan_header{font-size: 40px;} #menu a{ font-size: 30px; } .module_menu_titre{ font-size: 30px; } .module_menu_contenu{font-size: 21px;} .module_titre_contenu{font-size: 50px; } .module_contenu{font-size: 25px;} .article_info{font-size: 15px;} .comment_body{font-size: 30px;} .comment_admin{font-size: 25px;} .commentnumber{font-size: 15px;} .commentdate{font-size: 20px;} .commentpseudo{font-size: 15px;} }

Code CSS pour changer l'apparence des commentaires y compris dans le livre d'or

comme sur ce blog

Vous devez adapter le code à votre blog, la largeur, la couleur, l'image de fond

.commentbody {width:740px; border:4px double #485C43; background-image:url('https://ekladata.com/-nMRIjtqzFnscq2guLElfJDuArA/nMRIjtqzFnscq2guLElfJDuArA.jpg'); border-radius:20px; box-shadow:4px 4px 8px black, -3px -3px 6px black inset, 3px 3px 6px 4px #485C43 inset; margin:10px 10px 10px 10px; padding:20px 20px 15px 20px; } .commentheader {background:url("https://ekladata.com/-nMRIjtqzFnscq2guLElfJDuArA/nMRIjtqzFnscq2guLElfJDuArA.jpg"); border-radius:20px; border: 4px double #485C43; box-shadow:-3px -3px 6px #485C43 inset, 3px 3px 3px #485C43 inset; padding:5px 15px 5px 15px; margin:0 0 0 150px; width:400px;} .commentpseudo a{color: White; font-size:18pt; font-family: Gabriola; } .comment-reply{ position: relative; margin-left: auto; margin-right: 250px; margin-bottom: 20px; margin-top:60px; background: red; background-image: url('https://ekladata.com/-nMRIjtqzFnscq2guLElfJDuArA/nMRIjtqzFnscq2guLElfJDuArA.jpg'); border-radius:20px; border: 2px dotted #485C43; padding:4px; width: 120px; box-shadow:0px 0px 10px black,0px 0px 10px black inset;}

Code css

pour enlever la barre blanche réponse aux commentaires.

Centrer la fenêtre et mettre une marge aux réponses.

Vous devez adapter pour que soit bien intégrer à votre blog

ces deux données en rouge margin-left: -32px et padding: 15px

.block-reply {border-left: none;padding-left: 0px;} .block-reply { margin-left: -32px; /* suppression visuelle marge gauche */ } /* espacement des bordures comm reponse */ .block-reply .commentbody, .commentpseudo a, .commentpseudo a:hover { padding: 15px; }

Vous aussi vous voulez ce genre de bouton menu

Code css

Voici le code css, vous pouvez modifier les couleurs,

le font, la longueur et la hauteur de vos boutons

pour adapter le tout aux couleurs de votre blog.

Ne rien modifier d'autres.

#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #cssmenu { width: 200px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; } #cssmenu ul ul { display: none; } #cssmenu > ul > li.active > ul { display: block; } .align-right { float: right; } #cssmenu > ul > li > a { padding: 15px 20px; border-left: 1px solid #1682ba; border-right: 1px solid #1682ba; border-top: 1px solid #1682ba; cursor: pointer; z-index: 2; font-size: 14px; font-weight: bold; text-decoration: none; color: #ffffff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); background: #36aae7; background: -webkit-linear-gradient(#36aae7, #1fa0e4); background: -moz-linear-gradient(#36aae7, #1fa0e4); background: -o-linear-gradient(#36aae7, #1fa0e4); background: -ms-linear-gradient(#36aae7, #1fa0e4); background: linear-gradient(#36aae7, #1fa0e4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15); } #cssmenu > ul > li > a:hover, #cssmenu > ul > li.active > a, #cssmenu > ul > li.open > a { color: #eeeeee; background: #1fa0e4; background: -webkit-linear-gradient(#1fa0e4, #1992d1); background: -moz-linear-gradient(#1fa0e4, #1992d1); background: -o-linear-gradient(#1fa0e4, #1992d1); background: -ms-linear-gradient(#1fa0e4, #1992d1); background: linear-gradient(#1fa0e4, #1992d1); } #cssmenu > ul > li.open > a { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15); border-bottom: 1px solid #1682ba; } #cssmenu > ul > li:last-child > a, #cssmenu > ul > li.last > a { border-bottom: 1px solid #1682ba; } .holder { width: 0; height: 0; position: absolute; top: 0; right: 0; } .holder::after, .holder::before { display: block; position: absolute; content: ""; width: 6px; height: 6px; right: 20px; z-index: 10; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); } .holder::after { top: 17px; border-top: 2px solid #ffffff; border-left: 2px solid #ffffff; } #cssmenu > ul > li > a:hover > span::after, #cssmenu > ul > li.active > a > span::after, #cssmenu > ul > li.open > a > span::after { border-color: #eeeeee; } .holder::before { top: 18px; border-top: 2px solid; border-left: 2px solid; border-top-color: inherit; border-left-color: inherit; } #cssmenu ul ul li a { cursor: pointer; border-bottom: 1px solid #32373e; border-left: 1px solid #32373e; border-right: 1px solid #32373e; padding: 10px 20px; z-index: 1; text-decoration: none; font-size: 13px; color: #eeeeee; background: #49505a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } #cssmenu ul ul li:hover > a, #cssmenu ul ul li.open > a, #cssmenu ul ul li.active > a { background: #424852; color: #ffffff; } #cssmenu ul ul li:first-child > a { box-shadow: none; } #cssmenu ul ul ul li:first-child > a { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } #cssmenu ul ul ul li a { padding-left: 30px; } #cssmenu > ul > li > ul > li:last-child > a, #cssmenu > ul > li > ul > li.last > a { border-bottom: 0; } #cssmenu > ul > li > ul > li.open:last-child > a, #cssmenu > ul > li > ul > li.last.open > a { border-bottom: 1px solid #32373e; } #cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a { border-bottom: 0; } #cssmenu ul ul li.has-sub > a::after { display: block; position: absolute; content: ""; width: 5px; height: 5px; right: 20px; z-index: 10; top: 11.5px; border-top: 2px solid #eeeeee; border-left: 2px solid #eeeeee; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); } #cssmenu ul ul li.active > a::after, #cssmenu ul ul li.open > a::after, #cssmenu ul ul li > a:hover::after { border-color: #ffffff; }

et voici le code html que vous devez installer dans un module simple comme sur ce blog.

Ce code est un modèle si vous avez plus ou moins de

pages ajouter ou enlever une ligne

<li class='last'><a href='ici votre page.html'><span>ici le nom de votre page</span></a></li>

<div id='cssmenu'> <ul> <li class='last'><a href='ici votre page.html'><span>ici le nom de votre page</span></a></li> <li class='last'><a href='ici votre page.html'><span>ici le nom de votre page</span></a></li> <li class='last'><a href='ici votre page.html'><span>ici le nom de votre page</span></a></li> <li class='last'><a href='ici votre page.html'><span>ici le nom de votre page</span></a></li> </ul> </div>

Petit code pour mettre une décoration dans votre "MENUBAR"

en bleu vous mettez l'adresse de votre image soit en JPEG ou en PNG et en rouge vous mettez la hauteur de votre image, chez moi elle est de 100.

Voici le code à installer dans le css :

#menubar { background: url(adresse de votre image ici); width:100%;

height:100px;

}

===================================

Code css pour coloriser le menu déroulant de la menubar.
Vous pouver changer la valeur du PX et les codes couleurs #

=========================

.menubar_section ul{border-radius:0px 0px 5px 5px;} .menubar_section ul { box-shadow: 5px 5px 20px #D2BB76; background-color: #D2BB76;} .menubar_section li:hover {box-shadow:inset 0px 0px 0px black;} .menubar_section li:last-child {background:none; padding-left: 15px; padding-top: 6px; padding-bottom: 6px; background-color: #D2BB76; } .menubar_section li {color:#FBE11F;margin-bottom:3px; border:1px solid #D2B48C; margin: 1px 3px 1px 3px; box-shadow: 0px 0px 3px black; width: 200px; padding-left: 15px; padding-top: 6px; padding-bottom: 6px; font-size:16px; background:none; background-color: #D2BB76; border-radius: 8px; }

Pour agrandir la zone de saisie du texte de la shoutbox

Codes css

Le code CSS

.module_menu_type_shoutbox [name="shoutbox_msg"]{width:90%}

Code pour ajouter du texte, une image au module Newsletter et agrandir les éléments comme sur ce blog

Le code CSS

/* Newsletter */ .module_menu_type_newsletter input[name=subscribe] {width:81%;} .module_menu_type_newsletter input[type=submit] {width:84%;} .module_menu_type_newsletter form:before{ content:"Inscrivez - vous pour suivre ce blog."; font-style:italic; font-size:15px; color:white; background-image: url('https://ekladata.com/-nMRIjtqzFnscq2guLElfJDuArA/nMRIjtqzFnscq2guLElfJDuArA.jpg'); background-size: 100%; background-repeat: no-repeat; display: inline-block; width:220px; height: 50px; position:relative; top:0px; }