userContent.css : trucs et astuces

[ottomar]

@-moz-document domain("forum.telecharger.01net.com")
{
* { background : Blanchedalmond !important; }
}

http://www.htmlgoodies.com/tutorials/co ... hp/3478961

[FF_Olivier]

Salut Sidonie, essaie ceci :

Code : Tout sélectionner

@-moz-document url-prefix(http://forum.telecharger.01net.com/)
{
  [bgcolor="#FFFFFF"],
  [bgcolor="white"],
  [class],
  [id] { background-color: #E0E8F2 !important; }
  [style] { background-color: #D70200 !important; }
  td[width="300"] { display:none !important; }
}

Et n'oublie pas de fermer et de relancer FF après la modification.

EDIT : grosse erreur de syntaxe ...

[Sidonie]

@-moz-document domain("forum.telecharger.01net.com")
{
* { background : Blanchedalmond !important; }
}

http://www.htmlgoodies.com/tutorials/co ... hp/3478961

Génial !!! ça marche !

Et je peux mettre mon antipub à la suite ?

Code : Tout sélectionner

td[width="300"]
{
display:none
}

Parce que si je le mets avant ça ne fonctionne pas pour les couleurs


FF_Olivier >> désolée, le tien ne fonctionne pas

edit : Wouaowww !! ça marche sans bannière et en bleu
Merci beaucoup Ottomar

[Yoko]

Je cherche à modifier une page qui n'utilise qu'en parti les CSS et évidement c'est un block sans ID nin class que j'aurais voulut modifier (viré en fait.
Il y a moyen?

[FF_Olivier]

FF_Olivier >> désolée, le tien ne fonctionne pas

En effet grossière erreur de syntaxe de ma part, c'est @-moz-document et non @moz-document.
Désolé ...

[FF_Olivier]

Je cherche à modifier une page qui n'utilise qu'en parti les CSS et évidement c'est un block sans ID nin class que j'aurais voulut modifier (viré en fait.
Il y a moyen?

Ça dépend de la page en question, peux-tu nous donner son adresse URL ? Et utiliser FF v1.5 aide aussi, grâce à sa possibilité de discrimination par site.

[FF_Olivier]

@-moz-document domain("forum.telecharger.01net.com")
{
* { background : Blanchedalmond !important; }
}

Si j'ose me permettre, à strictement parler, ça devrait être @-moz-document domain(01net.com) ou @-moz-document url(http://forum.telecharger.01net.com) ou @-moz-document url-prefix(http://forum.telecharger.01net.com/).

Mais bon, si ça marche comme ça ...

[ottomar]

Si j'ose me permettre

le gourou, ici, c'est pas moi !
ni ailleurs

[Sidonie]

FF_Olivier >> désolée, le tien ne fonctionne pas

En effet grossière erreur de syntaxe de ma part, c'est @-moz-document et non @moz-document.
Désolé ...

en effet ça marche tout de suite mieux comme ça

Adopté car il permet de jouer sur 2 couleurs

Merci beaucoup à vous deux car je n'en suis qu'au début des tutos et explications donnés par les liens de Ottomar ...
Si vous n'étiez pas là, je serais encore en train de tâtonner dans 1 mois

Je vais néanmoins essayer de peaufiner et changer la couleur de titre des rubriques de rouge à noir (ou bleu marine)...

Merci encore

[ottomar]

Yoko
sers-toi de webdeveloper et >entourer l'élément sélectionné, tu as le shéma dans la barre d'état, ça peut ressembler à ça :

Code : Tout sélectionner

table.topbkg > tbody > tr > td

c'est avec ça que je change l'entête de geckozone, donc ça roule !

[Invité]

Bonjour,

Quelqu'un arrive-t-il à modifier l'affichage des ces forums :
http://forums.jeuxonline.info/forumdisplay.php?f=45

J'ai utilisé ce code là :

Code : Tout sélectionner

@-moz-document url-prefix(http://forums.jeuxonline.info/)
{
	body {
		background-color: #FF99CC;
		font-family: Verdana, Arial, Helvetica;
		font-size: 12px;
		background-image: url('http://forums.jeuxonline.info/jol/outils/jolmodoaide/img/fond.png');
		margin: 0px;
		text-align: center; 
	}
}

Mais ça ne fonctionne pas réellement. En fait il faut que je désactive les CSS avec webdevelopper pour voir le code CSS au dessus fonctionner.

Merci de votre aide :)

[calimo]

Est-ce que quelques !important pourraient améliorer les choses ? Il n'est pas inutile de préciser que sans le !important, les CSS utilisateurs sont moins spécifiques que les valeurs de l'auteur, donc ne sont pas appliquées

[Surfoo]

Oops, désolé j'avais complétement oublié le !important :/

[ottomar]

ou comment changer/supprimer une image qui n'est pas définie par le style de la page web (par les css) mais par le code html (<img src="chemin/vers/image.png")

trouvé sur les forums mozillazine, ici
avec un p'tit grattage de poil pour le remplacement

!important: code dans le userContent
comme exemple, je suis allé sur la page des extensions...



...faire des misères au logo firefox dont le doux nom est : src='/xpi/icons/product-firefox-20.png'
pour supprimer l'image, carrément méchant :

Code : Tout sélectionner

@-moz-document url("http://extensions.geckozone.org/Firefox/") 
{
img[src*='/xpi/icons/product-firefox-20.png']
{
display: none !important
}
}

pour la remplacer (bon, j'ai pris n'importe quoi en 20x20, mais la même dimension n'est pas obligatoire)

Code : Tout sélectionner

@-moz-document url("http://extensions.geckozone.org/Firefox/") 
{
img[src*='/xpi/icons/product-firefox-20.png']
{
max-width: 0 !important;
padding-left: 20px !important;
    	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA%2FwD%2FAP%2BgvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH1gMPBxUOwjLiggAAAjxJREFUOMttlLFuE0EQhr%2FfnC8gvEYoQgKDwPSRQDIddUpXPMBFoqGxn%2BEk3sB5gbinC7wC0ERpKBGxkIgCFCQFinIgD8Xu3e36uMbr3ZvZ%2F%2F9m5gC41oN7DuAp6BXSS6o8L6o8f1Pl%2BUnVz6%2BqvH9V5flJ2CvQc3yseHg7p35UL%2B7chJ%2B%2Fn1C5LwVSCYyRoreURAitgPL6xfny%2Fq0%2BX39V7fHdQY%2BRW%2FNRowVoJhmGQEIG9ABTk7hZ%2Br%2F74%2FOz%2BbcLnzAD2Jvc4PXZgwUwQ8IiURaiRZtQMn%2BBv2i2ckP6F5%2FmjcI%2FzyYFcEBQ1QKJ1rWhSBq9hMFe%2F%2F2HZQaAc2V7oCbGOvzCmQTWUjB%2FcQks9Xc6LYADv2nBWrAdWW5sbyi1VMRehnNTv%2BELYY3TmKVCkWyj2orICINpxsBNUJAflU9SwlEJ0zZ5MFarnGQM3Si%2BJbakyFKsqkXRUTzK5FxgoaioPlvQgEUxptZmExNeMEGGc6cY4xo8cb%2BRJrKoMGkHeLVCpxlucAQaK%2B49RZMRM0xsK%2B1P%2F3OUMRgeIl5IwsxQpMSIclttvfVfJ7UWwaEA1m%2FfnZgYK2IZB7et046gJe0okFa93d3HflKGrhQc%2BI%2BBYVIItC7TDb5Wt5goEzTr4%2BMFMFNQks5tzFed8Qbt93Z25klCgPXnzwvELG0VtSoCko0K7ffGj%2BadD2yT9Mf3Qqg0AtMGvh%2FOCMFKUGp7e0m33t3HLi8LxBSYmDQKVT4VHAGH2tpa%2Fi%2FuH%2BrBqsoVwxj3AAAAAElFTkSuQmCC) !important;
}
}

quelque petites explications :
le max-width s'applique à l'image existante (firefox) pour la cacher. à l'origine, dans le code de mozillazine, il y a juste 'width' qui ne veut pas marcher, j'ai mis un moment à trouver,
le padding, pour laisser de la place à la nouvelle,
le remplacement se fait avec les données 'data' de la nouvelle image (son codage), et là attention ! un code data d'une image en 100x50 peut faire 3 mêtres de long (sissi !!!) gedit, par exemple, ne digère pas !
les données data vous les aurez sur un générateur de données data (arfff ! arggg !) : en Suisse, ici, pas là. attention à bien cocher la case du dessus 'base 64' pour le reste, vous parcourez et vous générez !

C'est tout pour aujourd'hui !
Enjoy ! Halof !

[FF_Olivier]

Une fois n'est pas coutume, cette fois-ci c'est moi qui pose une question dans cette section (bin oui ).

Dans certains forums phpBB, http://franquin.org/forum par ex., selon le template, les messages postés et leur signature sont enchaînés à la suite l'un de l'autre dans le même <span class="postbody">, séparés seulement par la combinaison <br>_________________<br>.

Donc :

Code : Tout sélectionner

<span class="postbody">blablabla blablabla blablabla mon super post qu'il est joli et que sa prose se termine ici<br>_________________<br>Et que voici la signature qui commence ici avec parfois des images à virer parce que franchement, bon...

Mon pb, c'est que je n'arrive pas à spécifier cette combinaison <br>_________________<br> comme attribut/propriété/valeur CSS dans mon userContent.css.
J'arrive bien sûr à faire :

Code : Tout sélectionner

span.postbody > br + br ~ img,
span.postbody > br + br ~ * img { display: none !important; }

... mais comment est-ce que je définis les soulignés entre les 2 br ? J'ai peur que sans eux ce filtre ne soit pas suffisamment discriminant.

Merci pour vos idées. La solution est p-ê toute bête, mais j'ai un passage à vide, là ...