Libre Service : Mise en page

Tu aimerais pouvoir changer le style de cette mise en page disponible en libre-service sur le forum ? Ce formulaire est fait pour toi.
En cas de souci, n'hésite pas à demander un coup de pouce.

Ancien code CSS : Oui Non

Prévisualiser : Oui Non

Editer : Oui Non

Générer la CSS - Générer le HTML - sauvegarder le code CSS

Titre

Sous-titre

Sous-sous-titre

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat et similique, eum in repellendus doloremque odit placeat vitae vel, at molestiae quas iusto unde rem porro iure, optio eveniet aliquid.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat et similique, eum in repellendus doloremque odit placeat vitae vel, at molestiae quas iusto unde rem porro iure, optio eveniet aliquid.

Exemple de Lien

Exemple de liste
Exemple de liste
Exemple de liste
Exemple de liste

Titre de niveau 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste placeat, dolore aliquid adipisci eaque enim quidem ipsa dolor similique, earum expedita, corporis unde fugiat consequuntur numquam modi quisquam eligendi laborum.

Titre de niveau 2

Titre de niveau 3

Mise en page générée par ©Miettes

CSS :

Images & couleurs

Général

Couleur de fond :

Image du haut :

Bordures du message :

Textes & Liens

Couleur du texte :

Liens

Couleur des liens :

Couleur des liens survolés :

Couleurs des titres

Dans le "header"

Couleur du texte "titre" :

Couleur du texte "sous-titre" :

Couleur du texte "sous-sous-titre" :

Dans le "message"

Couleur des textes des titres :

Couleur de la bordure des titres de niveau 1 et 2 :

Code CSS à copier :

/***  --- Mise en page message --- ***/
  .ls-mep-1{
      background: {{css.bkgColor}} url("{{css.bkgImage}}") no-repeat center top; 
      background-size: 100% auto;
      border: 1px solid {{css.borderColor}};  
      box-sizing: border-box;
      color: {{css.txtColor}};
      margin: auto; 
      padding: 1.2%;
      position: relative; 
      width:96%;
  }

  .ls-mep-1 .wrapper-titre{
    background: rgba(255,255,255, .5);
    border: 1px solid {{css.borderColor}};
    display: inline-block;
    margin: 1.2% 0 3%;
    min-width: 55%;
    padding: 1.2% 1.2% 1.2% 4%;
    position: relative;
  }

  .ls-mep-1 .wrapper-titre .titre,
  .ls-mep-1 .wrapper-titre .sous-titre,
  .ls-mep-1 .wrapper-titre .sous-titre2{
    margin:  0;
  }

  .ls-mep-1 .wrapper-titre .titre{
    color : {{css.colorTitle}};
    font-size: 30px;
    line-height: 35px;
  }

  .ls-mep-1 .wrapper-titre .sous-titre{
    color: {{css.colorSubTitle}};
    font-size: 15px;
    line-height: 20px;
  }

  .ls-mep-1 .wrapper-titre .sous-titre2{
    bottom: -2px;
    color: {{css.colorSubSubTitle}};
    font-size: 14px;
    font-style: italic;
    font-weight: normal;
    line-height: 1;
    position: absolute;
    right: 8px;
  }

  /*** Titres ***/
  .ls-mep-1 .titre1,
  .ls-mep-1 .titre2,
  .ls-mep-1 .titre3{
    color: {{css.colorTitleMsg}};
    margin-bottom: 10px;
    padding-bottom: 6px;
    text-align: center;
  }

  .ls-mep-1 .titre1{
    border-bottom: double 4px {{css.colorBorderTitleMsg}};
    font-size: 20px;
    line-height: 30px;  
  }

  .ls-mep-1 .titre2{
    border-bottom: solid 1px {{css.colorBorderTitleMsg}};
    font-size: 16px;
    line-height: 20px;
  }

  .ls-mep-1 .titre3{
    font-size: 14px;
    line-height: 15px;
    padding-bottom: 0;
  }

  /* Liens */
  .ls-mep-1 a{
    color: {{css.colorLink}} ;
    text-decoration: none;
  }

  .ls-mep-1 a:hover{
    color: {{css.colorLinkHover}} ;
    text-decoration: underline;
  }

  /* Copyright */
  .ls-ccp{
    color: #999;
    display: block;
    font-size: 11px;
    font-style: italic;
    margin: auto;
    text-shadow: #fff 0 0 4px, #fff 0 0 4px, #fff 0 0 4px, #fff 0 0 4px;
    text-align: center;
    width: 98%;
  }

  .ls-ccp a{
    color: #000;
    text-decoration: none;
  }

  .ls-ccp a:hover{
    color: #999;
    text-decoration: underline;
  }

Code HTML à copier :

<div class="ls-mep-1"><!--
--><header class="wrapper-titre"><!--
  --><div class="titre">Titre</div><!--
  --><div class="sous-titre">Sous-titre</div><!--
  --><div class="sous-titre2">Sous-sous-titre</div><!--
--></header><!--
--><div class="wrapper-content"><!--
  -->Intro

  <div class="titre1">Titre de niveau 1</div>
  Texte

  <div class="titre2">Titre de niveau 2</div>
  Texte

  <div class="titre3">Titre de niveau 3</div>
  Texte

</div><!--
--></div>

Code json à copier :

{
  "bkgColor" : "{{ css.bkgColor }}",
  "bkgImage" : "{{ css.bkgImage }}",
  "borderColor" : "{{ css.borderColor }}",
  "txtColor" : "{{ css.txtColor }}",
  "colorLink" : "{{ css.colorLink }}",
  "colorLinkHover" : "{{ css.colorLinkHover }}",
  "colorTitle" :"{{ css.colorTitle }}",
  "colorSubTitle" : "{{ css.colorSubTitle }}",
  "colorSubSubTitle" : "{{ css.colorSubSubTitle }}",
  "colorTitleMsg" : "{{ css.colorTitleMsg }}",
  "colorBorderTitleMsg" : "{{ css.colorBorderTitleMsg }}"
}