-
Thème 1 - Warrior Cat
Voici mon tout premier thème en full css! En gros, vous avez qu'à copier/coller le colde et BIM, le thème est installé! Je tiens à remercier Elinae pour m'avoir expliquer comment on faisait et donner les sélecteurs nécessaires.
Si vous souhaitez installer ce thème, donnez moi juste le titre et le slogan (s'il en a un) de votre blog, comme ça je modifierait le header pour vous.
Si jamais vous ne savez pas comment trouver le numéro de vos menus, dites le moi, je vous aiderait. Voici un tuto qui pourrait vous aider ici! Si vous ne souhaitez que l'un ou l'autre des menus de lien, vous pouvez supprimer le code qui ne vous sert pas. (j'ai mis des indications dans le css si jamais)
Le blog test se trouve ici, si vous voulez voir l'intégralité du thème (les commentaires, les forums, le reste de la page...).
Merci de me prévenir si vous l'utilisez. ♥
(+) il faut que toutes les valeurs soit à zéro et décochées, sauf format du blog > page > automatique centré & format du blog > marges > la marge entre le menu1 et le contenu (vous choisissez votre valeur)
CODE CSS:
/*----------------ENTÊTE DECLARATIVE----------------*/
@font-face {font-family: "Astloch";
src: url('http://ekladata.com/sursaut-gamma.cd.st/perso/police/Astloch-Regular.ttf');}
@font-face {font-family: "Six Caps";
src: url('http://ekladata.com/sursaut-gamma.cd.st/perso/police/SixCaps.ttf');}
@font-face {font-family: "Roboto";
src: url('http://ekladata.com/Z5B6_aSg_DAeSfa--kAjF4QNQTs/Roboto-BlackItalic.ttf');}
/*----------------BODY & FENÊTRE----------------*/
#body {
background:transparent url("URL_DU_HEADER_MODIFIE")center top no-repeat;
background-color: #DCDCDC;
}
#body a {
text-decoration: none;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
}
body a:hover {
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
}
.img {margin: 2px;}
/*----------------FOND PAGE----------------*/
#background {width: 900px;}
/*----------------HEADER----------------*/
#header {
height: 550px;
}
/*----------------MENU----------------*/
#menu1 {
width: 200px;
text-align: justify;
font-family: arial;
}
#menu1 a {
color: #AD968D;
}
#menu1 a:hover {
color: #AA6F76;
}
#menu1 .module_menu_titre {height: 100%;
font-family: "Six Caps";
text-transform: uppercase;
letter-spacing: 3px;
font-size: 23pt;
background: #2A323A;
color: #CDD3DA;
padding-left: 10px;
border-bottom: 2px solid #424F5B;
border-top-left-radius: 10px;
border-top-right-radius: 10px;}
#menu1 .module_menu_contenu {
background: #272727;
color: #C0C0C0;
padding: 10px;
margin-bottom: 45px;
text-align: justify;
font-family: arial;
font-size: 13px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
#module_menuNUMEROMENU1 a{ /*pour avoir les liens 1 seule colonne*/
display: inline-block;
width: 100%;
min-height: 18px;
margin-bottom: 3px;
padding: 1px;
text-align: center;
background-color: #B9666F;
color: #F1F1F1;
text-transform: uppercase;
font-family: "Roboto";
font-size: 12px;
opacity: 0.7;
}
#module_menuNUMEROMENU1 a:hover{
background-color: #C39988;
color: #422728;
border-left: 23px solid #B9666F;
}
#module_menuNUMEROMENU2 a{ /*pour avoir les liens en deux colonnes*/
display: inline-block;
width: 47.7%;
min-height: 18px;
margin-bottom: 3px;
padding: 1px;
text-align: center;
background-color: #B9666F;
color: #F1F1F1;
text-transform: uppercase;
font-family: "Roboto";
font-size: 12px;
opacity: 0.7;
}
#module_menuNUMEROMENU2 a:hover{
background-color: #C39988;
color: #422728;
}
/*----------------DERNIERS VISITEURS----------------*/
.module_menu_type_lastvisitors {}
.module_menu_type_lastvisitors img {
margin-bottom: 5px;
margin-right: 1.5px;
border-top-left-radius: 30px;
border-top-right-radius: 5px;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 15px;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg)
}
.module_menu_type_lastvisitors img:hover{ }
/*----------------ARTICLES----------------*/
.module_titre_contenu{
min-height: 50px;
border-bottom: 5px double #424F5B;
color: #713638;
padding-left: 10px;
padding-bottom: 10px;
font-family: "Six Caps";
font-size: 40px;
letter-spacing: 3px;
word-spacing: 3px;
text-transform: uppercase;
}
.module_titre_contenu a{
min-height: 50px;
color: #713638;
padding-left: 10px;
padding-bottom: 10px;
font-family: "Six Caps";
font-size: 40px;
letter-spacing: 3px;
word-spacing: 3px;
text-transform: uppercase;
}
.module_titre_contenu a:hover{
color: #A46763;
}
.article_info {
font-size: 10px;
color: #DCDCDC;
opacity: 0.5;
text-align: right;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 30px;
}
.article_info a {
color: #95776B;
text-transform: uppercase;
}
.article_info a:hover {
color: #B5B5B5;
}
.module_contenu {
background-color: #272727;
color: #F1F1F1;
text-align: justify;
font-family: arial;
font-size: 13px;
padding: 20px;
border-bottom-right-radius:5px;
border-bottom-left-radius: 5px;
border-right: 3px solid #424F5B;
border-bottom: 3px solid #424F5B;
margin-bottom: 50px;
}
.module_contenu a {
color: #D86356;
}
.module_contenu a:hover {
color: #B17C83;
}
.module_bottom {}
/*----------------PIED DE PAGE----------------*/
#footer {
text-align: center;
text-transform: uppercase;
font-size: 11px;
}
#footer a {
color: #D86356;
}
#footer a:hover {
color: #B17C83;
}
#footer:after {content: "- Thème de Fabule";}
/*----------------COMMENTAIRE----------------*/
.comment_normal, .comment_admin {
width: 98%;
}
div.commentheader{
background-color: #2A323A;
border-radius: 10px;
padding: 5px;
margin-bottom: 8px;
margin-top: 10px;
color: #566676;
}
.block-reply {width: 99%;
border-left: 3px solid #424F5B;
}
.comment-reply a{
color: #616161;
font-family: "Roboto";
}
.comment-reply a:hover{
color: #A1544E;
}
.commentnumber {
font-family: "Roboto";
font-size: 11px;
padding-left: 5px;
}
.commentpseudo {
font-family: "Roboto";
color: #9E311D;
}
.commentpseudo a {color: #9E311D;}
.commentpseudo a:hover {color: #A1544E;}
.commentdate {}
.commentavatar img {
border: 2px solid #424F5B;
}
.commentavatar img:hover {}
/*----------------BOUTONS----------------*/
input[type=button],input[type=submit], button {
margin: 9px;
margin-left: 0px;
min-width: 100px;
min-height: 20px;
background-color: #BE3A2C;
color: #F1F1F1;
font-family: "Roboto";
border: 3px solid #881A10;
text-transform: uppercase;
font-size: 15px;
letter-spacing: 2px;
}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, button:hover, .button:hover {
background-color: #881A10;
color: #F1F1F1;
font-family: "Roboto";
border: 3px solid #BE3A2C;
}
/*----------------HELPBUBBLES----------------*/
#help_bubble {
background-color: #BE3A2C;
color: #F1F1F1;
border: 1px solid #881A10;
opacity: 0.7;
box-shadow: 0px 1px 1px black;
}
/*----------------FORUMS----------------*/
.post_table_msg {
background-color: #3A3A3A;
padding: 10px;
border-bottom: 1px solid #3A3A3A;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.post_table_head {
color: #3A3A3A;
font-size: 0px;
}
.post_table_profile img{
border: 2px solid #272727;
margin-left: 10px;
margin-top: -7px;
margin-bottom: 10px;
padding: 0px;
}
.post_table_profile a{
color: #3A2728;
font-family: "Roboto";
text-transform: uppercase;
display: block;
width: 79px;
background-color: #95776B;
margin-top: 15px;
margin-left: 10px;
text-align: center;
border-radius: 30px;
margin-top: 15px;
margin-left: 10px;
text-align: center;
opacity: 0.7;
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
}
.post_table_profile a:hover{
color: #B5B5B5;
}
.post_table_profile {
background-image: url('http://ekladata.com/HCRc_M04atpy4qVct74FjK8oLlY/872859rTJbL.jpg');
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
border-bottom: 1px; solid #272727;
opacity: 0.7;
}
.forum-description {
background-color: #494949;
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
border: 4px double #363636;
}/*----------------ENTÊTE DECLARATIVE----------------*/
@font-face {font-family: "Astloch"; /*astloch regular*/
src: url('http://ekladata.com/sursaut-gamma.cd.st/perso/police/Astloch-Regular.ttf');}
@font-face {font-family: "Six Caps"; /*six caps*/
src: url('http://ekladata.com/sursaut-gamma.cd.st/perso/police/SixCaps.ttf');}
@font-face {font-family: "Roboto"; /*roboto black italic*/
src: url('http://ekladata.com/Z5B6_aSg_DAeSfa--kAjF4QNQTs/Roboto-BlackItalic.ttf');}
/*----------------BODY & FENÊTRE----------------*/
#body {
background:transparent url("http://ekladata.com/xrxrmQ1scWvK_Ge_rdUYMtrPNBI/THEME-LB-WARRIOR-CAT-w-bord.png")center top no-repeat;
background-color: #DCDCDC;
}
#body a {
text-decoration: none;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
}
body a:hover {
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
}
.img {margin: 2px;}
/*----------------FOND PAGE----------------*/
#background {width: 900px;}
/*----------------HEADER----------------*/
#header {
height: 550px;
}
/*----------------MENU----------------*/
#menu1 {
width: 200px;
text-align: justify;
font-family: arial;
}
#menu1 a {
color: #AD968D;
}
#menu1 a:hover {
color: #AA6F76;
}
#menu1 .module_menu_titre {height: 100%;
font-family: "Six Caps";
text-transform: uppercase;
letter-spacing: 3px;
font-size: 23pt;
background: #2A323A;
color: #CDD3DA;
padding-left: 10px;
border-bottom: 2px solid #424F5B;
border-top-left-radius: 10px;
border-top-right-radius: 10px;}
#menu1 .module_menu_contenu {
background: #272727;
color: #C0C0C0;
padding: 10px;
margin-bottom: 45px;
text-align: justify;
font-family: arial;
font-size: 13px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
#module_menu149371828 a{
display: inline-block;
width: 100%;
min-height: 18px;
margin-bottom: 3px;
padding: 1px;
text-align: center;
background-color: #B9666F;
color: #F1F1F1;
text-transform: uppercase;
font-family: "Roboto";
font-size: 12px;
opacity: 0.7;
}
#module_menu149371828 a:hover{
background-color: #C39988;
color: #422728;
border-left: 23px solid #B9666F;
}
#module_menu149371832 a{
display: inline-block;
width: 47.7%;
min-height: 18px;
margin-bottom: 3px;
padding: 1px;
text-align: center;
background-color: #B9666F;
color: #F1F1F1;
text-transform: uppercase;
font-family: "Roboto";
font-size: 12px;
opacity: 0.7;
}
#module_menu149371832 a:hover{
background-color: #C39988;
color: #422728;
}
/*----------------DERNIERS VISITEURS----------------*/
.module_menu_type_lastvisitors {}
.module_menu_type_lastvisitors img {
margin-bottom: 5px;
margin-right: 1.5px;
border-top-left-radius: 30px;
border-top-right-radius: 5px;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 15px;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg)
}
.module_menu_type_lastvisitors img:hover{ }
/*----------------ARTICLES----------------*/
.module_titre_contenu{
min-height: 50px;
border-bottom: 5px double #424F5B;
color: #713638;
padding-left: 10px;
padding-bottom: 10px;
font-family: "Six Caps";
font-size: 40px;
letter-spacing: 3px;
word-spacing: 3px;
text-transform: uppercase;
}
.module_titre_contenu a{
min-height: 50px;
color: #713638;
padding-left: 10px;
padding-bottom: 10px;
font-family: "Six Caps";
font-size: 40px;
letter-spacing: 3px;
word-spacing: 3px;
text-transform: uppercase;
}
.module_titre_contenu a:hover{
color: #A46763;
}
.article_info {
font-size: 10px;
color: #DCDCDC;
opacity: 0.5;
text-align: right;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 30px;
}
.article_info a {
color: #95776B;
text-transform: uppercase;
}
.article_info a:hover {
color: #B5B5B5;
}
.module_contenu {
background-color: #272727;
color: #F1F1F1;
text-align: justify;
font-family: arial;
font-size: 13px;
padding: 20px;
border-bottom-right-radius:5px;
border-bottom-left-radius: 5px;
border-right: 3px solid #424F5B;
border-bottom: 3px solid #424F5B;
margin-bottom: 50px;
}
.module_contenu a {
color: #D86356;
}
.module_contenu a:hover {
color: #B17C83;
}
.module_bottom {}
/*----------------PIED DE PAGE----------------*/
#footer {
text-align: center;
text-transform: uppercase;
font-size: 11px;
}
#footer a {
color: #D86356;
}
#footer a:hover {
color: #B17C83;
}
#footer:after {content: "- Thème de Fabule";}
/*----------------COMMENTAIRE----------------*/
.comment_normal, .comment_admin {
width: 98%;
}
div.commentheader{
background-color: #2A323A;
border-radius: 10px;
padding: 5px;
margin-bottom: 8px;
margin-top: 10px;
color: #566676;
}
.block-reply {width: 99%;
border-left: 3px solid #424F5B;
}
.comment-reply a{
color: #616161;
font-family: "Roboto";
}
.comment-reply a:hover{
color: #A1544E;
}
.commentnumber {
font-family: "Roboto";
font-size: 11px;
padding-left: 5px;
}
.commentpseudo {
font-family: "Roboto";
color: #9E311D;
}
.commentpseudo a {color: #9E311D;}
.commentpseudo a:hover {color: #A1544E;}
.commentdate {}
.commentavatar img {
border: 2px solid #424F5B;
}
.commentavatar img:hover {}
/*----------------BOUTONS----------------*/
input[type=button],input[type=submit], button {
margin: 9px;
margin-left: 0px;
min-width: 100px;
min-height: 20px;
background-color: #BE3A2C;
color: #F1F1F1;
font-family: "Roboto";
border: 3px solid #881A10;
text-transform: uppercase;
font-size: 15px;
letter-spacing: 2px;
}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, button:hover, .button:hover {
background-color: #881A10;
color: #F1F1F1;
font-family: "Roboto";
border: 3px solid #BE3A2C;
}
/*----------------HELPBUBBLES----------------*/
#help_bubble {
background-color: #BE3A2C;
color: #F1F1F1;
border: 1px solid #881A10;
opacity: 0.7;
box-shadow: 0px 1px 1px black;
}
/*----------------FORUMS----------------*/
.post_table_msg {
background-color: #3A3A3A;
padding: 10px;
border-bottom: 1px solid #3A3A3A;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.post_table_head {
color: #3A3A3A;
font-size: 0px;
}
.post_table_profile img{
border: 2px solid #272727;
margin-left: 10px;
margin-top: -7px;
margin-bottom: 10px;
padding: 0px;
}
.post_table_profile a{
color: #3A2728;
font-family: "Roboto";
text-transform: uppercase;
display: block;
width: 79px;
background-color: #95776B;
margin-top: 15px;
margin-left: 10px;
text-align: center;
border-radius: 30px;
margin-top: 15px;
margin-left: 10px;
text-align: center;
opacity: 0.7;
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
}
.post_table_profile a:hover{
color: #B5B5B5;
}
.post_table_profile {
background-image: url('http://ekladata.com/HCRc_M04atpy4qVct74FjK8oLlY/872859rTJbL.jpg');
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
border-bottom: 1px; solid #272727;
opacity: 0.7;
}
.forum-description {
background-color: #494949;
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
border: 4px double #363636;
}CODE HTML ACCUEIL
<div style="background-color: #95776b; width: 565px; min-height: 10px; line-height: 15px; margin-left: 0px; border: 1px solid #664446; padding: 20px; text-align: justify;"><span style="font-family: 'Astloch'; font-size: 18pt; color: #3a2728; letter-spacing: 5px;">titre quelconque ;<span style="color: #664446;"> citation comme ça, vite fait histoire de remplir le vide<br /></span></span></div>
<table>
<tbody>
<tr>
<td>
<div style="margin-top: 10px;">
<p style="text-align: center;"><img style="border: 2px solid #664446;" src="URL_IMAGE_250*250" alt="" /></p>
</div>
</td>
<td>
<div style="background-color: #494949; width: 305px; height: 210px; line-height: 11px; margin-left: 5px; border: 2px solid #664446; padding: 20px; overflow: auto; text-align: justify;"><span style="font-family: 'Six Caps'; font-size: 42pt; color: #95776b; letter-spacing: 3px;"><span style="font-size: 18pt;">CONTEXTE ;</span><br /></span><strong> <br />« petite citation » —</strong>écris ici ce que tu veux, contexte, mises à jour, bref, ce qui te sembles le plus utile!.</p>
</div>
</td>
</tr>
</tbody>
</table>
<div style="background-color: #95776b; width: 595px; min-height: 10px; line-height: 15px; margin-left: 0px; border: 1px solid #664446; padding: 5px; text-align: justify; opacity: 0.3;"><span style="font-font-size: 11px; color: #3a2728; letter-spacing: 5px;">code by Fabule ;<span style="color: #664446;"> www.fabule-ation.ek.la/<br /></span></span></div>
-
Comments
De rien de rien 8D ! Je suis tellement généreuse ! Mais après tout, je t'aiderai toujours si tu as besoin ma fabubulle ♥
J'ai pas encore étudié les codes que tu m'avais passé x) (j'ai pas eu le temps é_e mais ça va venir!), je suppose que comme toi le css et le html ça ira, par contre les template je vais découvrir et le java HAHAH XD ça m'a toujours fait peur!
Mais j'y crois toujours aussi ! Un jour on aura notre foffo et on saura le gérer et il sera tout beau (et actif) 8D
Aussi,pas la peine de me changer l'header car j'aimerais en installer un autre ;)
Ouh mon dieu que c'est beau *q*
Je pense que je vais te piquer le code htlm de l’accueil parce que je suis nulle pour les faire moi même -.-'
Coucou,si possible je souhaiterais le titre "Fantasia" sur l'header,pas de slogan s'il te plait
Merci d'avance !
Désolé d'encore t'embêter,mais quand je met l'adresse URL de l'header là ou il y à écris "HEADER MODIFIé" où je sais plus quoi il me laisse l'header du départ,c'est à dire sans le titre,je t'est mis la permission 3 si tu pouvais m'aider s'il te plait,merci d'avance.
Merci encore
Et oui c'est normal c'était pour tester pour pouvoir la redimensionner.
Bonjoureuh.
Je prends le thème et le message d'acceuil, et si tu as le temps (et l'argent) pour faire le titre celui du mien c'est Ordine.
Arheuvar.
Banswar!! o/ J'ai pris tout le thème pour un de mes blogs, merci beaucoup d'avoir mis ces superbes thèmes LS à notre disposition *^*
Une question: Comment mettre le nom de mon blog sur le header?
Bises et bonne soirée!
~Sam
Hey! Je te prend ce joli petit thème! Pourrais tu juste me créé le titre du Header à savoir
"Espérance village" ?
En attendant ta réponse N A J I M E
Super thème! Je le prends~ Au passage je te pique aussi le code HTML!
Tu pourrais me faire le header avec comme titre de blog "Animeshon no besuto" s'il-te-plaît ?
Merci! :3
salut!
Très beau thème. J'essaie encore de comprendre les codes pour en faire un aussi beau. ^w^
Je te pique la base, parce que mon inspi est partie à la poubelle ses derniers temps ;3
(magnifique thème au passage)
Add comment
Oh j'aime trop *^*