samedi 30 juin 2012

Template de ce blog

Ce post contient les étapes et paramétrages à effectuer pour configurer le template de ce blog dans sa version 1.0.

  1. Choisir dans les modèles simples, le modèle "épuré"
  2. Modifier le code HTML (Traiter) :
    1. Ajouter les CSS ci-dessous :
    2. <!-- Le styles -->
          <link href='http://twitter.github.com/bootstrap/assets/css/bootstrap.css' rel='stylesheet'/>
          <link href='http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css' rel='stylesheet'/>
          <link href='http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css' rel='stylesheet'/>
      
    3. Ajouter le JS avant le footer :
    4. <script src='http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js'/>
      
  3. Personnaliser le thème :
    1. largeur : 990px
    2. mise en page : 1er choix pour contenu + 1er choix pour pied de page
    3. Mode avancé :
      1. Arrière plan principal et extérieur : #fff
      2. En-tête de la date : 
        1. arrière plan : #ff8832 
        2. texte : #fff
      3. Ajouter CSS :
      4. .bs-post-resume{
        position: relative;
        margin: 15px 0;
        padding: 39px 19px 14px;
        background-color: #E5E5E5;
        border: 1px solid #ff8832;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        }
        .bs-post-resume::after {
        content: "Résumé";
        position: absolute;
        top: -1px;
        left: -1px;
        padding: 3px 7px;
        font-size: 12px;
        font-weight: bold;
        background-color: #ff8832;
        border: 0px solid #ff8832;
        color: #fff;
        -webkit-border-radius: 4px 0 4px 0;
        -moz-border-radius: 4px 0 4px 0;
        border-radius: 4px 0 4px 0;
        }
        
  4. Style à appliquer :
    1. Résumé :
    2. <div class="bs-post-resume">Texte du résumé</div>
    3. Titre 1:
    4. <div class="page-header"><h3>mon titre</h3></div>
    5. Code HTML:
    6. <pre class="prettyprint lang-html"><monhtml></monhtml></pre>