Firefox 1.5 : jouons avec les feuilles de styles utilisateur.

Billet

Il y a quelques jours je vous parlais de la jolie utilisation de CSS utilisateur qu'avait fait Thomas en restylant le site Bugzilla.

Firefox 1.5b1 est très proche et ce type d'utilisation sera donc utilisable bientôt par un plus large public de testeurs, je vous propose donc une application plus marrante des feuilles de styles utilisateurs site par site.

Voici le site de l'Elysée : http://www.elysee.fr/

Voici mon userContent.css : userContent.css

Et enfin voici une capture d'écran de comment moi je vois le site de l'Elysée maintenant : http://pascal.chevrel.free.fr/elysee/elysee1.jpg

Pascal

06-09-2005

Firefox

16 commentaires

5 rétroliens

Commentaires

1. Le mardi 6 septembre 2005, 16:01 par Moktoipas

Comme d'hab, j'adore ^^

Un de plus dans mon userContent.css

Ce fichier s'il est trop plain risque il de faire ramer firefox ?

2. Le mardi 6 septembre 2005, 16:03 par Thomas

Joli travail :)

Pour ne pas surcharger le fichier userContent.css il suffirait (non testé) de copier le code spécifique à un site dans un fichier nommé le_site.css (par exemple) puis de copier tout en haut du fichier userContent.css le code suivant :
@import url("le_site.css");

3. Le mardi 6 septembre 2005, 16:10 par Moktoipas

Merci thomas, c vrai que comme ca, le fichier est plus lisible et plus facile a mettre a jour.

En fait je voudrai savoir si le fochoer est lu au demarage de Fx. Dans ce cas la, un fichier trop long (ou avec plein d'imports) prendrai du temps.

4. Le mardi 6 septembre 2005, 16:27 par Moktoipas

fochoer=fichier

5. Le mardi 6 septembre 2005, 16:57 par laOuine

C'est bluffant. ^^

6. Le mardi 6 septembre 2005, 17:01 par Titus

Génial, prochain site à restyler : www.whitehouse.gov/ :D

7. Le mardi 6 septembre 2005, 17:39 par LaurentJ

Trop rigolo :-)

8. Le mardi 6 septembre 2005, 17:48 par Erwan

Une question, qui n'a rien a voir : le texte "precedent" a cote du bouton. C'est integre dans une version recente de Firefox, ou c'est du userChrome.css ?

9. Le mardi 6 septembre 2005, 18:20 par pascal

-> Erwan, c'est une extension mais me demande pas laquelle, je me rappelle plus et j'ai réinstallé tout mon profil ce week end :)

10. Le mardi 6 septembre 2005, 19:47 par Nico

Arf, excellent ! ;-)

11. Le mercredi 7 septembre 2005, 11:10 par Thomas

Pour répondre : oui le fichier est lu au démarrage donc si il est trop long, cela risque de faire ramer Firefox.

12. Le mercredi 7 septembre 2005, 13:38 par Da Scritch

Ça vaut le foward aux voix des Guignols... Hop ! ayyyééééééééé

13. Le jeudi 8 septembre 2005, 21:20 par Vendredi

Morte de rire !
C'est très bon, ça, Pascal ! :)

14. Le vendredi 9 septembre 2005, 15:52 par Moktoipas

Merci thomas :D

Enfin il lui faudrait quand meme un fichier bien baleze..

15. Le dimanche 18 septembre 2005, 19:40 par Moktoipas

Ca y est, j'ai moi aussi joué avec les feuilles de style.

Je me suis attaqué à Gmail et ai decidé que le menu serait maintenant horizontal.

Deux captures:
www.moktoipas.com/gmail.p...
www.moktoipas.com/gmail2....

Un css:
www.moktoipas.com/gmail.c...

16. Le mardi 31 janvier 2006, 21:51 par Borensky

Bjr,

Utilisant de plus en plus fréquement les outils de la fondation Mozilla et délaissant les outils Microsfoft (Outlook), je cherche à personnaliser ma signature de mails sous la suite Mozilla et Thunderbird à l'aide de la feuille de style "userContent.css". Soit, je me prends les pieds dans le tapis et je n'actualise pas le bon fichier, mais les directives ajoutées à ce fichier ne fonctionnement pas.

Le code HTML du fichier associé à la signature a le contenu suivant :

<div class="moz-txt-sig">
Laurent BORENSY<br/>
IOS/SDM Applis SI Kozban (Group & Corp)<br/>
Tél: 06.82.78.71.31<br/>
<a href="www.pcop.dyndns.org/dream... privé</a>
</div>

Et le contenu de la feuille de style "userContent.css" :

/*
* Qqs modifications pour ma signature de messages
*/
.moz-txt-sig {
border: 1px dotted black;
margin: 10px 0 0 0;
padding: 5px;
color: white;
font-size: small;
font-family: Arial;
backgroung: black;
width: 30%;
}


.moz-txt-sig a {
text-decoration: none;
color : red;
}

.moz-txt-sig a:hower {
text-decoration: none;
color: green;
}

Bref, tout cela ne fonctionne pas et la signature est tout à fait classique, comme si la feuille de style était inexistante.

Par ailleurs, je profite de ce commentaire pour te demander, si tu connais comment lire à l'aide d'une API qqconque le contenu des conteneurs de mail sous Mozilla.

Merci.

La discussion continue ailleurs

1. Le mercredi 7 septembre 2005, 11:17 par Glazblog

Spitting Image

Take a french geek, for instance Pascal Chevrel. Take a good browser, for instance a nightly of the future Firefox 1.5. Take the web site of the French Presidency. And play a little bit with per-site user stylesheets. Have fun :-) BWAHAHAHAHA !!!!!!...

2. Le mercredi 7 septembre 2005, 12:37 par El Cau del Drac

Fulls d'estil d'usuari específics per a cada lloc web amb el nou Firefox 1.5

La nova versió del Firefox 1.5, com se'n fan ressò n'Oriol i n'Arnau

3. Le mercredi 7 septembre 2005, 16:34 par Standblog

En vrac

En vrac sur le Standblog : Rapid Web Development et piratage de blog.

4. Le mercredi 7 septembre 2005, 17:09 par Standblog

En vrac

En vrac sur le Standblog : Rapid Web Development, Mozilla Calendar, UserContent.css et piratage de blog.

5. Le jeudi 8 septembre 2005, 17:29 par Carnet Web de Miss Mopi

Firefox 1.5 & les CSS c'est magique!

Avec Firefox 1.5, on pourra créer ses propres CSS pour modifier l'apparence d'un site sur le web! Encore faut-il que le site soit bien conçu à la base bien sûr. Voici un exemple hilarant réalisé par Pascal : il a redécoré l'Elysée! Précision...

S'abonner