« Blogpoll | Page d'accueil | La carte CSS de votre blog ! »
04/09/2005
Personnaliser son blog
Voici la première note d'une série d'astuces visant à mieux personnaliser et charter son blog.
Nous allons voir comment "redesigner" ses blocs de colonnes :
Il s'agit d'un exemple simple, qui ne nécessite aucune image de fond, il faut au préalable choisir 3 couleurs qui définiront la charte de son blog. Vous pouvez choisir par défaut les 3 couleurs qui sont assignés à votre modèle de présentation (couleur de la banière, couleur de la colonne, titre, liens etc...) avant de vous lancer dans une vrai création de charte
2 couleurs doivent être dans la même teinte, elles sont utilisées pour les couleurs de fond du titre (#006666 : couleur 1) et du contenu (#009999; : couleur 2). La 3ème couleur doit être choisie comme contraste des 2 premières (#ffffcc : couleur 3)
Voici le code à insérer dans votre feuille de style (Présentation -> configuration avancée) à remplacer par les styles correspondants ou à placer en fin de fichier :
.sidebar h2 {
font-size: 70%;
font-weight: bold;
margin: 0px;
margin-bottom: -2px;
padding: 4px 7px 6px 7px;
background-color: #006666;
color: #ffffcc;
border: 1px solid #006666;
border-bottom: 0px;
}
.sidebar ul {
padding: 5px;
margin: 0px 0px 30px 0px;
background-color: #009999;
color: #FFFFcc;
border: 1px solid #006666;
border-top: 0px;
}
.sidebar li {
margin: 0px 0px 0px 0px;
padding: 2px;
list-style-type: none;
font-size: 65%;
line-height: 150%;
}
.sidebar li.description {
padding: 2px;
text-align: left;
margin: 0px 0px 0px 0px;
font-style: italic;
}
.sidebar li.album {
text-align: center;
}
.sidebar img {
padding: 2px;
border: 1px solid #333;
background: #FFF;
}
.sidebar li.link img {
border: 0px;
padding: 0px;
margin: 0px;
vertical-align: -4px;
}
.sidebar a:link, TABLE.calendar a:link, .sidebar a:visited, TABLE.calendar a:visited {
text-decoration: none;
color: #FFFFcc;
}
.sidebar a:hover, TABLE.calendar a:hover, .sidebar a:active, TABLE.calendar a:active {
text-decoration: underline;
color: #FFFFcc;
}
L'essentiel de la personnalisation se trouve dans les styles .sidebar h2 et .sidebar ul.
Le "padding" vous permet de gérer la marge du texte avec le bord des blocs en pixels.
Le "font-weight" permet de définir des caractères gras avec l'attribut "bold".
Le "border: 1px solid #006666;" permet de définir la largeur des bordure, le style du tracé puis la couleur.
Le calendrier est géré par d'autres styles qu'il faut mettre en conformité avec la charte adoptée :
TABLE.calendar {
background-color: #009999;
color: #FFFFff;
border: 1px solid #006666;
border-top: 0px;
}
TABLE.calendar th {
color: #FFFFcc;
}
A noter qu'il est également possible de réaliser ce type de charte avec 2 couleurs, dans ce cas, il faut privilégier le choix de 2 couleurs contrastes : la première est utilisée pour les bordures et les textes / liens, la seconde pour le fond.
20:55 Ecrit par blogSpirit Team dans Blog, Blogspirit, Haut et Fort, Personnaliser | Lien permanent | Commentaires (58) | Envoyer cette note | Tags : Blog
Commentaires
Merci j'ai essayer de personnaliser les commentaires et ca a marche ! Je voulais savoir comment faire pour rendre l'arriere-plan des notes en noir, de sorte qu'il n'y ai qu'une ligne blanche qui entoure le texte.
Et aussi comment fait-on pour personaliser les ''boutons'' a gauche des blocs ?? Est-ce possible ? Merci beaucoup d'avance.
Ecrit par : skinburnt | 06/09/2005
Comment mettre un radioblog sur son blog ?
Ecrit par : skinburnt | 08/09/2005
Bonjour il m'arrive un truc un peu bizarre, sans avoir rien tout touché (où alors pas fait exprès !!!) le nom des personnes ayant fait un commentaire s'affiche dans la colonne de droite alors qu'auparavant c'était le début du commentaire que l'on pouvait lire. Comment faire pour que tout redevienne normal !!!
Merci de me répondre
Anne.
Ecrit par : Anne | 16/09/2005
Pas de problème !
Nous avons eu beaucoup de demandes concernant les bloc "Commentaires Récents" et nous avons décidé de mettre l'auteur du commentaire plutôt que le début du commentaire qui est parfois illisible dans les colonnes. Ceci dit il est prévu que l'on puisse customisé ça depuis la plateforme d'admin...
Ecrit par : thomas | 17/09/2005
Ah alors c'était vous !!! bon d'accord mais moi je préferais avant ! voilà donc j'attendrai la kustomisation et merci d'avoir répondu aussi vite
Bises, Anne.
Ecrit par : Anne | 17/09/2005
Rien à voir avec le post. J'ai constaté que même en payant pour mon blog, j'ai maintenant de la pub pour Haut&Fort au-dessus de ma bannière. Je le comprends fort bien pour des blogs gratuits, sur des blog payant, beaucoup moins.
En plus vu mon adresse de blog, celui qui n'a pas compris que j'étais hébergé sur Hautetfort n'est pas très doué.
Merci de nous prévenir si cela va persister. Dès fois qu'ailleurs, l'attitude soit un peu plus déontologique.
Ecrit par : bee_human | 19/09/2005
bee_human -> Il n'y a pas de pub sur Haut et Fort depuis plus de 2 mois. Quand au bandeau Haut et Fort, il est affiché pour tous les blogs non payants depuis que les services premium ont été mis en place.
Après examen de ton blog, je n'ai vu ni pub émanant de Haut et Fort, ni banière Haut et Fort...
Ecrit par : thomas | 20/09/2005
J'ai eu des hallucinations alors...
C'est vrai qu'elle n'y sont plus. Mais l'équipe de développement fait peut-être des essais de truc. D'autres que moi ont constaté des changement dans le gabarit derniers commentaires.
A faire:
1. Prendre RDV chez mon psy
2. Refaire me lunettes
3. Acheter de nouvelles lentilles
4. Ne plus retourner sur mon blog après un déjeuner trop arrosé
5. Ne pas poster en revenant d'un concert de house
Ecrit par : bee_human | 20/09/2005
Le fonctionnement des commentaires à l’air d’avoir complètement changé sur blogspirit (affichage du nom de l’auteur au lieu des premières lettres de son commentaire), ça à l’air d’être pareil chez Haut et Fort.
Y a un nouveau paramètre pour faire revenir comme avant ou ce fonctionnement est-il temporaire ?
Ecrit par : liensdemer | 20/09/2005
bee_human -> lol, l'équipe de dev ne s'amuse pas à faire des "essais de trucs" ;)
Sinon, tu as oublié 2 choses à faire :
- continuer ton blog très actif
- le rendre + sympa sous firefox / les banières font sauter la mise en page....
liensdemer -> Oui, c'est maintenant le nom de l'auteur qui apparait à la place du début du commentaire ? C'est quand même plus lisible que le début d'un commentaire tronqué. Néanmoins, ce genre de détail devrait pouvoir se paramètrer prochainement...
Ecrit par : thomas | 21/09/2005
LA bannière est incompatible avec firefox ou les iframes ?
Va falloir que je me mette un environnement de recette firefox... Mince, encore du boulot en plus.
Ecrit par : bee_human | 21/09/2005
Thomas => merci de la réponse mais en ce qui me concerne je trouve plus sympa d'avoir les premiers mots du commentaire (qui apportent du contenu au blog) plutôt que le nom de l'auteur (ce qui gonfle trop les égos à mon goût !)
Ecrit par : nam | 21/09/2005
J'aimerais créer un menu déroulant vertical (CSS + Javascript) mais je ne vois pas où insérer le code dans la feuille de style (bien que j'ai suivi les tutos d'Alsacréations et etc).
Peux-tu m'aider ? SVP ?
Merci d'avance et bien à toi
Ecrit par : Gwenaëlle | 21/09/2005
Gwenaëlle => Je réléchis justement à un moyen d'intégrer ce genre de menus. A priori cela demanderait de geler la gestion des blocs car il faudrait modifier le code HTML des templates des colonnes.
Rappel : Les templates des colonnes sont automatiquement regénérés à chaque fois qu'un élément est modifié, supprimé ou ajouté, les modifications portées sur le code HTML sont donc supprimées.
Je n'aime pas trop entrer dans ce genre de comportements du logiciel blogSpirit, il faut donc que j'y réfléchisse...
Ecrit par : thomas | 22/09/2005
je suis absolument d'accord avec Nam sur la présentation des commentaires. L'ancienne présentation avec les premiers mots du commentaire pouvait servir de fils conducteur à une discussion, là avec les noms en premier on y comprend plus rien en tout cas sur mon blog.
Ecrit par : Anne | 22/09/2005
Votre blog ne bouge plus. Y aura t'il bientot de nouveaux articles ?
merci.
Ecrit par : Arnaud | 28/09/2005
complex -> je n'ai toujours pas compris quel était ton but et pour quelle raison tu souhaites requéter HetF ou blogSpirit de cette manière.
Aranud -> C'est vrai il ne bouge pas mais pourtant les idées derrière ce blog bougent beaucoup
De noueaux articles très bientôt... ;)
Ecrit par : thomas | 28/09/2005
Je viens de charger firefox. Effectivement c'est la cata...
Du code html compatible ie mais pas firefox. Va falloir regarder cela de plus près.
Ecrit par : bee_human | 04/10/2005
Bonjour,
Je vous remercie de l'aide que vous nous apportez via votre blog ;-)
Voila une semaine que je tente une chose sans y arriver :
1) Sur votre blog, comme sur celui-ci (pour l'exemple) http://antiracket.hautetfort.com/archive/2005/10/18/crime-contre-l-humanite.html
Il y a sur les blocs de gauche
* des rubriques (par ex NouvelOrdreMondial)
* et dans cette rubrique des sous-rubriques (par ex CONSTITUTION DU N.O.M.)
Je n'arrive pas à faire cela. Pourriez vous m'expliquer, svp, la manip à suivre ?
C'est pour un blog de ma commune. Par ex je voudrais créer
- La Commune, puis une sous rubrique le conseil municipal, une autre les travaux....
- En dessous une autre grande partie L'école, puis les sous parties concernées...etc
J'ai essayé sans résultat sur Haut et Fort. Pourriez vous m'aider et m'indiquer comment faire, et me dire s'il vaut mieux de prendre HautetFort ou Blogspirit ?
Encore mille mercis !!!!!
Ecrit par : paul | 19/10/2005
Coucou,
personne ne connait la manip à utiliser ?
Snif..Snif..
Merci !
Ecrit par : paul | 20/10/2005
Paul, il faut que tu créés un nouveau bloc (un bloc libre) dans Présentation->Contenu des colonnes en insérant le code HTML approprié... Voilà ça parait un peu technique, du coup je ne m'attarderais pas et publierais plutôt un nouvel article sur le sujet. Je pense que d'autres blogueurs seront interessés.
Quand au choix entre blogSpirit et HautetFort : il n'y en a pas vraiement à faire, les 2 plateformes sont gérés par blogSpirit et suivent le même rythme de mises à jour.
Toutefois on peut les différencier comme ça :
blogSpirit est orienté international, idéal si tu veux créér un blog en allemand, anglais etc...
HautetFort est 100% francophone et jouis d'une communauté plus ancienne.
NB: pourrais-tu laisser l'adresse de ton blog ? Thx
Ecrit par : thomas | 20/10/2005
Je ne comprends pas un mot, mais ça a l'air vachement sympa tout ce que tu écris!!!
Ecrit par : pierre | 20/10/2005
Re-bonjour Thomas,
merci de m'avoir répondu ;-)
Dommage...j'attends ton tuto avec impatience alors
En attendant, ne peux tu pas me donner par ex le code html que tu as entré pour une des colonnes et qui t'a permis d'obtenir le résultat que je recherche? Je pense que je devrais pouvoir me débrouiller avec.
Merci !
Ecrit par : Paul | 21/10/2005
Message pour Paul : voici un court exemple de ce que tu peux écrire dans un nouveau bloc pour obtenir ce que tu souhaites :
Texte en gras
Texte non gras
Lien vers le site de Philippe
Ecrit par : Sylvain | 22/10/2005
Re-message pour Paul : oublie le message précédent, tu risques par d'arriver à grand chose en faisant un copier/coller, celui-ci devrait être plus efficace :
< B >Texte en gras< /B >
< BR >Texte non gras< /BR >
< a href="http://philippe.blogspirit.com" target="_blank" >Lien vers le site de Philippe< /a >
Après avoir copier/coller cet exemple dans un bloc, tu supprimes les espaces après les < et avant les >
Ecrit par : Sylvain | 22/10/2005
bonjour! je sais pas si cela a déjà été demandé mais comment connaitre toutes les couleurs proposées et leurs codes?
Ecrit par : lyxira | 22/10/2005
personnes n'est là pour me répondre???
Ecrit par : lyxira | 22/10/2005
lyxira >>>
http://www.toutimages.com/generateur_c.htm
(ne fonctionne qu'avec explorer)
Ecrit par : Thierry | 24/10/2005
Un truc tout bête que je n'arrive pas à faire.... : je n'arrive pas à enlever (voire remplacer) les trois pauvres ronds-icones qui se trouvent en face des "titres de listes" du genre "Commentaires récents".
Quelqu'un pourrait-il me renseigner s'il-vous-plaît ?
...j'ai mal aux yeux à force de lire et relire le code source...HELP
Ecrit par : Léa | 26/10/2005
Commet fait-on pour mettre ses deux colonnes d'un seul coté?
Ecrit par : Hugo | 27/10/2005
Bonjour,
j'ai un petit questionnement concernant la customisation de mon BloG : comment enlever la barre grise "hauteetfort" en haut ? Celle avec le moteur de recherche de blog ? je n'arrive pas à la situer dans les pages de code : est-ce dans la feuille de style ? dans celle de la page d'accueil ?
merci des conseils
Ecrit par : DaMDi | 28/10/2005
Léa -> Les styles .siderbar h2 ou #right .siderbar h2 ont une propriété background avec image. Ces images pointent vers une certaine adresse -> Il te faut changer cette adresse pour qu'elle pointe vers l'icône de ton choix !
Hugo -> Relis bien Technoblog, j'ai posté une solution pour ton problème -> Gérer une seule colonne et ne plus afficher l'autre
DaMDi -> Le meilleur moyen, c'est de s'inscrire aux services payants ! Il est quand même normal que HautetFort (idem blogSpirit) se fasse connaître sur ses comptes gratuits, qu'en penses-tu ?
Ecrit par : thomas | 28/10/2005
Salut,
On est plusieurs à gérer notre blog, et je voulais savoir s'il était possible, que tout les "webmaster du blog" soient au courant quand un nouveau commentaire à été ajouté.
Pour l'instant je suis le seul à recevoir le message.
J'espère que quelqu'un pourra m'éclairer sur ce sujet.
Bonne journée :-)
Ecrit par : florent | 11/12/2005
Bonjour,
je me pose trois questions :
1) est il possible d'agrandir sur le blog la taille de sa photo qu'on insère en haut à gauche ? Si oui, comment faire ?
2) à quel endroit dois-je modifier l'arrière plan de couleur, je pense que c'est dans la feuille de style, mais ou ?? pour : appliquer une couleur à l'arrière de mes titres, comme par ex sur ce blog http://www.france3europe.com/
3) les blogs redisignés que vous nous présentez dans les articles, comme par ex ceux la :http://design-blog.blogspirit.com/ est ce qu'on peut arriver à ce genre de résultats à partir des versions gratuites (moi je suis sur hautetfort.com) ou pour arriver à ce résultat (en plus du travail bien sur !) on doit passer à l'achat d'options payantes ?
Merci par avance !
Longue vie à http://technoblog.blogspirit.com
Paul
Ecrit par : paul | 13/12/2005
==> Salut Sylvain
J'ai réussi a mettre d'autre catégorie sur la colonne de droite.
Mais par contre, ce n'est pas le même modéle.
C'est à dire que je n'ai pas les trois ronds devantle titre de ma catégorie
Voili voilou
En tout cas merci beaucoup pour toutes les infos qu'il y a sur le blog :-)
Ecrit par : FLORENT | 19/12/2005
Salut il y a t-il une solution pour modifier le diaporam de l'album photo.
Comme celui par exemple : http://lescrapbooking.canalblog.com/albums/depart_pour_la_vendee/index.html
Ecrit par : florent | 19/12/2005
florent -> Le modules auteurs / collaboratif vient de sortir !
paul -> Regarde la carte CSS publiée sur technoblog, cela devrait répondre à tes questions. Et bien entendu, l'accès au code source de son blog est accessible dès l'abonnement gratuit.
Florents et paul -> merci de laisser l'adresse de votre blog, je ne sais pas à qui je m'adresse ! Les albums de canalblog ont un design différent de ceux de blogSpirit/HautetFort. Si tu es sur un de ces 2 derniers tu as la possibilité de personnaliser la mise en page de cet espace.
Ecrit par : technoblog | 19/12/2005
Voici l'adresse de mon blog.
Ecrit par : florent | 19/12/2005
Bonjour tout le monde :-)
Une petite question : pourquoi certain bouton ont disparu dans la création de note, (pour les nouveaux blogx créer).
J'ai créer un nouveau blog, je n'ai plus le bouton "couleur du texte".
Il faut que j'écrive directement en code HTML pour que ca marche.
Il y a t-il une solution pour remettre ce bouton ?
A bientôt ;-)
Ecrit par : florent | 28/12/2005
Merci c'est nickel ça marche mais comment je peux faire pour diminuer les colonnes gauche et droite du blog ? D'avance merci !!!!
Ecrit par : la veilleuse | 29/12/2005
Réponse à moi même : Dans la rubrique propriétés des notes, choisissez le mode HTML.
Ca peut aider d'autres personnes qui étaient dans le même cas que moi :-)
Ecrit par : florent | 02/01/2006
merci pour tous ces conseils.... surtout pour des informaticiens en herbe.... A bientôt!
Ecrit par : fxrd | 09/01/2006
j'utilise le style de prensentation n°1, et je voudrais mettre des boutons devant mes categories, mais je sais pas comment faire !!
de plus, je voudrais mettre une image en fond de mon calendrier, est ce possible ?
merci de me repondre !!
http://universalentours.blogspirit.com
vanessa
Ecrit par : vanessa | 22/01/2006
Bonjour,
Voici mon soucis : j'ai un blog sur hautetfort, et un jeune homme n'arrête pas de poster des âneries, histoire de "pourrir le blog".
Est il possible que je bloque son ip ou autre pour ne plus qu'il porte atteinte à mon blog ?
Merci par avance !!!
Bonne soirée.
Paul.
Ecrit par : paul | 01/02/2006
A la demande de plusieurs personnes voici une petite note sur la mise en place d'une horloge sur son blog
http://floagathe.blogspirit.com
Bonne lecture
Ecrit par : florent | 17/02/2006
J'essais de faire un menu dans mon blog. Je veux l'insérer sous la banière et malheureusement aucun essais e fonctionne. quelqu'un a réussie?
Actualités
Arts
Dossier
Économie
Énergie
Militaire
Politique
Science
Echo-Actu
Revue
de presse
ben voilà
Ecrit par : Guy Cardinal | 23/02/2006
ben voilà, ça devait être vertical et zop à l'horizontale. Quelqu'un a une suggetsion?
Ecrit par : Guy Cardinal | 23/02/2006
Salut Guy :-)
Comment fais-tu pour mettre une bannière interactive sur ton blog !!!
Ecrit par : florent | 27/02/2006
Hum, j'ai conçu un tableau en HTML. J'ai triché sur le css parce que les grille de style fourni par blogspirit souvent se remette à jour et on eprd le code. Donc, j'ai remarqué que chaque catégorie créait un répertoire correspondant. J'ai dont fait mes propres URL en conséquence. J'ai également effacé de la feuille de style les sections banner 1 et 2.
Lorsque mon tableau a été à mon goût, j'ai mis le code (95 lignes environ) dans les scripts des page archives, page principales et pages commentaires dans le DIV banner.
J'ai aussi intégré un "form" avec le script de rehcerche de google pour mon moteur de recherche.
Voilà. Pour ceux qui sont moins à laisse l'explication n'est pas clair, mais je ne recommande pas à ceux qui ne si connaissent pas de le faire. Pour les autres au pire édité ma source.
N.b. j'ai seulement réussie à le faire après avoir pris l'abonnement au forfait "design avancé". Auparavant, la page se ré-updatait et je perdais certaine partie de mon code. Bonne chance au codeur.
Au fait, le courriel que j'ai reçu il provenait des "gestionnaires" de blogspirit ou d'un aprticulier?
Ecrit par : Guy Cardinal | 27/02/2006
Merci d'avoir répondu rapidement. Je vais essayer de m'y mettre, et de voir ce que ca donne !!!
Pour répondre à ta question, je suis un particulier, et j'essaye petit à petit de faire évoluer mon blog.
Ecrit par : florent | 27/02/2006
Vu que la bannière interactive, est un peu compliqué (je n'ai pas trop de temps en ce moment pour bidouiller :-)
Je voulais savoir s'il était possible de mettre une note fixe qui ne bouge pas.
Au moins dans chaque rubrique il y aurai un petit sommaire en début de page !!!
Ca serai super, si cela existait.
Et si ca n'existe pas, pourquoi ne pas le mettre en place !!!!
A bon entendeur salut :-)
Ecrit par : Florent | 10/03/2006
Bonjour
dans mes stats détaillés, j'ai comme origine des visiteurs : "http://blo.gs/ping.php" est-ce que quelqu'un peux m'expliquer qu'est-ce le ping.
Merci d'avance :-)
Ecrit par : Florent | 21/03/2006
merci pour ton Blog
Ecrit par : Christophe MICHEL | 04/04/2006
J'ai joué à l'apprenti sorcier avec le css et les résultats ont été désastreux. J'ai quand même réussi à revenir au point de départ. Je me pose ces questions:
1. Comment ajouter des bordures avec coins arrondis
2. Comment savoir si mon site est Firefox-friendly?
3. Comment récupérer les 3 cercles devant les titres? Ils sont disparus!
4. Est-il possible de changer la couleur de la bande de pub pour qu'elle s'harmonise mieux au design? (on sait jamais.)
Merci à l'avance!
Ecrit par : Pierre-Yves | 18/04/2006
Voila, sur mon blog, que j'ai tenté de relooker grace à toutes ces belles explications, je voudrai avoir un fond totalement blanc, (genre site web), mais je n'y arrive pas, ...héhéhé.
Il me reste un grand rectangle bleu-violet partant du bas de ma bannière jusqu'au dessous de ma dernière note.
Je ne sais pas si cette question a déja été posé, mais si quelqu'un pouvait me filler un coup de mains...
merci et bonne continuation !
Ecrit par : fra1748 | 23/05/2006
extra je comprends mieux ,par l'exemple.
Ecrit par : ased | 11/07/2006
merci pour tout ce travail qui nous aide bien!
Ecrit par : aril | 12/07/2006
Est-il possible de personnaliser le titre d'une note sans toucher aux autres ?
Ecrit par : Philibert | 24/05/2007
Les commentaires sont fermés.