Thème 4 - look at the stars - “ Prélude à l'Illumination ”

Thème 4 - look at the stars

Written by Fabule in thèmes (l-b) on 7 August 2019 à 17:27

J'avais envie de faire un thème simple pour un blog fourre-tout, et comme il me plaît pas mal, je me suis dit pourquoi pas le mettre en libre-service, ça pourrait peut être faire des heureux!

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é

(+) Le fond du blog est une image, si vous souhaitez en changer les couleurs, donnez moi vos couleurs et je me chargerai de tout harmoniser! ♥

(+) Si vous avez photoshop, voici le lien de téléchargement du fond, si vous souhaitez changer vos couleurs vous-même!

CODE CSS:

/*----------------ENTÊTE DECLARATIVE----------------*/

@font-face {font-family: "quick";
src: url('http://ekladata.com/Y6HHKt31wKX22TEnWwKpQiKEIRU/Quicksand-Book.otf');}

@font-face {font-family: "quickb";
src: url('http://ekladata.com/kxzegZ1cMFeSNiD3K6ilzfU6a6E/Quicksand-Bold.otf');}



/*----------------BODY & FENÊTRE----------------*/

#body {
  background:url('http://ekladata.com/bp3VXivC2lmGmymcmHNqdTQUeRo/fond.png') center fixed;
  background-color: #E7E7E7;
  font-family: "quick";
  font-size: 12px;
  font-weight: bold;
}

#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;
}

.module_contenu img {text-align: center;
margin 0px;
}

/*----------------FOND PAGE----------------*/

#background {
  width: 770px;
}

/*----------------HEADER----------------*/

#header{
  height: 0px;
}

/*----------------MENU----------------*/

/****MENU 1*****/

#menu1 {
  width: 180px;
}

#menu1 a:hover{
  opacity: 0.7;
}

.background_img {
  border: 1px solid;
  border-image: linear-gradient(to right, #B0ACB2, #C6B8B7) 10;
  width: 138px;
  padding: 20px;
  background: #f8f8f8;
}

.bloctxt{
  text-align: justify;
  background: #EFEFEF;
  border: 1px solid #D8D8D8;
  padding: 10px;
}

.liens1 a{
  display: block;
  text-align: center;
  width: 94%;
  padding: 5px;
  margin-bottom: 7px;
  background: #BE9C99;
  color: #f8f8f8;
}

.liens3 a{
  display: block;
  text-align: center;
  width: 94%;
  padding: 5px;
  margin-bottom: 7px;
  background: #867D8C;
  color: #f8f8f8;
}

.liens2 a{
  display: block;
  text-align: center;
  width: 94%;
  padding: 5px;
  margin-bottom: 7px;
  background: #9D8A91;
  color: #f8f8f8;
}

.module_menu_titre{
  font-size: 0px;
}

/***shoutbox***/

.module_menu_type_shoutbox {
  text-align: justify;
}

.module_menu_type_shoutbox .module_menu_titre{
  font-size: 12px;
  padding-bottom: 30px;
  text-align: center;
  text-transform: uppercase;
  font-family: "quickb";
  color: #A78F94;
  margin-top: 20px;
}

.module_menu_type_shoutbox strong{
  font-family: "quickb";
  color: #867D8C;
}

.menu_shoutbox {
  background: #f0f0f0;
  border: 1px solid;
  border-image: linear-gradient(to right, #B0ACB2, #C6B8B7) 10;
  margin-bottom: 7px;
}

/***derniers articles***/

.module_menu_type_lastarticles {
  text-align: justify;
}

.module_menu_type_lastarticles .module_menu_titre{
  font-size: 12px;
  padding-bottom: 30px;
  text-align: center;
  text-transform: uppercase;
  font-family: "quickb";
  color: #A78F94;
  margin-top: 20px;
}

.module_menu_type_lastarticles a{
  display: block;
  width: 95%;
  padding: 5px;
  background: #BE9C99;
  margin-bottom: 5px;
  color: #eee;
  text-transform: lowercase;
}

#module_menu_type_lastvisitors img:hover{
  opacity: 0.7;
}

/***derniers visiteurs***/

.module_menu_type_lastvisitors {
  text-align: center;
}

.module_menu_type_lastvisitors .module_menu_titre{
  font-size: 12px;
  padding-bottom: 30px;
  text-align: center;
  text-transform: uppercase;
  font-family: "quickb";
  color: #A78F94;
  margin-top: 20px;
}

.module_menu_type_lastvisitors img{
  border-radius: 100px;
  background-image: linear-gradient(to right, #B0ACB2, #C6B8B7);
  max-height: 40px;
  max-width: 40px;
  margin-bottom: 5px;
  padding: 3px;
}

#module_menu_type_lastvisitors img:hover{
  opacity: 0.7;
}

/*----------------ARTICLES----------------*/

.module_titre_contenu{
  height: 100%;
  background-color: #f0f0f0;
  color: #f8f8f8;
  text-align: left;
  padding: 10px;
  font-family: "quickb";
  font-size: 14px;
  text-transform: lowercase;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-image: linear-gradient(to left, #B0ACB2, #C6B8B7);
  padding: 20px;
}

.module_titre_contenu:before {
  content: "★ ";
  color: #867D8C;
  margin-right: 5px;
}

.module_titre_contenu a{
  color: #f8f8f8;
  font-weight: bold;
}

.module_titre_contenu a:hover{
  opacity: 0.7;
  color: #A25F8B;
  font-weight: bold;
}

.article_info {
  font-size: 0px;
  text-align: right;
  font-style: italic;
  margin-bottom: 0px;
  color: #A1A1A1;
}

.module_contenu {
  background-color: #f5f5f5;
  color: #555555;
  text-align: justify;
  font-size: 12px;
  padding: 20px;
  border-bottom: 1px solid #D6D6D6;
  border-left: 1px solid #D6D6D6;
  border-right: 1px solid #D6D6D6;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  margin-bottom: 50px;
}

.module_contenu a {
  color: #bfaeaf;
  font-weight: bold;

}

.module_contenu a:hover {
  color: #867d8c;
}

.module_contenu strong{
  color: #bf9c99;
  font-family: "quickb";
}

/*----------------COMMENTAIRE----------------*/

.comment_normal, .comment_admin {
  width: 100%;
}

div.commentheader{
  background-image: linear-gradient(to right, #B0ACB2, #C6B8B7);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  margin-bottom: 8px;
  margin-top: 28px;
  font-family: arial;
  padding: 5px;
  color: #f8f8f8;
  opacity: 1;
}

div.commentbody {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  background-color: #e8e8e8;
  padding: 10px;
  margin-top: -10px;
}

.comment_admin div.commentheader{
}

.comment_admin div.commentbody {
  background-color: #e8e8e8;
}

.block-reply div.commentheader{
  margin-top: 40px;
}

.block-reply div.commentbody{
  padding: 10px;
  background: #eee;
}

.block-reply {
  border-left: 0px solid #161616;
  padding: 0px 5px 0px 5px;
}

.comment-reply a{
  color: #555;
  font-family: Arial;
  text-transform: uppercase;
  font-size: 8px;
  letter-spacing: 1px;
}

.comment-reply a:hover{
  color: #A1544E;
}

.commentnumber {
  font-family: "quick";
  color: #fff;
  font-size: 15px;
  padding-left: 5px;
  opacity: 0.7;
}

.commentpseudo {
  color: white;
  font-size: 10px;
  letter-spacing: 1px;
  opacity: 0.7;
  text-transform: uppercase;
  padding-top: 3px;
}

.commentpseudo a {color: white;}

.commentpseudo a:hover {color: white; opacity: 0.5;}

.commentavatar img {
  border: 3px solid;
  border-radius: 100px;
  margin-left: -5px;
}

.commentdate {
  font-size: 11px;
  text-align: left;
  font-style: italic;
  font-family: "quick";
  padding-top: 3px;
  text-transform: lowercase;
  color: #fff;
  opacity: 0.2;
}

/*----------------PIED DE PAGE----------------*/

#footer {
  height: 40px;
  margin-right: 20px;
  text-align: right;
  text-transform: uppercase;
  font-size: 10px;
  color: #aaa;
  font-family: "quickb";
}

#footer a {
  color: #9D3C40;
  font-weight: bold;
  opacity: 0.5;
}

#footer a:hover {
  opacity: 0.8;
}

#footer:after {content: " Thème de Fabule";}

/*----------------HELPBUBBLES----------------*/

#help_bubble {
  background-color: #222;
  color: #aaa;
  border: 3px solid #111;
  opacity: 0.7;
border-radius: 2px;
}

/*----------------BOUTONS----------------*/

input[type=button],input[type=submit], button {
  margin: 9px;
  margin-left: 0px;
  min-width: 50px;
  min-height: 20px;
  background: #A18C92;
  color: #fff;
  font-family: "quickb";
  border: 0px solid #000;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 11px;
  border-radius: 5px;
}

input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, button:hover, .button:hover {
  opacity: 0.8;
}

/*******FORUMS********/

.post_table {
  margin-bottom: 20px;
}

.post_table_msg {
  background-color: #e8e8e8;
  padding: 10px;
}

.post_table_head {color: #F7F7F7;
  font-size: 0px;
}

.post_table_profile img{
  border: 3px solid #A89DA0;
  margin-left: 10px;
  margin-top: -180px;
  margin-bottom: 10px;
  padding: 0px;
  border-radius: 100px;
}

.post_table_profile a{
  color: white;
  font-family: "quickb";
  font-size: 14px;
  text-transform: uppercase;
  display: block;
  width: 79px;
  background-color: #A89DA0;
  text-align: center;
  border-radius: 5px;
  margin-top: 105px;
  margin-left: 10px;
  text-align: center;
}

.post_table_profile a:hover{
  opacity: 0.7;
  color: white;
}

.post_table_profile {
  background-color: #BAB2B4;
  opacity: 0.8;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  border-bottom: 0px; solid #E5E5E5;
}

.forum-description {
  background-color: #e8e8e8;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ddd;
}

/*****champs*****/

input[type="text"] {
  width: 90%;
  height: 25px;
  color: grey;
  border: 1px solid #ccc;
  background: #f0f0f0;
  border-radius: 5px;
}

CODE IMAGES MENU:

<div class="background_img">
<p style="text-align: center;"><img src="http://ekladata.com/j5FbGL96YL2qYTECtKc2InPNeJQ.png" alt="blblbl" /></p>
</div>

CODE BLOC GRIS MENU:

<div class="bloctxt">ton texte</div>

CODE LIENS MENU:

/****liens roses clair****/
<div class="liens1"><a href="#">lien</a></div>

/****liens roses****/
<div class="liens2"><a href="#">lien</a></div>

/****liens mauves****/
<div class="liens3"><a href="#">lien</a></div>

<br />
Comments
1

Donnie.

Thursday 8th August 2019 at 14:10
omgggg,il est vraiment trop beau ;-; Je le prendrais sûrement !
Répondre

Voir les réponses

Fabule

Thursday 8th August 2019 at 14:46

merci beaucoup! ;-; ♥ et d'acc! hésite pas si jamais tu veux changer des couleurs ou autre!

Donnie.

Thursday 8th August 2019 at 14:48

T'inquiète pas, je m'y connais en CSS je pourrai faire ça moi-même ^^ Mais merci !

Fabule

Thursday 8th August 2019 at 14:53

C'est surtout pour le fond en fait xD C'est une image, après je peux t'envoyer le .psd si t'as photoshop!

Donnie.

Thursday 8th August 2019 at 15:17

Ah oui pourquoi pas, je veux bien ^^

Fabule

Thursday 8th August 2019 at 15:49

tout de suite ou quand tu auras besoin?

Donnie.

Thursday 8th August 2019 at 15:50

Oh tout de suite, comme ça c'est fait ^^ Si tu as le temps x)

Fabule

Thursday 8th August 2019 at 18:14

d'acc!

voilà le lien: http://ekladata.com/4V_GdaYhaPhjMRyBGRpeVabOqJI/fond.psd

Donnie.

Thursday 8th August 2019 at 18:19

Merci biennn !

Fabule

Thursday 8th August 2019 at 18:20

de rien!
2

Nébuline

Friday 9th August 2019 at 02:45
très joli thème, je le prend !
Répondre

Voir les réponses

Fabule

Friday 9th August 2019 at 19:34

merci beaucoup! :3 & d'acc!
3

Weana

Friday 9th August 2019 at 12:15
Fafa, tu es une déesse u_u

c'est magnifique, je le prends :)
Répondre

Voir les réponses

Fabule

Friday 9th August 2019 at 19:35

oh, c'est trop gentil! ;-; ♥

merci beaucoup!
4

a d è l e

Sunday 11st August 2019 at 17:16
je le prends, c'est juste trop beauu
Répondre

Voir les réponses

Fabule

Sunday 11st August 2019 at 18:05

d'acc! & merci beaucoup! ♥

a d è l e

Monday 12nd August 2019 at 15:29

de riennn
5

/Mina/

Sunday 20th October 2019 at 19:04
Trop beauuuu ! Je te le prends, merci !!
Répondre

Voir les réponses

Fabule

Sunday 20th October 2019 at 19:37

merci beaucoup!! :D et de rien!
6

.Alaska

Friday 20th March 2020 at 12:13
waouh, il est très beau ce thème. Je vais le prendre je pense, merci beaucoup!
Répondre

Voir les réponses

Fabule

Saturday 21st March 2020 at 11:43

merci beaucoup! je suis contente qu'il te plaise! :)
7

winxhajar

Monday 25th May 2020 at 19:23
C'est joli. Je le prends ! merci ~
Répondre

Voir les réponses

Fabule

Monday 25th May 2020 at 20:21

Merci! :3 D'acc!!
8

Cяilista

Sunday 2nd August 2020 at 11:31
je te le pique en attendant, ça sera plus simple pour moi comme format !!
Répondre

Voir les réponses

Fabule

Sunday 2nd August 2020 at 22:44

roh purée j'ai totalement oublié ton thème ;-; je suis désolée! (faut pas hésiter à me contacter si t'as l'impression que je t'oublie hein)

je vais essayer de pas trop tarder, je suis contente si tu trouves ton bonheur en attendant!

Cяilista

Monday 3rd August 2020 at 17:15

Ne t'inquiète pas, il n'y a aucun problème,je te l'ai déjà dit mais le temps ne presse pas !
9

noisette grillée

Thursday 20th May 2021 at 00:44
bonsoir je te pique le thème ! merci pour ce partage !!
Répondre
Suivre le flux RSS des commentaires

Add comment

Name / User name:

E-mail (optional):

Website (optional):

Comment:

Contact me in case of response

Thème 4 - look at the stars

Comments