La Feuille de style de nos BLOGS #1
Par FredLynx le mardi 29 mai 2007, 23:50 - Personnalisation de la feuille de Style - Lien permanent
Premier post d'une nouvelle rubrique de personnalisation des blogs RégionJob. Je vais essayer par les divers billets de cette rubrique de vous guider dans la personnalisation de votre Blog.
La première étape consiste donc à configurer le blog pour qu'il utilise votre feuille de style personnalisée.
I) Configurer votre Blog
- xxxxx Nom de votre Blog
- yyyyy Serveur de votre région (estjob - nordjob - ouestjob - pacajob
- rhonealpesjob - sudouestjob)
Cliquez sur
Cliquez sur
Cliquez sur
Cliquez sur
II) Préparer une copie chez vous
Pour rester "compatible" avec les chemins d'accès aux divers fichiers et images du votre serveur bloc je vous conseille de créer plusieurs dossiers sur votre ordinateur de la façon suivante:
Le plus simple est d'utiliser une des feuilles de style de base d'un des thèmes de RégionJob.
Chaque feuille de style fait appel à un certain nombre d'images. Pour savoir lesquelles, il suffit d'ouvrir le fichier style.css avec un éditeur de texte et de cherche tous les noms de fichiers images (.gif, .jpg, .png).
Ensuite il faut téléchager chaque image et les enregistrer dans le répertoire img.
Azil/nomchemindelimage
BlueDeep/nomchemindelimage
PinkSubway/nomchemindelimage
Smartyp/nomchemindelimage
default/nomchemindelimage
pebble/nomchemindelimage
Il ne vous reste plus qu'a vous rendre sur votre page d'accueil du blog et je vous conseille plustôt que de faire enregistrer sous de clique droit sur la page et de faire Afficher la source, une fois cette source afficher dans votre éditeur de texte par défaut il suffit de l'enregistrer dans le répertoire html sous le nom index.html.
ATTENTION:
Pour que votre fichier fonctionne "correctement" il faut lui changer le chemin de la feuille de style.
<style type="text/css" media="screen">
@import url(/blogthemes/themes_sudouestjob/xxxxx/style.css);
</style>
Remplacer par:
<style type="text/css" media="screen">
@import url(../public/style.css);
</style>
VI) Yapluka Tester
Ouvrir votre fichier index.html avec votre navigateur préféré ...
Maintenant vous pouvez tenter les modifications que vous voulez sur le fichier style.css...
VII) Installation sur le serveur
Lorsque vous avez modifié votre feuille de style reportez-vous à la partie I de ce billet pour installer la feuille de style sur le serveur.
Ensuite il faut copier les images utilisées par cette feuille, pour se faire il faut se rendre dans la partie Gestionnaire de media de votre administration du blog puis:
- Première étape se rendre en section d'Administration de votre Blog:
- xxxxx Nom de votre Blog
- yyyyy Serveur de votre région (estjob - nordjob - ouestjob - pacajob
- rhonealpesjob - sudouestjob)
- Deuxième étape se rendre sur le Tableau de bord:
Cliquez sur
- Troisième étape se rendre sur les Paramètres des thèmes:
Cliquez sur
- Quatrième étape sélectionner Custom theme:
Cliquez sur
- Cinquième étape sélectionner Configuration du thème:
Cliquez sur
- Cinquième étape copier votre feuille de style et cliquez sur enregistrer:
II) Préparer une copie chez vous
Pour rester "compatible" avec les chemins d'accès aux divers fichiers et images du votre serveur bloc je vous conseille de créer plusieurs dossiers sur votre ordinateur de la façon suivante:
Mon Blog
|
|
|--html
|
|
|--public
| |
| |----img
| |
| |----images
- Mon Blog Répertoire de base.
- html Répertoire pour mettre le ou les fichiers Html.
- public Répertoire où il faut enregistrer la feuille de style.
- img Répertoire où il faut enregistrer les images du thème.
- images Répertoire où il faut enregistrer les images utilisées dans vos post.
Le plus simple est d'utiliser une des feuilles de style de base d'un des thèmes de RégionJob.
- Thème Azil: Télécharger la feuille de style
- Thème BlueDeep: Télécharger la feuille de style
- Thème PinkSubway: Télécharger la feuille de style
- Thème Smartyp: Télécharger la feuille de style
- Thème Default: Télécharger la feuille de style
- Thème Pebble: Télécharger la feuille de style
Chaque feuille de style fait appel à un certain nombre d'images. Pour savoir lesquelles, il suffit d'ouvrir le fichier style.css avec un éditeur de texte et de cherche tous les noms de fichiers images (.gif, .jpg, .png).
Ensuite il faut téléchager chaque image et les enregistrer dans le répertoire img.
- Pour le thème Azil:
Azil/nomchemindelimage
- Pour le thème BlueDeep:
BlueDeep/nomchemindelimage
- Pour le thème PinkSubway:
PinkSubway/nomchemindelimage
- Pour le thème Smartyp:
Smartyp/nomchemindelimage
- Pour le thème Default:
default/nomchemindelimage
- Pour le thème Pebble:
pebble/nomchemindelimage
- Exemple pour le thème Azil:
Il ne vous reste plus qu'a vous rendre sur votre page d'accueil du blog et je vous conseille plustôt que de faire enregistrer sous de clique droit sur la page et de faire Afficher la source, une fois cette source afficher dans votre éditeur de texte par défaut il suffit de l'enregistrer dans le répertoire html sous le nom index.html.
ATTENTION:
Pour que votre fichier fonctionne "correctement" il faut lui changer le chemin de la feuille de style.
<style type="text/css" media="screen">
@import url(/blogthemes/themes_sudouestjob/xxxxx/style.css);
</style>
Remplacer par:
<style type="text/css" media="screen">
@import url(../public/style.css);
</style>
VI) Yapluka Tester
Ouvrir votre fichier index.html avec votre navigateur préféré ...
Maintenant vous pouvez tenter les modifications que vous voulez sur le fichier style.css...
VII) Installation sur le serveur
Lorsque vous avez modifié votre feuille de style reportez-vous à la partie I de ce billet pour installer la feuille de style sur le serveur.
Ensuite il faut copier les images utilisées par cette feuille, pour se faire il faut se rendre dans la partie Gestionnaire de media de votre administration du blog puis:
- Créer un répertoire img
- Copier toutes les images de votre répertoire PC img vers le répertoire de votre blog img.
Commentaires
Oh la la! c'est une très bonne idée de nous indiquer comment personnaliser notre blog, je vais m'y essayer, mais ca ne parait pas simple, vu comme ca. J'espère que je pourrais venir appeler aussi secours si je m'emmele les pinceaux. En tout cas Grand merci pour cette méthodo.
Bloggeusement Vôtre.
aïe en effet, ça n'a pas l'air simple.
J'ai utilisé le modèle Pinksubway, et je voudrais déjà changer la couleur de fond qui est blanche, en beige, pour atténuer le contraste. Comment fais-je? Merci d'avance...
Oula, le problème est plus compliqué que ça, parce que sur un thème pareil il n'y a pas qu'une couleur à changer mes aussi la plus part des images...
Et oui la couleur d'avant plan des images est le rose mais l'arrière c'est le blanc, dans la configuration actuelle on ne s'en rend pas compte par ce que ça se mélange avec la couleur de fond de la page...
Ceci dit, pour changer la couleur de fond de la zone de billet il faut changer:
background: #FFFFFF url(img/top.jpg) no-repeat top center;
par
background: #e8e8b8 url(img/top.jpg) no-repeat top center;
La zone #FFFFFF étant la couleur blanche. et #e8e8b8 un exemple comme un autre
Bon aller pour illustrer tout ça télécharge cette archive dézippe en conservant l'arborescence interne du dossier et en lançant le fichier html qui ce trouve dans le dossier PinkSubway/html tu devrais voir le résultat de la modif
Merci !
Je vais essayer de la faire, je risque d'y passer la nuit...:) ou plusieurs jours !
j'ai ouvert le fichier html et je comprends le pb. quand on change le fond, les bandeaux "commentaires" et autres restent blancs. ça fait bizarre non? faut vraiment que je me penche sur cette feuille de style. Enfin merci pour tout ça !
Bonjour, désolée d'occuper la place mais j'ai besoin d'aide ! je suis bloquée à l'étape "V) L'étape de votre blog" !! la souce ne s'affiche pas dans mon éditeur de texte, et je ne sais comment faire pour changer le chemin de la feuille de style : j'ai donc la page html, mais sans les img !
Au secours !
Comment ça la source ne s'affiche pas?
Quel éditeur ?
Bon aller pour te donner un coup de main voici ton blog mis en forme à télécharger et à dézipper Blog de carole
Merci encore !
En fait, il me restait juste à modifier le code source de la page d'accueil. je l'avais copié dans BBEdit, mais après, pour le modifier dans la page d'accueil, on fait comment ?
et je pense que ce sera bon...
A bientôt.
j'ai fait beaucoup de progrès en ce sens. Merci de l'aide que tu m'as apportée !!
Grâce à ces explications, j'ai réussi à personnaliser mon blog. Merci pour ces conseils !
Cependant, j"ai du faire une fausse manœuvre : le menu déroulant de mes "tags" -lorsque je crée mon billet- a disparu. Que dois-je modifier dans la CSS pour qu'il réapparaisse ?