Thème LS #3 - J'aime pas le rose

Par **Aeda dans Thèmes le 26 Juillet 2021 à 14:10

Salut bande de vous :p

Après avoir mis un nouveau thème tout beau tout frais sur GraphA qui me correspond plus, je vient vous présenter un LS un thème que certains d'entres vous connaissent déjà pour l'avoir vu sur GraphA;

Il s'agissait d'un petit thème transitoire parce que j'avais envie de changer mais pas le temps pour faire un thème très élaboré alors j'ai cherché un header sur internet et de là, j'ai fait tout un thème dont je suis plutôt satistafaite.

J'aime pas le rose

Vision générale du thème :

(Cliquez-pour voir en grand.)

Zoom sur les commentaires :

(Cliquez-pour voir en grand.)

Points à marquer sur ce thème :

χ Les forums, les boutons, les commentaires auteurs, et les widgets spéciaux ne sont pas codés.
√ Les citations sont codées

Dans la version actuelle du code, le header est donné sans le titre, pour un Header avec le titre de vitre blog n'hésitez pas à me demander je le ferrai avec plaisir et cela ne me prendra pas longtemps.

Partie HTML à mettre dans un menu de type texte (vous pouvez suivre le tuto "menu du haut fixe" au besoin).
En rouge les champs à changer.

<div id="barrehaut">
<table>
<tbody>
<tr>
<td>
<div class="bienvenu">
<p><span style="color: #7a85a5;">TEXTE</span></p>
</div>
</td>
<td>
<div class="liens">
<a href="ADRESSE DE VOTRE PREMIER LIEN">Nom du lien</a>
<a href="ADRESSE DE VOTRE DEUXIEME LIEN">Nom du lien</a>
<a href="ADRESSE DE VOTRE TROISIEME LIEN">Nom du lien</a>
<a href="ADRESSE DE VOTRE QUATRIEME LIEN">Nom du lien</a>
<a href="ADRESSE DE VOTRE CINQUIEME LIEN">Nom du lien</a>
</span></div>
</td>
</tr>
</tbody>
</table>
</div>

Partie CCS :

#header {
  height: 0px;
  background: none;
}

#header-link {
  height: 0px;}

@font-face {
  font-family: "Cardinal-Alternate";
  src:url('http://ekladata.com/Y8FOtTJ9M6shCVMAv0OEcJC3AIk/Cardinal-Alternate.ttf');}

/* - - - BARRE DU HAUT - - - */
/* - - Barre (fond) - - */
#barrehaut {
  background: #fea9be;
  height:60px;
  width:1565px;
  position: fixed;
  attachment: fixed;
  top: 25px;
  margin-left: -80px;
  margin-text: 10px;
  border-bottom: 5px solid #b5428a;
  z-index: 1;
  }

/* - - Liens - - */
#barrehaut p {margin: 18px; color: #a2a2a2; margin-left: 375px;}

.liens a:hover {color: #4f6585;}

/* - - Texte - - */
.bienvenu {
  font-weight: normal;
  font-style: normal;
  font-variant: small-caps; }

/* - - - FONDS DU BLOG - - - */
/* - - Fond de la fenêtre - - */
#body {
  background: #404040;
  width: 1420px;
}

/* - - Fond de la page - - */
#background {
  background: none;
  background-repeat: repeat;
  width: 1420px;
  border: none;
  }

/* - - - MENU 1 - - - */
/* - - Général - - */
#menu1 {
  width: 300px;}

#menu1 {
  margin-top: 70px;
  border-right: none;}

#menu1
.module_menu_contenu {
  margin-right: 20px;
  margin-bottom: 35px;}

#menu1_top {
  background-image: url('https://zupimages.net/up/21/30/3tsc.png');
  height: 530px;}

/* - - Titre - - */
.module_menu_titre {
  background: linear-gradient(to left,#b5428a,#9498bf, #feb7cb);
  color: #ffffff;
  border-radius: 0px 5px 5px 0px;
  font-size: 18px;
  font-family: Ink Free;
  text-align: right;
  height: 30px;
  padding-right: 8px;}

/* - - Contenu - - */
#menu1
.module_menu_contenu_block {
  background: linear-gradient(to bottom left, #fed3c0, #ffffff);
  border-radius: 0px 0px 10px 10px;
  widht: 200px;
  margin-right: 30px;
  color: #333333;
  text-align: center;}

/* - - - MENU 2 - - - */
/* - - Général - - */
#menu2 {
  margin-top: 85px;
  border-right: none;}

#menu2 a {
  text-decoration: none;}

#menu2
.module_menu_contenu {
  margin-right: 20px;
  margin-bottom: 35px;}

/* - - Titre - - */
#menu2
.module_menu_titre {
  background: linear-gradient(to left,#b5428a,#9498bf, #feb7cb);
  color: #ffffff;
  border-radius: 5px 0px 0px 5px;
  font-size: 18px;
  font-family: Ink Free;
  text-align: right;
  padding-right: 8px;}

/* - - Contenu - - */
#menu2 {
  width: 225px;}

#menu2
.module_menu_contenu_block {
  background: linear-gradient(to bottom right, #fed3c0, #ffffff);
  border-radius: 0px 0px 10px 10px;
  widht: 220px;
  margin-left: 20px;
  color: #333333;
  text-align: center;}

/* - - - CONTENU - - - */
/* - - Article info - - */
.article_info {
  color: #7a85a5;}

.article_info a {
  color: #7a85a5;}

.article_info a:hover {
  color: #b5428a;
  text-decoration: none;}

/* - - Titre - - */
.module_titre_contenu {
  margin-top: 20px;
  margin-left: 65px;
  border: none;
  font-family: Cardinal-Alternate;
  color: #fea9be;
  background: none;
  font-size: 28px;
  }

.module_titre {
  background: none;}

.module_titre_contenu a {
  border: none;
  text-decoration: none;
  background: none;
  font-size: 28px;
  font-weit: none;
  font-family: Cardinal-Alternate;
  color: #fea9be;}

.module_titre_contenu a:hover {
  color: #b5428a;}

/* - - Contenu - - */
blockquote {
width: auto;
max-height: 300px;
overflow: auto;
background: #ededed;
letter-spacing: 0x;
color: #333333;
box-shadow: 1px 1px 3px #333333;
padding: 2px;
font-family: Georgia;
font-size: 14px;
margin: 3px;
border-radius: 5px;
margin-bottom: 5px;}

.module_contenu {
  margin-top: 20px;
  margin-left: 65px;
  margin-right: 40px;
  background: #fbf5fb;
  font-family: Helvetica;
  border: 3px dashed #fea9be;
  padding: 10px;
  font-size: 14px;}

.module_contenu a {
  color: #a86286;}

.module_contenu a:hover {
  color: #fcccaa;}

/* - - Commentairres - - */
.commentavatar img {
  filter: saturate(255%);
  -webkit-filter: saturate(255%);
  -moz-filter: saturate(255%);
  -o-filter: saturate(255%);
  -ms-filter: saturate(255%);}

.commentavatar img:hover {
  filter: saturate(185%);
  -webkit-filter: saturate(185%);
  -moz-filter: saturate(185%);
  -o-filter: saturate(185%);
  -ms-filter: saturate(185%);}

.commentheader {
  background: linear-gradient(to left,#b5428a,#9498bf, #feb7cb);
  height: 50px;
  border-top: 3px solid #ffffff;
  border-left: 3px solid #ffffff;
  border-right: 3px solid #ffffff;
  border-bottom: 3px solid #ffffff;
  border-radius: 0px 3px 3px 0px;
}

.commentbody {
  padding-bottom: 50px;
  background: linear-gradient(to bottom right, #ffffff, #fed3c0);
  padding-right: 5px;
  padding-left: 88px;
  padding-top: 5px;
  border-bottom: 3px solid #ffffff;
  border-left: 3px solid #ffffff;
  border-right: 3px solid #ffffff;}

.commentavatar img {
  border-radius: 12px;
  max-width: 65px;
  padding: 4px;
  background: #ffffff;
}

.commentavatar {
  display: block;
  position: absolute;
  margin-left: -88px;
  margin-top: -30px;}

.commentdate {
  color: #ffffff;}

.commentpseudo {
  display: block;
  position: absolute;
  margin-left: 20px;
  margin-top: -1px;}

.commentpseudo a {
  text-decoration: none;}

.block-reply .commentdate {
  display: block;
  position: absolute;
  margin-left: 500px;
  margin-top: -00px;
  color: #ffffff;}

.block-reply .commentavatar {
  display: none;}

.block-reply .commentbody {
  padding: 5px;}

.block-reply .commentheader {
  height: 35px;}

.reply .commentpseudo {color: #ffffff ; background-color: none; margin-left: 00px}
.replies .commentpseudo:before { content: " ➔ une réponse de "}
.replies [id*="comment"] a[href*="profile"] img{height: 0px; width: 0px;}
.replies .commentavatar {margin-right: 150px;}

Code CSS est fait, testé et approuvé sur mon blog test. Voici donc les quelques réglages qu'il y aura à faire avant de mettre le thème sur votre blog :

* Rendre le titre et le slogan invisible.
* Sélectionner deux un à gauche et un à droite.
* Effacer TOUTES les marges des menus, internes, externes dans contenu, titre et format puis régler la hauteur du titre à 30.
* Certaines marges doivent êtres renseignées manuellement, parce que sinon ça colle pas et je sait pas trop comment régler ça. Voici donc la capture d'écran des règles nécessaires aux marges :

Thème LS #3 - J'aime pas le rose

Voilà, une fois cela fait, vous n'avez plus qu'à copier le code et le coller dans l'emplacement prévu au CSS puis à valider. Il y a un peu plus à régler qu'à l'accoutumer et j'en suis désolée, mais comme c'est un thème fait un peu à "la va vite" certains points n'ont pas étés faits en CSS et je n'arrive pas à les régler après coup.
Si vous avez des questions ou besoin d'aide pour l'installation n'hésitez pas, je suis à votre disposition.

Si vous le voulez, demandez en commentaires, j'enlèverais le code pour vous le réserver.

Et voilà, bon certains connaissent déjà ce thème pour l'avoir vu sur GraphA. Cela fait longtemps que je voulait le changer et le proposer en libre service, car malgré sa beauté, il ne me correspond pas vraiment. Voilà qui est fait donc. J'espère que ce troisième thème vous plaît.
N'hésitez pas à me donner votre avis ou des conseils.
Bonne journée, Aeda ♥

Commentaires

Aucun commentaire pour le moment

Suivre le flux RSS des commentaires

Ajouter un commentaire

Nom / Pseudo :

E-mail (facultatif) :

Site Web (facultatif) :

Commentaire :

Me prévenir par mail en cas de réponse

Thème LS #3 - J'aime pas le rose

Commentaires