Magazine

Créer son thème dotClear 1.2

Publié le 29 juillet 2011 par Menerve
Modification du Theme "Default" (le thème par défaut de dotClear 1.2, donc):
  1. copie du dossier /themes/default dans /themes/custom
     
  2. sélection du theme dans l'outil Gestionnaire des thèmes
     
  3. passage en 990px de large (la résolution d'écran minmale aujourd'hui est de 1024*768px):
    *modif layout.css: #page 990px; margin 1em auto; #main 700px;
    *agrandissement de /custom/img/page.png à 990px
     
  4. personnalisation de l'image de fond du titre:
    *redimensionnement de /custom/img/top.png à 990px
    *changement des couleurs (outil colorier de Gimp) (sélection à la baguette magique, seuil 50)
     
  5. changer les couleurs:
    *Vert de la colonne de droite:
    modif style.css: rechercher #9ED200
    *Vert du calendrier:
    modif style.css: rechercher #493 (noms des jours); rechercher #EFA & #493 (jour présent)
    *Liens:
    modif style.css: lignes 100 à 108
    *Billets dans une boite aux coins supérieurs arrondis:
    modif style.css: (.post-title; .post-title; .post-info)
     
  6. changer la police de caractères:
    *modif style.css: remplacer par font-family: serif; dans body{} et h1, h2, h3, h4, h5, h6{}
     
  7. Liens soulignés de pointillés:
    *modif style.css:
    ajouter border-bottom-width:1px;
    border-bottom-style:dotted;
    text-decoration: none; à a{} (ligne 100)
     
  8. Lien nom du blog:
    *modif style.css:
    rajouter background-color: transparent;
    border-width:3px 0 3px 0;
    border-style:dotted;
    padding: 5px; à #top h1 a{}
    rajouter ensuite #top h1 a:hover{
    padding: 1px 5px 1px 5px;}
     
  9. enlever le lien DotClear en bas de page
    *modif style.css (ligne 323):
    rajouter visibility: hidden; à #footer a{}
     
  10. enlever les liens du début de page:
    *enlever la bordure grise en haut:
    modif style.css (ligne 46): commenter border-top: 10px solid #DDD;
    *enlever le prélude:
    modif layout.css (ligne 21): ajouter display: none; à #prelude{}
     
  11. agrandissement de la police:
    *modif syle.css: enlver font-size: 80% dans body{}
     
Et voici en bonus que je vous propose de télécharger le thème de l'Alternative Web :)
dotClear

Retour à La Une de Logo Paperblog