Overblog Suivre ce blog
Administration Créer mon blog
23 septembre 2008 2 23 /09 /septembre /2008 00:42
Vous êtes resté en mode normal, mais vous aimeriez un fond différent dans votre album photo.

Pour cela, il faudra aller dans le CSS : Design > Mode Avancé > cocher personnaliser

Après chaque modification, pensez à

  • enregistrer
  • faire CTRL+F5 pour écraser le cache et voir les changements à l'écran


POUR METTRE UNE COULEUR : Rajoutez ce qui est en rouge

#general {background-color:pink;}

Voir les codes couleurs


POUR METTRE UNE TEXTURE : Rajoutez ce qui est en rouge

#general {background:url(adresse de votre texture);}


POUR METTRE UNE IMAGE : Rajoutez ce qui est en rouge

#general {background:url(adresse de votre texture);background-position:center;background-repeat:no-repeat;}


Repost 0
Published by Anna K - dans Archives
commenter cet article
22 septembre 2008 1 22 /09 /septembre /2008 00:37

C'est seulement possible pour la newsletter que vous créez, pas celle qui est envoyée automatiquement à chaque nouvelle parution d'article.

Donc vous cliquez sur :

  • Publier
  • Newsletter
  • Créer une nouvelle Newsletter

Votre éditeur d'article apparaît.

Vous cliquez sur :

  • accéder aux fonctions avancées
  • éditer la source.

Pour une couleur, vous collez en mode source

<div style="background: #000000 ;">

Votre texte

</div>

 avec votre propre code couleur.

Pour une texture, vous collez en mode source

<div style="background: url(adresse de la texture);">

votre texte

</div>


Pour une image de fond, vous collez en mode source

<div style="background:url(adresse de l'image) repeat scroll ;">

Votre texte

</div>


Pensez, le cas échéant, à changer la couleur de la police pour que la newsletter soit lisible.



Repost 0
Published by Anna K - dans Archives
commenter cet article
21 septembre 2008 7 21 /09 /septembre /2008 00:23
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

adminv2.gif
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


body {margin:0px; padding:0px; font-family: Pristina,Verdana, Helvetica, Arial, sans-serif; font-size:small;background-color:none;
background:url(http://idata.over-blog.com/1/29/47/23/Fonds-carr--s/a3.gif);}
html { scrollbar-track-color: #E4CBA3;scrollbar-shadow-color: #E4CBA3;scrollbar-highlight-color:#E4CBA3;scrollbar-face-color: #D5AF73;scrollbar-darkshadow-color: #E4CBA3;scrollbar-3dlight-color: #E4CBA3;scrollbar-arrow-color: #E4CBA3 ; }
#global {width:700px;background-color:none;
background:url(http://nsm01.casimages.com/img/2008/09/20//080920074107249682515170.gif);
background-repeat:no-repeat;background-position:top center;}

#ln_0 {background-color:none;}

#cl_1_0 {width:30%;}
#cl_1_1 {width:66%;}
input {color:#695244;}

a {text-decoration:none; color:#552325; }
a:hover {text-decoration:underline; color:#695244;}

#ln_0 {background:none;color:#BE5C61;font-weight:bold;}
#top h1 {padding:0px; margin:0px;}
#top  {margin:0px; padding:0px;  border:0px none;height:150px;width:100%;}


#ln_2 {height:170px;}
#footer {margin-top:10px; position:relative; color:#BE5C61; background-color:none;}
#footer p {margin:0px; padding: 10px;}

#ln_1 {height:700px;overflow:auto;}
.beforeArticle {padding:0px 0px 5px 0px; margin:0px; width:100%; color:#000;}
.article {margin-top:0px; padding:0px; margin-bottom:5px;}
.contenuArticle {color:#552325;font-family: Pristina,Verdana, Helvetica, Arial, sans-serif;font-size:150%;}
.date {margin-right:10px;color:#552325;font-family: Pristina,Verdana, Helvetica, Arial, sans-serif;}
.titreArticle {text-decoration:none; color:#BE5C61;font-size:140%;font-weight:bold;}
.titreArticle:hover {color:#000;}
.divTitreArticle h2 {text-align:center;}
.afterArticle {color:#552325;font-family: Pristina,Verdana, Helvetica, Arial, sans-serif;font-size:110%;border-bottom:1px solid #552325;}

.box { margin:0px; padding:0px; margin-bottom:10px; border:0px solid #F6A5EE;font-family: Pristina,Verdana, Helvetica, Arial, sans-serif;font-size:120%; }
.box-titre h2 {color:#BE5C61; margin-left:10px; margin-right:10px; padding-top:10px; margin-bottom:0px;font-size:140%;font-weight:bold;}
.box-titre {padding:0px; text-align:center;font-family: Pristina,Verdana, Helvetica, Arial, sans-serif; }
.box-content {overflow:auto; padding:2px 5px; color:#552325;}
.box-content li {color:#552325;}

.h2commentMessage {color:#552325;font-size:110%;}
.commentMessage {background-color:#BE5C61;;padding:5px; border:1px dotted #000; margin:0px;color:#000000;font-size:140%;}
.commentOption {text-align:right; font-size:100%; color:#000; margin-bottom:10px;}

.beforePage {padding:0px 0px 5px 0px; margin:0px; width:100%; color:#000;}
.page {margin-top:0px; padding:0px; margin-bottom:5px;}
.pageContent {font-family: Pristina,Verdana, Helvetica, Arial, sans-serif;color:#552325;font-size:120%; }
.divPageTitle h2 {color:#BE5C61;text-align:center;height:60px;padding-top:30px;}
.divPageTitle h2:hover {text-decoration:underline; color:#000;}
.afterPage {}

.calendarTop1 { color:#000; }
.calendarToday1 {color:#000;}
.calendarDays1 {color:#000;}
.calendarHeader1 {color:#000;}
.calendarTable1 {color:#000;width:95%;}


#formComment {background-color:#BE5C61;}

#general #cl_1_0 {width:100%;}
#general #ln_1 {background:none;}
#general #ln_2 {background:none;}

Enregistrez.

CHOIX DE LA CONFIGURATION

Dans la barre de menu, cliquez sur Configurer

adminv2.gif

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é.

Cliquez sur Editer la source

Copiez dans la source

<div style="text-align: right;">Design by <a href="http://annak.over-blog.com/" target="_blank">Anna K</a>.<br /></div>
<br /><br />
<table style="text-align: left;" border="0" cellspacing="1" cellpadding="1" width="100%">
<tbody style="text-align: left;">
<tr style="text-align: left;">
<td style="text-align: left;"><span style="font-size: 36pt;">Les Design d'Anna K</span></td>
</tr>
</tbody>
</table>

DesignAnnaK : remplacez par le titre de votre blog et validez.

Je crois que j'ai fait le tour. Si vous le testez, dîtes-moi ce que ça donne.
Repost 0
24 août 2008 7 24 /08 /août /2008 00:57

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)

.categorie .box-content {background-image:url(http://nsm01.casimages.com/img/2008/01/26//08012608163962651646307.gif) ;background-position:bottom;background-repeat:no-repeat;}


Ce n'est pas bien difficile à réaliser, il faut juste bien estimer la hauteur de l'image pour qu'elle se place bien sans empiéter sur les liens

Repost 0
Published by Anna K - dans Archives
commenter cet article
22 août 2008 5 22 /08 /août /2008 00:38



AVANT TOUTES ACTIONS :

  • 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 ENLEVER LE FOND BLEU FONCE DANS L'ENTETE


La ligne existe déjà

#top    { padding:5px; background: url(http://fdata.over-blog.com/99/00/00/01/templates/103/default/article/common/pics/top.png) repeat-x scroll top left; color:#FFF;border-bottom: 1px solid gray; margin-bottom: 10px; }

Vous modifiez ce qui est en rouge

#top    { padding:5px; background:none; color:#FFF;border-bottom: 1px solid gray; margin-bottom: 10px; }

POUR ENLEVER LE FOND BLEU FONCE DANS LE PIED DE PAGE


La ligne existe déjà

#footer   { clear:both;margin-top:15px  padding:10px; background: url(http://fdata.over-blog.com/99/00/00/01/templates/103/default/article/common/pics/top.png) repeat-x scroll bottom left; color:#FFF; border-bottom: 1px solid gray; }

Vous modifiez ce qui est en rouge

#footer   { clear:both;margin-top:15px  padding:10px; background: none; color:#FFF; border-bottom: 1px solid gray; }

POUR ENLEVER LA COULEUR DE FOND DANS LES COMMENTAIRES ET LES REPONSES


La ligne existe déjà

.commentMessage  { padding:5px; border:1px dotted #999999;background:#F8F8F8; margin:0px;}

Vous modifiez ce qui est en rouge

.commentMessage  { padding:5px; border:1px dotted #999999;background:none; margin:0px;}

POUR ENLEVER LE FOND GRIS DANS LES TITRES DE MODULE


Les lignes existent déjà

.box-titre  {background:#F90; margin:0px; padding:0px;}
.box-titre h2{background:#677787; margin:0px;margin-left:20px; padding:0px; color:#FFF; font-weight:bold;}

Vous modifiez ce qui est en rouge

.box-titre  {background:none; margin:0px; padding:0px;}
.box-titre h2{background:none; margin:0px;margin-left:20px; padding:0px; color:#FFF; font-weight:bold;}

Repost 0
Published by Anna K - dans Archives
commenter cet article
21 août 2008 4 21 /08 /août /2008 00:41

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

Repost 0
Published by Anna K - dans Archives
commenter cet article
16 août 2008 6 16 /08 /août /2008 00:05



AVANT TOUTES ACTIONS :

  • 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


La ligne existe déjà

body{margin:0px; padding:0px; background-color:#74858C; 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 LE FOND BEIGE DANS L'ENTETE


La ligne existe déjà

#header{ text-align:center; border:1px solid #666; margin-bottom:5px; background-color:#FDEBC1; border-bottom: 1px solid gray;}

Vous modifiez ce qui est en rouge

#header{ text-align:center; border:1px solid #666; margin-bottom:5px; background:none; border-bottom: 1px solid gray;}

POUR ENLEVER L'ENCADREMENT  DANS L'ENTETE


Toujours dan cette ligne

#header{ text-align:center; border:1px solid #666; margin-bottom:5px; background-color:#FDEBC1; border-bottom: 1px solid gray;}

Vous modifiez ce qui est en rouge

#header{ text-align:center; border:1px solid #666; margin-bottom:5px; background-color:#FDEBC1; border-bottom: 0px solid gray;}

POUR ENLEVER LE FOND GRIS DANS LES TITRES DES MODULES


Les lignes existent déjà

.box h2           { background-color:#999;  color:#FFF; margin-left:10px; margin-right:10px; margin-top:0px; margin-bottom:0px; }
.box-titre         { position:relative; margin-right:10px; margin-left:10px; background-color:#CCCC99;  padding:0px; text-align:center; }


Vous modifiez ce qui est en rouge

.box h2           { background:none;  color:#FFF; margin-left:10px; margin-right:10px; margin-top:0px; margin-bottom:0px; }
.box-titre         { position:relative; margin-right:10px; margin-left:10px; background:none;  padding:0px; text-align:center; }


POUR ENLEVER LA COULEUR DE FOND DANS LA DATE


La ligne existe déjà

.beforeArticle {padding:0px 0px 5px 0px; margin:0px; border-bottom:1px solid #808080; width:100%; background-color: #C9E3ED;}

Vous modifiez ce qui est en rouge

.beforeArticle {padding:0px 0px 5px 0px; margin:0px; border-bottom:1px solid #808080; width:100%; background:none;}

POUR ENLEVER LE FOND GRIS DANS L'ARTICLE


La ligne existe déjà

.article    { margin-top:0px; padding:0px; background-color:#F9F8FA; border:1px solid #666; margin-bottom:5px;}

Vous modifiez ce qui est en rouge

.article    { margin-top:0px; padding:0px; background:none; border:1px solid #666; margin-bottom:5px;}

Repost 0
Published by Anna K - dans Archives
commenter cet article
15 août 2008 5 15 /08 /août /2008 00:21



AVANT TOUTES ACTIONS :

  • 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.

POUR ENLEVER LE FOND ROUGE DANS L'ENTETE


Il faut rajouter cette ligne

#header{background:none;}

POUR ENLEVER L'ENCADREMENT ROUGE DES MODULES


Il faut rajouter ces lignes

.box {background:none;}
.box-titre {background:none;}
.box-titre span {background:none;}
.box-titre  h2{background:none;}
.box-content {background:none;}
.box-footer  {background:none;}
.box-footer span {background:none;}
.box-footer h2 {background:none;}

POUR ENLEVER LE FOND ROUGE DANS LE PIED DE PAGE


Il faut rajouter la ligne

#footer {background:none;}

POUR ENLEVER LA COULEUR DE FOND DANS LES COMMENTAIRES ET LES REPONSES


Il faut rajouter la ligne

.commentMessage {background:none;}

Repost 0
Published by Anna K - dans Archives
commenter cet article
8 août 2008 5 08 /08 /août /2008 00:27

1ère étape :

Créez avec votre logiciel de dessin, une image de la largeur du module avec écrits les mots que vous voulez voir apparaître. 

Pensez à mettre un fond transparent, ce sera mieux.

Par exemple :



2ème étape
:

Actuellement, votre module ressemble à :



On va effacer  "inscription à la newsletter"

Dans le CSS Global, on va rajouter

.newsletter .box-content {visibility:hidden;}



Tout le contenu du module disparaît, mais on a besoin du cadre d'enregistrement. On va donc rajouter :

.newsletter input {visibility:visible;}



Nous avons maintenant à l'écran




3ème étape :

On va mettre notre image dans le CSS Global

.newsletter {background:url(http://www.casimages.com/img/gif/0707260454356265913962.gif);
background-repeat:no-repeat;background-position:center;}


et on obtient

Repost 0
Published by Anna K - dans Archives
commenter cet article
7 août 2008 4 07 /08 /août /2008 00:51



AVANT TOUTES ACTIONS :

  • 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


Vous rajoutez la ligne

#ln_1 {background:none!important;}

POUR ENLEVER LE FOND VERT FONCE DANS L'ENTETE


La ligne existe déjà

#top {padding:5px; background-color:#99CC00;color:#FFF; border:1px solid #99CC00;}

Vous modifiez ce qui est en rouge

#top {padding:5px; background:none;color:#FFF; border:1px solid #99CC00;}

POUR ENLEVER L'ENCADREMENT VERT FONCE DANS L'ENTETE


Toujours dan cette ligne

#top {padding:5px; background-color:#99CC00;color:#FFF; border:1px solid #99CC00;}

Vous modifiez ce qui est en rouge

#top {padding:5px; background-color:#99CC00;color:#FFF; border:0px solid #99CC00;}

POUR ENLEVER LA COULEUR DE FOND DANS LES COMMENTAIRES ET LES REPONSES


La ligne existe déjà

.commentMessage {padding:5px;border:1px dotted #000000;background-color:#99CC00;margin:0px;}

Vous modifiez ce qui est en rouge

.commentMessage {padding:5px;border:1px dotted #000000;background:none;margin:0px;

Repost 0
Published by Anna K - dans Archives
commenter cet article