Profil

  • Christelle
  • retrouvez-moi sur : http://www.awerpi.fr
  • retrouvez-moi sur : http://www.awerpi.fr

Photo.Graph

Catégories

8 février 2008 5 08 /02 /février /2008 16:58
Vous souhaitez modifier la mise en page de votre blog ? Et bien voilà comment procéder...
Pour commencer, il suffit d'aller dans votre administration, puis dans "design", puis dans "mode avancé", puis d'aller en bas de la fenêtre de css, et de cliquer sur "Expert en CSS ? Cliquez ici pour définir les héritages de votre blog…" 
Maintenant vous allez définir les héritages de votre blog. 


héritage css

Décocher les trois premières cases vous ouvre les portes de la liberté !



Les classes CSS que vous pouvez trouver sans décocher les cases d'héritage :

Généralités sur le corps du blog
body {}

Liens (hover = survolés)
a {}
a:hover {}

Entête du blog : (H1 = titre)
#top  {}
#top h1 {}

Pied de page du blog :
#footer {}

Modules :
.box {}

Articles :
.article {}
.date {}
.titreArticle {}

Commentiares :
.commentMessage {}
.commentOption {}

Pages : (H2 = titre)
.page {}
.divPageTitle h2 {}

C'est peu...


Si vous décochez les deux premières cases (Feuille générale pour le template Feuille générale pour une variation) et  vous pourrez accéder aux variations suivantes (qui complètent les précédentes)

/* ////////////////////////////// */
/* Feuille générale pour une variation */
/* ------------------------------ */

Généralité du corps du blog
body {}
h1 {}
h2 {}
h3 {}
a {}
a:hover {}
legend {}
li {}
img {}
input {}

Ensemble du blog :
#global {}

Entête du blog :
#header{} 
#top  {}
#top h1 {}
#top .topLien {}
#top .topLien:hover {}

Pied de page :
#footer {}
#footer p {}

Règlementation over-blog :
#reglementBlog h1 {}

Configuration des articles :
.article {}
.article p {}
.contenuArticle {}
.date {}
.afterArticle {}
.afterArticle .options {}
.linkComment{}
.linkTrackback{}
.linkRecommend{}
.linkAddComment{}
.beforeArticle {}
.topic {}
.topic a {}
.topic a:hover { }
.titreArticle {}
.divTitreArticle {}
#articleSeul {}
.GcheTexte {}
.DrteTexte {}
.CtreTexte {}
.plusExtrait {}
.hitcitation {}
.hitencart {}
.hitimportant {}
.hitperso1 {}
.hitperso2 {}

Listes des articles (si le blog est configuré pour avoir les résumés à l'accueil) :
.listArticles {}
.resumeArticle {}

Affichage des commentaires :
.h2commentMessage {}
.comment {}
.comment hr {}
.afterReactions {}
.afterReactions .linkAddComment {}
.commentMessage {}
.commentOption {}
.reponseMessage {}

Formulaire de saisie d'un commentaire :
#formComment {}
#formComment h2 {}
#formComment label {}
#formComment input {}
#formComment textarea {}

Trackback :
#addTrackback {}
#addTrackback h2 {}
.showTrackback {}
.showTrackback a {}
.showTrackback a:hover {}
.showTrackback h2 {}
.afterReactions .linkAddTrackback {}
.h2Trackback {}
.nocomm

Fenêtre d'ajout d'un trackback :
#divTrackBack {}
#divTrackBack h2 {}
#divTrackBack input {}
#divTrackBack textarea {}

Fenêtre de recommandation
#divRecommander {}
#divRecommander span {}
#divRecommander h2 {}
#divRecommander input {}
#divRecommander textarea {}

Pagination du blog :
.pagination {margin:10px;}

Modules :
.box {}
.box-titre {}
.box-titre h2 {}
.box-content {}
.box-content p {}
.box-content ul {}
.box-content li {}
.box-footer {}
.basLien {}
.basLien:hover {}
.box-content .listAll {}
.box-content .listAll a {}

Module de présentation
#Presentation span {}
#Presentation .box-titre {}
#Presentation strong {}

Module du calendrier
#Calendrier .box-content {}
.calendarTop1 {}
.calendarToday1 {}
.calendarDays1 {}
.calendarHeader1 {}
.calendarTable1 {border:0px none;}

Module Newsletter
#divNewsletter h2 {}
#divNewsletter input {}
#divNewsletter .newsletter li {}
#divNewsletter {}
#Newsletter {}
#Newsletter form {}
#Newsletter {}
#Newsletter form {}

Module recherche
#Recherche {}
#Recherche form {}

Mise en page des pages
.page {}
.page p {}
.pageContent {}
.afterPage {}
.afterPage .options {}
.beforePage {}
.divPageTitle h2 {}
.divPageTitle {}


En décochant la troisième case (Feuille de structure générique) vous pourrez modifier la taille des colones et de la mise en page des éléments du blog :

/* ////////////////////////////// */
/* Feuille de structure générique */
/* ------------------------------ */

body, html {}
#global {}
.ln {}
.cl {}

#ln_1 {}
#cl_0_0 {}
#cl_1_0,#cl_1_2 {}
#cl_1_1 {}
#cl_2_0 {}

 

La dernière croix ne sert à rien... un mystère d'Over-blog !

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
22 janvier 2008 2 22 /01 /janvier /2008 14:23
La syntaxe du CSS est très simple : comme de la grammaire ! (niveau CM, rassurez-vous !) 

  Grammaire :     Sujet               complément                 adjectif
 
  Syntaxe :     Sélecteur          { propriété      :             valeur } 
 
 
Et, j’allais presqu’oublier, il faut avoir quelques notions d’anglais… 
 
 
Pour que ce soit plus simple prenons un exemple : nous allons dire en css que nous voulons que l’ensemble du document ait un arrière plan de couleur rouge.


Sujet : le corps                  body
Complément : arrière plan         background
Adjectif : rouge                 (cf. article sur les codes hexadécimaux

                



____________________________
Ce qui nous fait en CSS
body {background: #CC0000;} 
________________________________
 




Avertissement :
Il ne faut pas oublier les accolades {}
Ne pas confondre les deux points : avec le signe égale =
Ne pas mettre de guillemets (contrairement au html)
Mettre des points virgules entre chaque propriété.
 
Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
21 janvier 2008 1 21 /01 /janvier /2008 08:10

On m'a souvent posé la question : mais c'est quoi le css ???
Et bien, le CSS est tout simplement un langage (Cascading Style Sheets). Pas comme le patois, mais un langage codé qui est utilisé pour définir l’aspect d’un site ou d’un blog. Il gère par exemple la couleur du fond de la page, les images, la couleur et le type de police de caractère. Dans chaque site, ou blog comme ici chez Over-Blog, le css est un petit fichier rempli de texte et de codes dans lequel se définissent les aspects visuels généraux.

 


L’avantage ?
En plus de pouvoir le modifier facilement, il offre aussi la possibilité de généraliser l'aspect d'un site ou d'un blog. En effet, il n’est plus nécessaire de définir dans chaque page le style qui désiré. C’est donc plus rapide et moins lourd à charger. Ca évite les petites erreurs de styles qu’on aurait pu laisser passer.


Comment l’utiliser ?

Le fichier CSS (par exemple nommé style.css) est un fichier indépendant placé à la racine du site web. Il est ensuite indiqué dans chaque pages web par l’utilisation d’un petit code comme ci-dessous :

<head><link rel="stylesheet" type="text/css" href="style.css" /></head>

Dans le cas d’un blog il n’est pas nécessaire de l’héberger, c’est pris en compte par la plateforme. 


Comment le trouver dans Over-Blog ?
Pour Over-Blog, cette feuille de style est accessible en allant dans l’administration puis dans "design", puis dans "mode avancé". 

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
11 janvier 2008 5 11 /01 /janvier /2008 17:15
Les codes hexadécimaux des couleurs sur le web :
Pour afficher les couleurs sur internet il faut indiquer au navigateur un dièse (#) et un code hexadécimal (comme son nom l'indique, composé de 6 chiffres). Inséré dans votre feuille de style (CSS) ou dans votre code HTML, le code affichera une couleur.
Regardez ci-dessous les tableaux, vous pouvez trouver quelques couleurs et les codes correspondants.


 
 

Code hexadécimal

Couleur correpondante

#FFFFFF  
#FFFFCC  
#FFFF99  
#FFFF66  
#FFFF33  
#FFFF00  
#FFCCFF  
#FFCCCC  
#FFCC99  
#FFCC66  
#FFCC33  
#FFCC00  
#FF99FF  
#FF99CC  
#FF9999  
#FF9966  
#FF9933  
#FF9900  
#FF66FF  
#FF66CC  
#FF6699  
#FF6666  
#FF6633  
#FF6600  
#FF33FF  
#FF33CC  
#FF3399  
#FF3366  
#FF3333  
#FF3300  
#FF00FF  
#FF00CC  
#FF0099  
#FF0066  
#FF0033  
#FF0000  
#66FFFF  
#66FFCC  
#66FF99  
#66FF66  
#66FF33  
#66FF00  
#66CCFF  
#66CCCC  
#66CC99  
#66CC66  
#66CC33  
#66CC00  
#6699FF  
#6699CC  
#669999  
#669966  
#669933  
#669900  
#6666FF  
#6666CC  
#666699  
#666666  
#666633  
#666600  
#6633FF  
#6633CC  
#663399  
#663366  
#663333  
#663300  
#6600FF  
#6600CC  
#660099  
#660066  
#660033  
#660000  
#CCFFFF  
#CCFFCC  
#CCFF99  
#CCFF66  
#CCFF33  
#CCFF00  
#CCCCFF  
#CCCCCC  
#CCCC99  
#CCCC66  
#CCCC33  
#CCCC00  
#CC99FF  
#CC99CC  
#CC9999  
#CC9966  
#CC9933  
#CC9900  
#CC66FF  
#CC66CC  
#CC6699  
#CC6666  
#CC6633  
#CC6600  
#CC33FF  
#CC33CC  
#CC3399  
#CC3366  
#CC3333  
#CC3300  
#CC00FF  
#CC00CC  
#CC0099  
#CC0066  
#CC0033  
#CC0000  
#33FFFF  
#33FFCC  
#33FF99  
#33FF66  
#33FF33  
#33FF00  
#33CCFF  
#33CCCC  
#33CC99  
#33CC66  
#33CC33  
#33CC00  
#3399FF  
#3399CC  
#339999  
#339966  
#339933  
#339900  
#3366FF  
#3366CC  
#336699  
#336666  
#336633  
#336600  
#3333FF  
#3333CC  
#333399  
#333366  
#333333  
#333300  
#3300FF  
#3300CC  
#330099  
#330066  
#330033  
#330000  
#99FFFF  
#99FFCC  
#99FF99  
#99FF66  
#99FF33  
#99FF00  
#99CCFF  
#99CCCC  
#99CC99  
#99CC66  
#99CC33  
#99CC00  
#9999FF  
#9999CC  
#999999  
#999966  
#999933  
#999900  
#9966FF  
#9966CC  
#996699  
#996666  
#996633  
#996600  
#9933FF  
#9933CC  
#993399  
#993366  
#993333  
#993300  
#9900FF  
#9900CC  
#990099  
#990066  
#990033  
#990000  
#00FFFF  
#00FFCC  
#00FF99  
#00FF66  
#00FF33  
#00FF00  
#00CCFF  
#00CCCC  
#00CC99  
#00CC66  
#00CC33  
#00CC00  
#0099FF  
#0099CC  
#009999  
#009966  
#009933  
#009900  
#0066FF  
#0066CC  
#006699  
#006666  
#006633  
#006600  
#0033FF  
#0033CC  
#003399  
#003366  
#003333  
#003300  
#0000FF  
#0000CC  
#000099  
#000066  
#000033  
#000000  
Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
11 janvier 2008 5 11 /01 /janvier /2008 15:59

La symbolique :

Plusieurs critères sont en prendre en compte lors de la création visuelle support un support papier ou multimédia. Sur ce blog, nous ne parlerons que du multimédia, essentiellement du monde des blogs et des sites web. Le critère que je considère comme le plus important dans le processus de création et de mise en œuvre, celui qui pour moi est à la base de tout, c’est le code couleur.

 

Pourquoi parler de code ?
Parce que l’enjeu c’est de définir une chaîne de couleur qui donnera une sensation ou une idée, ce qui est rarement la même chose avec une seule couleur. Par exemple, si vous prenez le rouge : quelqu’un aura l’impression que c’est pour illustrer l’énergie, la jeunesse, le dynamisme. Quelqu’un d’autre pensera que c’est pour donner une impression de violence, de destruction voire de haine. Les goûts et les couleurs sont dans la nature comme on dit…
Le code couleur utilise plusieurs couleurs et offre une combinaison qui va préciser l’idée et la symbolique. Le rouge associé au bordeaux, ou au doré va donner une sensation de luxe et de préciosité, le rouge et le orange va donner de l’énergie, associé ce sera pour exprimer le sérieux… etc…
 
Pour avoir une idée approximative de la symbolique des couleurs :
Nous avons vu plus haut qu’une couleur peut-être associée à une idée, à une sensation ou a un symbole. C’est le reflet d’une culture et d’une société. J’en entends dire : « moi j’aime le bleu parce que c’est beau pas parce que ça représente une absurdité du genre le ciel ou la mer ! ». C’est parce que vous ne mesurez pas à quel point l’on porte les traces de notre culture et de notre société. Les symboles sont forts, et même si on n’en a pas conscience, on fonctionne et on vit avec en étant esclave de leurs significations. A l’époque de la monarchie, ce n’était pas ridicule de s’habiller en jaune, bien au contraire… c’était la couleur royale. L’image du rayonnement et du soleil pour la grandeur d’un personnage. Et aujourd’hui vous en connaissez beaucoup qui vont faire les courses entièrement habillés de jaune ? Croyez-vous qu’en cas d’incendie vous verriez facilement un instincteur s’il était bleu ? Pensez-vous qu’un papier toilette de couleur brune se vendrait aussi bien que le sempiternel papier rose ?
ET si vous ne croyez pas encore à la force des symboles, faites un test : placez une bande rouge sur le sol, et observez… Personne n’y mettra le pied, le reflexe sera de l’enjamber. C’est un moyen qui est d’ailleurs utilisé dans les hôpitaux en gériatrie et dans les maisons de retraites. Le personnel colle des bandes rouges sur le sol pour que les patients souffrant d’alzeimer ne s’éloignent pas car ils n’osent pas franchir la ligne rouge.
 
Selon une étude de l’école polytechnique de Montréal (CRIM), voici quelques symboles.
 
ROUGE
BLEU
VERT
JAUNE
BLANC
Force
Passion
Puissance
Interdiction
Danger
Courage
Action
Violence
Haine
Force
Paix
Vertu
Immatérialité
Méditation
Sagesse
Rêverie
Confiance
Bonté
Calme
Sécurité
Foi
Féminité
Espérance
Nature
Immortalité
Repos
Foi
Jeunesse
Fécondité
Satisfaction
Calme
Science
Conscience Idéalisme
Action
Luminosité
Orgueil
Jalousie
Calme
Sécurité
Pureté
Innocence
Chasteté
Richesse
Silence

 

OR/ARGENT ORANGÉ VIOLET GRIS NOIR
Immortalité
Richesse
Gloire (or)
Respect (ar.)
Dignité (ar.)
Energie
Ambition
Enthousiasme
Imagination
Richesse
Honneur
Politesse
Jalousie
Mystère
Spiritualité
Mélancolie
Tristesse
Modestie
Religion
Inconscient
Secret
Ténèbres
Mort
Piété
Noblesse
Sobriété
Tristesse
Modernisme
Peur
Monotonie
Mort
Deuil
Nuit
Mystère
Monotonie
Tristesse
Détresse
Angoisse
Noblesse
Distinction
Élégance
Silence

 
Mais comme j’ai expliqué plus haut, la couleur dépend de la société et de la culture. C’est pourquoi la symbolique peut-être différente si l’on change de pays.
 
  ROUGE BLEU VERT JAUNE BLANC
Chine Joie
Mariage
Paradis
Légèreté
Dynastie Ming
Paradis
Légèreté
Naissance
Santé
Force
Mort
Pureté
Egypte Mort
Méchanceté
Désert
Vertu
Vérité
Fidélité
Immortalité
Fertilité
Force
Islam
Joie
Prospérité
Joie
Fête
Etats-unis Danger Masculinité Sécurité Lâcheté Pureté
Inde Vie
Créativité
... Prospérité
Fertilité
Succès Mort
Pureté
Japon Colère
Danger
Méchanceté
Bassesse
Futur
Jeunesse
Énergie
Grâce
Noblesse
Mort
 
 
Alors quand on réalise un support multimédia, un site internet, un blog, le mieux c’est de réfléchir au message que l’on veut partager et définir avant toute chose une combinaison de couleurs adaptées.
 
Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
6 décembre 2007 4 06 /12 /décembre /2007 13:28

photo.graph
© http://www.awerpi.fr
photo.graph
Webdesign      Graphisme      Photographie      E-cards      Internet      Technologie      Informatique      Divers
photo.graph

Repost 0
Published by chrisetsylvia
commenter cet article