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 • 4 commentaires  • Lu 419 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

 "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

 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...



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

Recherche


Archive : tous les articles

Nouveaux utilisateurs


Mises à jour des profils