Profil

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

Photo.Graph

Catégories

6 février 2009 5 06 /02 /février /2009 10:55

Il y a deux façons d'organiser l'apparence de son blog : soit en mode classique soit en mode avancé.


Qu'est ce qui les différencie ?

Ce n'est qu'une question visuelle : en mode classique le blog garde le même aspect quelque soit l'affichage : l'accueil, une page, un album photo (et encore, ça va changer), un article seul avec ou sans ses commentaires et en mode avancé chaque affichage peut-être différent.

 

- comment passer du mode classique au mode avancé ou comment passer du mode avancé au mode classique ?

Allez sur l'administration de votre blog et allez sur « configurer ».

 CSS

Il suffit alors soit de cliquer sur « avancé »si l'on est en classique et que l'on veut basculer,  soit de cliquer sur « classique ».

 

 

 

1 - Le mode classique :

 

- structure :

C'est certainement le plus simple. Surtout quand on débute avec son blog et dans le domaine du CSS, est de rester en mode classique.

Dans ce mode vous pouvez définir la structure de votre blog (colonnes, modules, bannière...) de cette façon :

 modification CSS

Il suffit d'aller dans l'administration d'Over-Blog, puis dans « configurer », « mise en page ». (1) dans le schéma.

Pour définir la structure de base, il faut aller en bas de la page et placer la souris sur l'icône en dessous du texte « choix de la structure ». Un menu déroulant s'affiche, et vous pouvez choisir celle qui correspond. (2) dans le schéma.

Ensuite il suffit de choisir les modules par « glisser-déposer » avec la souris. (3) dans le schéma.

Par exemple, vous souhaitez une colonne principale qui contiendra les articles à gauche et une colonne secondaire qui contiendra les modules à droite.

Un simple « glissé-déposé » (un clic de souris sur l'élément sans relâcher et déplacement du curseur jusqu'à l'endroit désiré) permet de choisir ses modules, leur ordre, leur nombre...

 

- css et design :

Le mode classique permet alors d'avoir un blog identique quel que soit la page affichée. La page d'accueil est identique à un article affiché seul avec ou sans ses commentaires ou à une page seule. Par exemple : http://luluetberlu.over-blog.com

Si vous avez un blog qui fonctionne ainsi vous pouvez l'indiquer en commentaire !

Le mode avancé permet alors de ne modifier qu'une seule page de css pour avoir le résultat sur l'intégralité du blog.

 

 

 

2- Mode avancé :


- structure :

C'est le même principe que pour le mode classique, sauf que les colonnes, les modules, les bannières, les pieds de page sont à définir à chaque fois et qu'il est ainsi possible d'avoir un blog totalement différent tant par son aspect que par sa structure.


Il est tout a fait envisageable d'avoir une page d'accueil à trois colonnes et une grande bannière, les articles seuls affichés sans bannière et à deux colonnes avec différents modules, et les pages avec une autre couleur ou même qu'avec une seule colonne...

Comme par exemple sur ce blog : la page d'accueil a une grande bannière, les articles seuls (ou les catégories) s'affichent avec une petite bannière et les pages (pour voir une page, cliquez sur « sommaire » en haut de ce blog) n'ont qu'une colonne et aucun module.

 

 

Avec le mode avancé il faut savoir jongler avec les onglets : global, accueil, article, page (je ne parle pas des albums photos, puisqu'on ne pourra bientôt plus les modifier cf. article).

 

Global :

C'est un css général du blog, c'est là qu'on indique les grandes tendances du blog.

 

Accueil :

Comme son nom l'indique c'est l'accueil du blog. C'est là qu'on met le css de l'apparence désirée pour la page principale de son blog, celle qui correspond à l'adresse principale du type http://monblog.over-blog.com (ou .fr), comme pour ce blog : http://photo.graph.over-blog.com

 

Article :

C'est ici que l'on indique le css pour ce qui concerne l'apparence du blog lorsque l'on clique sur un lien de la page d'accueil et qu'on n'est plus sur la page principale. C'est soit un article seul comme avec le lien de cet article : http://photo.graph.over-blog.com/article-27611775.html

Ou sur une catégorie, comme la catégorie webdesign de ce blog : http://photo.graph.over-blog.com/categorie-10266575.html

 

Page :

C'est ici que l'on modifie le css pour avoir un affichage particulier pour ces pages de blog qui ne sont pas des articles. Comme pour ce blog, la page sommaire : http://photo.graph.over-blog.com/pages/Sommaire__Webdesign__Graphisme__Photographie__Desi-994442.html

 

 

 

3 - Quel mode choisir ?

Honnêtement, pour quelqu'un qui débute en css, le plus simple serait de choisir le mode classique... surtout lorsqu'on désire conserver la même apparence et la même structure pour son blog. D'autant plus qu'en mode classique il y a des classes qui permettent tout de même de différencier quelque peu selon l'accueil, les pages, ou les articles affichés seuls. Et ainsi, lorsqu'on modifie le css, on n'a pas à se poser la question de savoir dans quelle partie faire les changements.

Voici quelques éléments qui suffisent à faire ses modifications en mode classique :
     * Pour les articles seuls :

#articleSeul

 

     * Pour les pages :

.page

.pageContent

.afterPage

.divPageTitle

.divPageTitle h2

 



Par exemple :

Je souhaite que mon titre d'article soit rouge sur ma page d'accueil et soit bleu lorsqu'il est affiché seul, j'indique :

.titreArticle {color:#000066;}

#articleSeul .titreArticle {color:#CC0000;}

 

Si je veux que les titres soient identiques à la page d'accueil et lorsque les articles sont affichés seuls, alors je supprime l'identifaint #articleSeul du css.

Partager cet article

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article

commentaires

Didier Lavigne 30/01/2010 08:47


page illisible, écrire en blanc sur du noir, je ne suis pas éllé au bout de vos explications.


Christelle Vinsonneau 31/01/2010 12:23


étonnant que vous ayez pu aller jusqu'au bout de votre commentaire !