Ce design est destiné aux débutants qui n'y connaissent pas grand chose ni en CSS, ni en logiciel de dessin. Il vous suffira de suivre les indications pour le mettre sur votre blog. Ce design a été réalisé avec Fire Fox sous résolution 1024*768. Je l'ai vérifié sous résolution 800*600 et 1280*1024 et sous IE.
Ci-dessous, son aspect sous résolution 1024*768.
CHOIX DU DESIGN :
Dans la barre de menu, cliquez sur Design
Puis sélectionnez le thème graphique PRETTY IN PINK en cliquant dessus
J'ai choisi de rester en mode normal : le design sera le même dans toutes les pages et donc un seul CSS.
Cliquez sur Mode avancé (CSS) à droite. Cochez Dans mon style, collez le CSS suivant
Cliquez sur Mise en page dans la colonne de gauche, tout en bas. Choisissez une structure 1 colonne modules à gauche+1colonne article au centre
Ensuite, vous gardez l'entête et le pied de page et placez les modules voulus .
PERSONNALISATION :
Vous êtes toujours dans la partie Configurer : cliquez sur le pavé qui représente l'entête (ci-dessus celui où il est écrit TexteLibre) - contenu personnalisé.
Pour pouvoir disinguer les catégories en français des catégories en anglais, je voulais créer une ligne de séparation
Création de l'image :
J'estime la hauteur entre le bas du module et cette ligne à 40px et je créé une image avec fond transparent d'une hauteur de 40px sur 400px de large (plus large que le module). Je place la ligne tout en haut de cette image.
Dans le CSS :
Je place cette image dans cette ligne (à créer si elle n'existe pas encore)
Dans Design, vérifiez que vous avez bien sélectionné le modèle BLOGGY
En haut du CSS, vérifiez que la case "Je souhaite modifier et appliquer la feuille de style à mon blog" est bien cochée.
Si vous êtes en mode normal, vous faîtes ces modifications dans le CSS Global Mon Style Si vous êtes en mode avancé, vous faîtes ces modifications dans tous les CSS Mon Style
Pour économiser un module Texte Libre, j'avais besoin que le message "Double-cliquez pour revenir en haut de page" apparaisse à la fin de tous les articles.
Avant :
1ère étape : sur un logiciel de dessin, je créé mon message avec un fond transparent et je l'héberge
2ème étape : dans le CSS, je complète cette ligne
.afterArticle {padding-bottom:50px; background:url(l'adresse de votre message); background-position:bottom;background-repeat:no-repeat;}
padding-bottom : je créé une marge inférieure pour y mettre ma phrase background-position : je place ce message en bas background-repeat : je demande à ce qu'il ne soit pas répété
Et j'obtiens : Il me suffit ensuite de retirer le module qui se trouve en-dessous
Dans Design, vérifiez que vous avez bien sélectionné le modèle CITY LIGHTS
En haut du CSS, vérifiez que la case "Je souhaite modifier et appliquer la feuille de style à mon blog" est bien cochée.
Si vous êtes en mode normal, vous faîtes ces modifications dans le CSS Global Mon Style Si vous êtes en mode avancé, vous faîtes ces modifications dans tous les CSS Mon Style
POUR ENLEVER LA COULEUR DE FOND GRISE DANS LES MARGES EXTERIEURES ET LE CORPS
Dans Design, vérifiez que vous avez bien sélectionné le modèle RED
En haut du CSS, vérifiez que la case "Je souhaite modifier et appliquer la feuille de style à mon blog" est bien cochée.
Si vous êtes en mode normal, vous faîtes ces modifications dans le CSS Global Mon Style Si vous êtes en mode avancé, vous faîtes ces modifications dans tous les CSS Mon Style
Le CSS de ce design est vide sur mon administration. Je dois donc rajouter toutes les lignes.
Dans Design, vérifiez que vous avez bien sélectionné le modèle CAP VERT
En haut du CSS, vérifiez que la case "Je souhaite modifier et appliquer la feuille de style à mon blog" est bien cochée.
Si vous êtes en mode normal, vous faîtes ces modifications dans le CSS Global Mon Style Si vous êtes en mode avancé, vous faîtes ces modifications dans tous les CSS Mon Style
POUR ENLEVER LA COULEUR DE FOND VERTE DANS LES MARGES EXTERIEURES ET LE CORPS
La ligne existe déjà
body {margin:0px;padding:0px;background-color:#4B5E13;font-family: Verdana, Helvetica, Arial, sans-serif;font-size:x-small;}
vous modifiez ce qui est en bleu
body {margin:0px;padding:0px;background:none;font-family: Verdana, Helvetica, Arial, sans-serif;font-size:x-small;}
POUR ENLEVER LA COULEUR DE FOND VERTE QUI SUBSISTE DANS LE CORPS CENTRAL
