S'identifier - S'inscrire - Ecrire un article - Contact

Ajouter des styles personnels à certaines pages ou à un modèle public

Par Stephane • Actualités • Mercredi 23/07/2008 • 16 commentaires  • Lu 3422 fois • Version imprimable

Mots-clés : , ,


Suite à la discussion initiée par Olivier "Amélioration des maquettes alternatives", j'ai réfléchi à comment on pourrait permettre de changer facilement la mise en page d'une page ou d'un ensemble de pages données, sans passer par la technique qui consiste à utiliser plusieurs modèles et à spécifier directement le modèle alternatif dans l'url (c'est compliqué, ce n'est pas très flexible, et c'est un cauchemar à maintenir).

J'ai trouvé une solution simple, qui permet non seulement de changer le style de certaines pages, mais aussi de changer les styles d'un modèle de mise en page public.



En pratique, il faut mettre dans le texte d'un article, d'un texte, ou d'un bloc libre le code souhaité entre les balises <head> et </head>. (attention à bien passer en mode code source pour les articles et textes).

Pour essayer, j'ai ajouté le code suivant dans un des blocs libres de Vie de ViaBloga :

<head>
<style type="text/css" media="all">
#header h1 a {
    font:1.5em Verdana, Arial, sans-serif;
}
</style>
</head>

Et j'ai ainsi pu changer la police de caractère utilisée pour le titre du blog, tout en gardant le modèle public. Avant il fallait télécharger le modèle public, changer le code, et renvoyer le modèle en tant que modèle personnel. Le gros souci, c'est que les mises à jour des modèles (nouvelles fonctionnalités etc.) ne sont faites que sur le modèles publics, ce qui a refroidi les ardeurs de redesign de beaucoup d'entre vous. Maintenant c'est beaucoup plus facile et flexible : vous gardez le modèle public, vous ajoutez les styles que vous souhaitez dans un des blocs affichés, et c'est tout. Génial, non ? :-)

Je vais maintenant passer en mode code source pour essayer de changer le style du titre de cet article, et seulement de cet article.




J'ai ajouté :

<head>
<style type="text/css" media="all">
#content h2, #content h2 a
{
    font-family:comic sans ms;
    color:orange;
    background-color:black;
}
</style>
</head>

Je suis sûr que vous trouverez de nombreuses utilisations pour cette nouvelle fonction, changements de styles, javascript, voir ajout de metatags et autres. A vous de jouer !

D'autres articles sur des thèmes similaires :


Commentaires

par OlivierMG le Mercredi 23/07/2008 à 21:34

OlivierMG

 "Génial, non ?"

oh oui !! c'est une grande évolution, chaque page du blog pouvant maintenant avoir son propre modèle de mise en page. Il n'y a quasiment plus de limite à la personnalisation du blog ! :-)


par OlivierMG le Jeudi 24/07/2008 à 08:39

OlivierMG  je ferai un tutoriel en vidéo ce we (et en même temps, je montrerai les possibilités des tables avec les images).


par isabelle le Jeudi 24/07/2008 à 14:16

isabelle Génial, génial !!
Il va juste falloir que dans un petit coin des tutos, on se fasse une liste de phrases types en html pour traduire à quoi ça correspond, afin que ceux qui n'y connaissent rien en html puissent apprendre petit à petit un peu de syntaxe simple :-)


par isabelle le Dimanche 05/10/2008 à 23:57

isabelle J'ai modifié de cette manière tous les titres des articles d'un Goofy de façon à rester avec un modèle public. Mais j'ai l'impression que ça ralentit l'affichage des pages : l'ancien style s'affiche d'abord et le nouveau se superpose ensuite, avec un petit temps de décalage...


0/20 par isabelle le Samedi 08/11/2008 à 20:44

isabelle  Je voudrais mettre le titre d'un blog au milieu. J'ai bidullé le code suivant, ça a changé la police mais ça ne marche pô pour le milieu . J'ai du me tromper quelque part. Est-ce qu'un pro du camboui pourrait me le corriger :-)
<style media="all" type="text/css"> #header h1 a { font:1.5em STHeiti;<div style="text-align: center; "> } </style>


Re: 0/20 par OlivierMG le Lundi 10/11/2008 à 06:58

OlivierMG

il faut enlever le "div style".

<style media="all" type="text/css"> 

 #header h1 a 

{ font:1.5em STHeiti;

text-align: center; } 

 

</style>


Re: 0/20 par isabelle le Lundi 10/11/2008 à 12:11

isabelle  ouillouilloulle, rien de rien !
C'est


Re: 0/20 par OlivierMG le Lundi 10/11/2008 à 12:54

OlivierMG  
belle police pour le titre isabelle !
...mais elle risque d'être remplacée par une autre selon le système d'exploitation/navigateur utilisé.

ça va bientôt changer, mais il ne faut pas oublier que pour l'instant les polices de caractères sont prises sur le poste du lecteur. Donc, si tu indiques une belle police que tu as sur ton poste, elle ne seras affichée sur les ordis des personnes qui lisent ton blog, uniquement si elles ont aussi cette police d'installée sur leur ordi.. C'est pour cela qu'on se limite généralement aux polices standard installées sur tous les ordinateurs.

pour ton problème de centrage de titre, il faut mettre :


#header {
text-align: center;
}
 
ce qui devrait donner quelque chose comme ça :



Re: 0/20 par isabelle le Lundi 10/11/2008 à 13:01

isabelle Super, ça marche !!

Qu'est-ce qui se passe pour ceux qui n'ont pas la police : ils ne voient rien d'afficher, ou ils voient la police par défaut du modèle ?


Re: 0/20 par isabelle le Lundi 17/11/2008 à 22:54

isabelle J'ai dû rajouter h1 après #header sinon le texte des sous-onglets s'alignaient aussi au centre, mais problème, le sous-titre reste alors aligné à gauche !!


Re: 0/20 par OlivierMG le Lundi 10/11/2008 à 12:56

OlivierMG  comme tu peux le voir, sur XP/IE6, ta belle police a été remplacée par une autre :-( 


Re: 0/20 par isabelle le Lundi 10/11/2008 à 13:02

isabelle ah, ah je ris, tu m'as déjà répondu pendant que je posais ma question. Merci Olive !!


encore une couche par isabelle le Vendredi 14/11/2008 à 14:19

isabelle Est-ce qu'il y a moyen avec cette méthode de modifier un ithème : je voudrais diminuer l'interligne afin de gagner en affichage de texte sur une page ? Et aucune idée du code, bien sûr :-) ...


beurk beurk, j'ai la poisse !! par isabelle le Samedi 08/11/2008 à 21:13

isabelle  J'ai aussi changé la police des articles mais celle de l'article seul sur sa ligne se retrouve plus petite que ceux qui sont ensuite par deux : <style media="all" type="text/css"> #content h2, #content h2 a { font-family:STHeiti; font-size: 18px; } </style>


J'ai appliqué :-) par tgtg le Samedi 04/07/2009 à 12:15

tgtg Pour voir...

- Pour changer le style du titre d'un article, j'ai bêtement recopié, dans l'article,  le code indiqué ci-dessus... et ça fonctionne :-)))

- Pour changer la police de caractère du titre de mon blog [ et obtenir celle du titre du site ici ], j'ai bêtement recopié, dans un bloc libre du blog, le code indiqué ci-dessus... et ça ne fonctionne pas :-)))

J'aime le modèle mimbo, mais je trouve que le titre et le sous-titre sont "trop lourds" et qu'on manque un peu de possibilités quant à la bannière que l'on (ne) peut placer (que) dans les onglets...
[ clic sur la bannière de Photos Promenade pour voir (aujourd'hui :-)) ]


Réussi ! par tgtg le Lundi 03/08/2009 à 23:28

tgtg J'ai réussi à changer la police de caractère du titre de mon blog :-)



Session

Pour participer plus facilement, ouvrez une session :

Identifiant de
mon blog
Nom d'utilisateur
Mot de passe

Si vous avez déjà un blog sur ViaBloga ou si vous avez ouvert un compte sur l'un d'entre eux, vous pouvez vous identifier avec votre nom d'utilisateur et mot de passe en précisant d'abord l'identifiant de votre blog.

S'inscrire

Ailleurs sur ViaBloga


Archives par mois