« Personnaliser son blog | Page d'accueil | La Blogbar »
30/09/2005
La carte CSS de votre blog !
Toujours dans la catégorie "Personnaliser son blog", je vous propose maintenant - non pas une nouvelle astuce à intégrer facilement dans votre blog - mais un véritable moyen de connaître les différents éléments qui constituent sa charte graphique.
Voici donc la carte de styles d'un blog de technologie blogSpirit. Il est tout frais et vous permet :
- De connaître les différentes boîtes qui constituent la mise en page globale de votre blog : les colonnes, la bannière, le centre et le container : il s'agit des encadrés.
- De connaître les différents styles qui définissent le style de vos textes et liens. il suffit de cliquer sur un élément textuel pour connaître la ou les classes auxquelles il est rataché.
J'ai vu que des blogs comme celui de Gwenaelle ont un fait un boulot remarquable avec la feuille de style (Il y en a d'autres), j'espère que cette astuce inspirera d'autres graphistes en herbes...
Légende :
La feuille de style de votre blog utilise le modèle des boîtes, voici les principales que vous devez connaître pour personnaliser l'affichage de votre blog.
box : #container, La boîte principale qui contient tout les éléments.
box : #left, #right, #banner, #center : Les 4 boîtes principales pour editer la mise en page globale du blog
box : .sidebar, .content : Styles utilisés pour définir les styles par défaut pour chaque boîte (marges, taille de police, etc...)
box : table.calendar : style propre au calendrier (modèle des tables)
Ce blog statique servira donc de référence pour les différentes astuces abordées ici et sera bien entendu LE support idéal pour personnaliser la feuille de style de votre blog.
Bonne chance !
19:35 Publié dans Blog , Personnaliser | Lien permanent | Commentaires (29) | Trackbacks (0) | Envoyer cette note | Tags : Blog
Trackbacks
Voici l'URL pour faire un trackback sur cette note : http://technoblog.blogspirit.com/trackback/335253
Commentaires
mon blog bouge, grâce à qui ?
Mystère du net...
Mais je souris !
Bisous
Mimi
Ecrit par : mimidup | 30/09/2005
Bonjour,
Je viens de télécharger le navigateur Opera, qui marche très très bien et qui est très joli graphiquement. Seulement, l'interface admin de blogspirit s'affiche très mal (moitié des bouton invisibles, notes en html...)
Y a-t-il un paramétrage spécial d'Opera pour que blogspirit s'affiche bien ?
Ecrit par : bou9al | 11/10/2005
bou9al -> Les dernièrs correctifs de blogSpirit par rapport à Opera concernaient la version 8.5. Par rapport à l'éditeur HTML, c'est indépendant de notre volonté Opera ne sembla pas avoir intégré à son navigateur les modules nécessaires au fonctionnement de l'éditeur avancé dit éditeur HTML. Il faut donc configurer son blog avec l'éditeur Texte...
Pour le reste, nous y jeterons un coup d'oeil. Opera étant un navigateur de grande qualité (la Ferarri des navigateurs ?), sois sur que nous nous occuperons de son cas !
Ecrit par : thomas | 17/10/2005
Une petite demande, je pense à peu de frais : serait-il possible que l'éditeur html génère un code plus respectueux des normes W3C? Par exemple, une optimisation très facile : pour mettre en gras, au lieu de générer une balise < b >, il suffirait de générer l'instruction html sémantique < strong > qui permet une meilleure interprètation par les navigateurs de non-voyants, et un meilleur référencement : la balise indique l'importance du contenu en question, et non pas seulement sa mise en forme...
Ecrit par : Guillaume | 24/10/2005
J'ai un petit problème avec mon blog : la partie violette "ce blog est hébergé par blogspirit" se balade au beau milieu de mon weblog. Comment puis-je la ramener à sa place ?
Ecrit par : Glu-glu | 05/11/2005
test
Ecrit par : TEST | 07/11/2005
Guillaume -> Tu as absolument raison, j'ai remonté le problème à l'équipe.
Gluglu -> remplace tes styles a:link, a:visited, a:hover par .content a:link, .content a:visited et .content a:hover dans ta feuille de style.
Ecrit par : thomas | 07/11/2005
Merci pour tout thomas !!! J'ai laissé tomber opéra mais j'ai bien personalisé mon blog. Je suis très fier du résultat
( ^ _ ^ )
Ecrit par : bou9al | 15/11/2005
Bonjour... encore merci pour ton site.
Je voudrais mettre un fond musical sur mon blog. Comment faire ?
Ecrit par : DocDarkSide | 18/11/2005
Bonjour... encore merci pour ton site.
Je voudrais mettre un fond musical sur mon blog. Comment faire ?
Ecrit par : DocDarkSide | 18/11/2005
Merci. ^^
Ecrit par : Glu-glu | 22/11/2005
J'ai un autre problème : dans ma colonne ma police apparaît en blanc alors que je n'ai rien défini en blanc.
Ecrit par : Glu-glu | 22/11/2005
pour DocDarkSide, je me substitue à thomas (il est absent?) pour le fond musical. d'abord, méfie toi car il y a beaucoup de personnes qui n'aiment pas voir s'imposer une musique de fond, surtout s'ils écoutent quelque chose en naviguant; sonon, tu peux mettre un lecteur flash qui se déclenche uniquement au clic. j'en ai un dans mon blog qui propose plusieurs morceaux. mais il en existe un autre pour un seul morceau.
si ça t'interesse je peux te passer le fichier de basse avec les instructions, ou tu regarde le code source de mon blog.
Ecrit par : leiand | 06/12/2005
Glu-glu -> je ne suis pas expert en blogs overblog, ils ont surement quelqu'un pour te répondre. Si le blanc est la couleur par défaut, surcharge en mettant "color: #000;".
leiland & DocDarkSide -> je conseille la faq et les liens "Conseils de blogueur". Le bloc de leiland a l'air très bien (impressionnant même ;) mais il y a peut être quelques problèmes pour l'insérer dans la colonne de son bloc.
Ecrit par : technoblog | 19/12/2005
Ah désolée, j'étais persuadée d'avoir entrée l'adresse de mon blog sur blogspirit... En fait, le problème est très génant, parce que sur ce blog-ci, mon fond est blanc, et du coup on voit rien. J'ai beau avoir défini une couleur rose, les titres des modules dans la colone droite restent blancs... C'est pour ça que je ne comprend pas mon erreur.
http://glu-glu-2ndtime.blogspirit.com
Ecrit par : Glu-glu | 22/12/2005
Salut Gluglu,
c'est du script que tu as mis dans ta colonne de droite ? (les petits coeurs qui montent )
Peux tu m'expliquer comment as tu fait ?
Joyeux noël à Toutes l'équipes, ainsi qu'a tout les blougeurs !!!
Ecrit par : florent | 24/12/2005
Y'a vraiment rien à faire pour cette police blanche dans les colonnes ???
Ecrit par : Glu-glu | 20/01/2006
Réponse à moi-même au cas où d'autres auraient eu le même problème ou auraient le même problème : le javascript c'est pas très bon pour la CSS...
Ecrit par : Glu-glu | 05/02/2006
Bonjour,
Je viens d'enlever la colonne de gauche de mon blog (modèle 3), sans problème en passant la taille de celle-ci de 180px à 0px. Puis j'ai agrandi la taille du container de gauche d'autant passant à 585px. Le problème c'est que la taille du container ne suis pas la taille du texte des notes : pour être claire le texte dépasse sur la droite du "container centrale".
Comment faire pour ajuster en largeur la taille du container central à la taille du texte en largeur?
Y-a-t-il une solution miracle?
Ecrit par : Jean-Rémi | 23/02/2006
le mieux pour supprimer une colonne, c'est de lui coller un "display : none;"
Sinon, je crois que "content p" (ou quelque-chose de ce style-ci) correspond au contenu de l'article, donc si tu lui définis une width inférieure à celle de ta colonne centrale tu devrais avoir moins de problèmes (à moins que je ne me trompe)...
(non, ce n'est pas un miracle ^^)
Ecrit par : Glu-glu | 24/02/2006
Merci GLU-GLU pour ton conseil que je vais essayer de suite.
Sinon entre temps je pense avoir compris le problème c'est que l'image (l'arrière plan de la colonne du milieu) définie par défaut par hautetfort à des dimensions fixées au départ et que je ne peux pas modifier. En enlevant cette image et en remplaçant par un fond de couleur approprié je pense pouvoir contourner le problème.
Merci encore de ta réponse et bon blog.
Ecrit par : Jean-Rémi | 28/02/2006
J'interviens pour la premiere fois,j'ai un etit probleme avec une horloge.J'ai installé la 1ere fois une classique mais en voulant la remplacer par horloge chat,cette derniere a blogué le lien et je peux apporter aucun changement.J'ai pris contact avc le site dont j'aitiré cette horloge,il était dans l'impossiblité de conaitre la cause.Quelqu'un peut -il m'aider.
Safir
Ecrit par : safir | 19/03/2006
Je veux faire disparaître l'espace entre ma portion "banner" et la colonne de gauche (sidebar). Il y a présentement un espace blanc. Quelqu'un sait comment faire?
J'ai beau essayer et essayer. rien n'y fait
Ecrit par : Guy Cardinal | 12/04/2006
J'ai customisé mon blogm mais je rencontre quelques problème de mise en page si tu pouvais m'aider! ensuite aurais tu less codes des différentes couleurs que l'on peut utiliser merci!
Ecrit par : francis | 10/05/2006
et mon blog ? (c'est sur hautetfort, ca appartient à blogspirit, même feuille de style)
http://cybres.hautetfort.com/
Ecrit par : Vlad | 09/06/2006
^css faut s'y mettre gloups:-)
Ecrit par : ased | 02/07/2006
Mes pages(sauf la page d'accueil) présentent la totalité du texte en gras. J'ai tout essayer mais rien à faire. Pouvez-vous m'aider svp?
Ecrit par : Mounir | 12/10/2006
Comment, lorsqu'une note est affichée, faire disparaitre la ligne au dessus de la date :
"note précédente ! page d'accueil ! note suivante"
Merci
Ecrit par : Jac | 13/02/2007
Bonjour,
j'ai souvent pu profiter d'astuces délivrées par votre Blog, et aujourd'hui c'est moi qui vient vers vous pour HEEEEEEeeellllPPPPPPPPPP
Voila mon énorme soucis pour lequel je ne trouve aucune solution depuis hier...
Mon Blog http://www.echoparisien.fr est entier mais toutes les notes sont toutes décalées en bas à droite du site et à la place le bas du site et remonté tout en haut. (quand on atterit sur la page on dirait qu'il n'y a aucune note, il faut vraiment aller tout en bas tout à droite)
J'ai restauré les templates de la page d'accueil et de la feuille de style mais rien n'y fait.
Pourriez-vous me venir en aide ?
Millions de merci d'avance
Marie
Ecrit par : Marie | 21/05/2007