Tom's Guide Style

Tom's Guide Style by Flobesst

Tom's Guide Style est une feuille de style CSS créée spécialement pour le forum Tom's Guide. Disponible en 2 versions, l'une permet de modifier quelques éléments visuels du forum dans le but de le rendre plus accessible, agréable et pratique et l'autre permet de revenir à la version 2007 d'IDN ! Pour utiliser cette extension, il vous suffira simplement de posséder un petit module complémentaire pour Mozilla Firefox. Sachez qu'il est également possible de personnaliser la feuille de style à votre guise.

Que change Tom's Guide Style ?
Tom's Guide Style (v2.4) vous permet de:

supprimer la couleur violette des liens visités
cacher le titre du sujet et les liens vers Tom's Hardware et Tom's Games situés tout en haut de la page
décoller le titre du sujet par rapport au panneau de profil
afficher le suivi de discussion collé à droite
agrandis la taille d'écriture des n° de pages
mieux distinguer les différents messages (séparations plus marquées)
mieux distinguer le profil par rapport au message (grâce à des bordures, des couleurs et une police réduite)
agrandir ce profil
avoir un avatar centré
masquer le système de notation (mais pas de le désactiver...)
colorer les citations, spoilers etc... pour mieux les dinstinguer
réduire au maximum l'espace entre la signature et le bas du post
agrandir la taille de la réponse rapide
augmenter la taille des liens de navigation (Tom's Guide > Forum > Catégorie)
cacher le cadre "Liens" de publicités
cacher les "Produits relatifs" (pubs)
cacher le pied de page ("A propos de BestOfMedia, le Copyright..." )
revêtir IDN aux couleurs de l'automne

Tom's Guide Style (2007 IDN Version v1.1) vous permet de revenir à la version "IDN" du forum, en 2007. Pour les nostalgiques donc !

Avant / Après

J'adopte, j'installe
Pour que Tom's Guide Style fonctionne correctement, vous devez déjà désactiver les autres extensions que vous pouvez avoir installé (CustomizeIDN, MDEnhance...).

Ensuite, téléchargez le module complémentaire Stylish.

Une fois installé et Firefox redémarré, vous devez récupérer la feuille de style désirée:
Version Standard v2.4
2007 IDN Version v1.1
Repérez et cliquez sur "Install with Stylish" dans le cadre vert. Dans la nouvelle fenêtre qui s'est ouverte, cliquez sur "Installer". Assurez-vous ensuite que la colonne de droite sur le forum est affichée (ne vous inquiétez pas, elle sera invisible grâce à Tom's Guide Style) pour que vous puissiez voir le suivi de discussions. Tom's Guide Style est opérationnel !

Mises à jour
Je ferai fréquemment des mises à jour pour Tom's Guide Style, ceci pour 2 raisons: la perpétuelle amélioration de l'extension et les techniciens qui modifient eux-même le thème. Je vous indiquerai à chaque fois, dans ce topic, quand je publie une mise à jour et comment vous pourrez vous mettre à jour chez vous.

Personnaliser Tom's Guide Style
Si des choses ne vous plaisent pas dans ce nouveau style, vous pouvez les supprimer facilement. Pour cela, allez dans Stylish:

...et cliquez sur "Gestion des styles". Sélectionnez Tom's Guide Style et cliquez sur "Editer". Supprimez alors tout ce qui ne vous plaît pas et enregistrez votre travail. C'est la même manipulation si vous voulez ajouter des choses

Ce topic est également là pour présenter vos suggestions pour Tom's Guide Style et les bugs que vous rencontrez avec. Attention: si vous découvrez un bug, désactivez Tom's Guide Style pour voir si c'est lié à ce dernier. Si ça l'est, postez le bug ici. Sinon, dans le topic bugs.

Tom's Guide Style by Flobesst

Message édité par Flobesst le 25-10-2009 à 19:21:16

------------------------------ 74% de problèmes informatiques résolus ● Tom's Guide Style

Répondre

Inscrivez-vous ou connectez-vous pour masquer ceci.

c'est de toi ca ? t'es le nouveau omar flo le flomar

bravo en tous cas

Message édité par nicotelsa le 29-01-2009 à 19:45:12

------------------------------ n'aura plus jamais le temps de se consacrer a la quete du grand guide , je resterai un vulgaire inissié =(
Répondre à nicotelsa

FlomaR

Erf je n'ai pas la prétention de dire que je suis le nouvel OmaR...

Spoiler :

lèèèèche cul

...mais en tous cas c'est bien de moi ^^

Merci Nico !

------------------------------ 74% de problèmes informatiques résolus ● Tom's Guide Style
Répondre à Flobesst

Si on a déjà un CSS perso, il faut le dégager (ou l'inclure dans le tien) ? Car là, ça ne marche pas chez moi.

Sinon, bon boulot ! Et belle présentation !

------------------------------ Topic Aviation | Vos régions | Les Tutos IDN
Mon inconnue du Métro 6
Répondre à Yama310

Ca dépend, il ne faut pas que les 2 CSS rentrent en conflit. Si tu me passes ton CSS, je pourrai voir et fusionner les 2

Sinon, merci

------------------------------ 74% de problèmes informatiques résolus ● Tom's Guide Style
Répondre à Flobesst

J'ai ça. Le premier morceau pour IDN, l'autre pour PPC !

@-moz-document url-prefix(http://www.infos-du-net.com/forum) {
#header-informations { display:none !important; }
#header-top { display:none !important; }
#header-banner { display:none !important; }
#footer { display:none !important; }
.basicSidebar { display:none !important; }
#container { width:100% !important; }
#main { width:99% !important; }
td.messCase2 p { width:100% !important; }
.legend { display:none !important; }
.copyright { display:none !important; }
.basicMain { display:none !important; }
}

@-moz-document url-prefix(http://www.presence-pc.com/forum/) {
#header-informations { display:none !important; }
#header-top { display:none !important; }
#header-banner { display:none !important; }
#footer { display:none !important; }
.basicSidebar { display:none !important; }
#container { width:100% !important; }
#main { width:99% !important; }
td.messCase2 p { width:100% !important; }
.legend { display:none !important; }
.copyright { display:none !important; }
.basicMain { display:none !important; }
}

------------------------------ Topic Aviation | Vos régions | Les Tutos IDN
Mon inconnue du Métro 6
Répondre à Yama310

Je reconnais ces quelques lignes... :whistle:

Répondre à OmaR

Ouais, © OmaR Sharif !

------------------------------ Topic Aviation | Vos régions | Les Tutos IDN
Mon inconnue du Métro 6
Répondre à Yama310

T'as placé une accolade fermante un peu haut Flobesst, à la fin:

Code :

/* Cache les produits relatifs (pubs en bas du forum) */
.basicMain { display: none !important ;}
}
/* Cache le pied de page (A propos de Bestofmedia, Copyright...) */
#footer { display:none !important; }
.copyright { display:none !important; }

devient

Code :

/* Cache les produits relatifs (pubs en bas du forum) */
.basicMain { display: none !important ;}
/* Cache le pied de page (A propos de Bestofmedia, Copyright...) */
#footer { display:none !important; }
.copyright { display:none !important; }
}

------------------------------ Log33kiel | Listing de logiciels gratuits ! | Log33kiel | Porno gratuit
Répondre à Loni

@Loni: ouaip, elle était mal placée la coquine

@Yama: Loni t'as déjà tout fait y parait

Message édité par Flobesst le 29-01-2009 à 22:10:04

------------------------------ 74% de problèmes informatiques résolus ● Tom's Guide Style
Répondre à Flobesst

Citation :

@Yama: Loni t'as déjà tout fait y parait

Ouais mais il est incompétent ! Je l'ai renvoyé.

Ça marche pas avec son truc et c'est pire .

------------------------------ Topic Aviation | Vos régions | Les Tutos IDN
Mon inconnue du Métro 6
Répondre à Yama310

[:rofl]

------------------------------ Log33kiel | Listing de logiciels gratuits ! | Log33kiel | Porno gratuit
Répondre à Loni

Bon, alors je reprend les choses en main:

Dans ton CSS, je récupère ça:

#header-banner { display:none !important; }

Ca va permettre de masquer la bannière bleue en haut.

Après, il y a ceci:

#container { width:100% !important; }
#main { width:99% !important; }
td.messCase2 p { width:100% !important; }

Qui ne sert plus à rien, vu que ça sert à élargir le forum. Or, il a déjà été élargi.

Après, le reste est déjà dans mon Tom's Guide Style.

Donc concrètement, tu peux ajouter le premier code que j'ai cité dans Tom's Guide Style. De toute façon, j'édite mon premier post

! Mise à Jour !
Cherchez ceci:

/* Cache le titre du sujet tout en haut écrit en blanc (Tom's Guide : ...) et les liens vers Tom's Hardware etc... */
#header-informations { display:none !important; }
#header-top { display:none !important; }

Ajouter après:

/* Cache toute la bannière bleue en haut (Tom's Guide) */
#header-banner { display:none !important; }

/* Cache les onglets (Accueil, Forum etc...) */
#header-menu { display:none !important; }

Message édité par Flobesst le 30-01-2009 à 20:28:37

------------------------------ 74% de problèmes informatiques résolus ● Tom's Guide Style
Répondre à Flobesst

Ahhhhhhhh !

Avec l'extension, ça ne marchait pas donc je l'ai mis en userContent.css.

Ça ne marchait pas plus mais en modifiant @-moz-document domain("infos-du-net.com" ) { par @-moz-document url-prefix(http://www.infos-du-net.com/forum) {, ça marche mais j'ai la colonne de droite qui s'affiche. Enfin, elle est masquée mais j'ai un espace blanc qui prend sa place...

C'est quand même mieux comme ça. Bravo .

Message cité 1 fois
Message édité par Yama310 le 30-01-2009 à 21:27:15

------------------------------ Topic Aviation | Vos régions | Les Tutos IDN
Mon inconnue du Métro 6
Répondre à Yama310

Yama310 a écrit :

ça marche mais j'ai la colonne de droite qui s'affiche. Enfin, elle est masquée mais j'ai un espace blanc qui prend sa place...

C'est peut-être CustomizeIDN. Vérifie que tu n'as plus "Design extensible, afficher le suivi de discussions à droite" de coché.

Yama310 a écrit :

Edit : en fait, j'aimerais bien conserver les onglets bleus en haut. Je dois modifier quoi ?

Les onglets bleus ? C'est soit la bannière bleue, soit les onglets, ou soit les 2 ^^

Pour les onglets, tu supprimes:

/* Cache les onglets (Accueil, Forum etc...) */
#header-menu { display:none !important; }

Et pour la bannière:

#header-banner { display:none !important; }

Message cité 1 fois

------------------------------ 74% de problèmes informatiques résolus ● Tom's Guide Style
Répondre à Flobesst

Flobesst a écrit :

C'est peut-être CustomizeIDN. Vérifie que tu n'as plus "Design extensible, afficher le suivi de discussions à droite" de coché.

Ah ouais, c'était bien ça ! Je pensais que c'était déjà viré ça !

Mais maintenant, je n'ai plus le suivi collé en bas comme avant !

</casse-couille>

Message édité par Yama310 le 30-01-2009 à 22:47:33

------------------------------ Topic Aviation | Vos régions | Les Tutos IDN
Mon inconnue du Métro 6
Répondre à Yama310

Erf je sais bien, et c'est bien dommage car je l'utilisais aussi... Mais si tu me donnes 10€, je veux bien faire des recherches

------------------------------ 74% de problèmes informatiques résolus ● Tom's Guide Style
Répondre à Flobesst

euh oui, mais non !

Je garde comme ça en attendant alors .

------------------------------ Topic Aviation | Vos régions | Les Tutos IDN
Mon inconnue du Métro 6
Répondre à Yama310

Merde

Je bosse déjà dessus.

------------------------------ 74% de problèmes informatiques résolus ● Tom's Guide Style
Répondre à Flobesst

Question bête : si je veux que ce soit pareil sur PPC, j'ajoute ça comment à la première ligne ?

Tu remarqueras tous les efforts que je fais pour maintenir le topic en haut hein.... :whistle:

Message édité par Yama310 le 30-01-2009 à 23:07:56

Répondre à Yama310

Je vois ça, c'est moi qui devrais te donner de l'argent finalement

Il faut que je voie si c'est exactement pareil niveau codage sur PPC, et je te redis ça

------------------------------ 74% de problèmes informatiques résolus ● Tom's Guide Style
Répondre à Flobesst

Danke ! :jap:

Normalement c'est pareil .

------------------------------ Topic Aviation | Vos régions | Les Tutos IDN
Mon inconnue du Métro 6
Répondre à Yama310

Pas tout à fait, les produits relatifs résistent sous PPC avec Tom's Guide Style et il y a aussi une propriété inutile. Donc voici le code pour PPC:

@namespace url(http://www.w3.org/1999/xhtml);

/* Feuille de style faite par Flobesst pour www.presence-pc.com (Tom's Hardware)
Un petit tour sur www.bazar-info.net en guise de remerciement, ça fera plaisir :) */

@-moz-document domain("presence-pc.com" ) {

/* Cache le titre du sujet tout en haut écrit en blanc (Tom's Hardware : ...) et les liens vers Tom's Hardware etc... */
#header-informations { display:none !important; }
#header-top { display:none !important; }

/* Cache toute la bannière bleue en haut (Tom's Guide) */
#header-banner { display:none !important; }

/* Cache les onglets (Accueil, Forum etc...) */
#header-menu { display:none !important; }

/* Centrage des boutons de notification par mail et de favoris */
.mainTools { float:none !important }

/* Couleur des bordures des messages */
.message { border-color: #323232 !important ;}

/* Profil des membres (couleur, bords, taille etc...) */
.tools { font-size:10px !important;
background-color: #e1ebf2 !important ;
padding-right: 10px !important;
margin-right: 7px !important;
border: 1px solid #bec6d9 !important;
width: 150px !important; }

/* Centrage de l'avatar */
.tools .avatar { text-align: center !important;
margin-left: 25px !important }

/* Place les boutons "MP un membre" etc... sur le profil. ! Ne PAS supprimer ! */
.tools .infos { margin-right: 0px !important;
width: auto !important;
position: absolute !important;
left: 135px !important }

/* Décale les boutons BBCode, Alterter et Masquer */
.header .left { margin-left: 20px !important ;}

/* Cache le système de notations */
.right { display:none !important; }

/* Décale et réduit au max l'espace entre la signature et le bas du post */
#mesdiscussions .signature { padding-bottom: 20px !important;
margin-left: 20px !important;}

/* Agrandis la taille de la réponse rapide. Modifiez 700 pour la largeur et 200 pour la hauteur. */
.quickReply textarea { width: 700px !important;
height: 200px !important;
}

/* Augmentation de la police des liens de navigation ("Tom's Guide > Forum > Catégorie" ) */
.footerOptions { font-size: 12px !important; }

/* Cache le bloc "Liens" en bas avec les pubs */
.basicSidebar { display:none !important; }

/* Cache les produits relatifs (pubs en bas du forum) */
.basicRight { display: none !important ;}

/* Cache le pied de page (A propos de Bestofmedia, Copyright...) */
#footer { display:none !important; }
.copyright { display:none !important; }
}

Pour le mettre sur Stylish, tu fais Ecrire un style > Vierge. Tu met "Tom's Hardware Style" en description et tu colles le code.
N'oublie pas de virer ce que tu veux garder: bannière bleue etc...

Je posterai peut-être cela sur PPC

------------------------------ 74% de problèmes informatiques résolus ● Tom's Guide Style
Répondre à Flobesst

Et voilà, encore une extension QUE pour FX !

'spèce de talibans !

Message cité 1 fois

------------------------------ Gonzo addict :
"ah non finalement ils t'ont retiré le droit , zavé bien raison
- Ah oué? Bah j't'emmerde."
Répondre à Exoseth

J'ai jamais touché à Opéra, je vais pas me lancer là dedans sans connaître

------------------------------ 74% de problèmes informatiques résolus ● Tom's Guide Style
Répondre à Flobesst

Bravo pour l'effort de programmation :jap:

------------------------------ Tu as entre 16 et 22 ans ? Prends 10s pour aider la science !
Vous me déprimez.
Répondre à Grandefolle

Chrome cay le bien

------------------------------ Log33kiel | Listing de logiciels gratuits ! | Log33kiel | Porno gratuit
Répondre à Loni

Merci GF

Allez, ça va faire plaisir à Yamama et aussi d'autres personnes:

! Mise à Jour !
Voici le suivi de discussions collé à droite !

Cherchez ceci:

/* Centrage des boutons de notification par mail et de favoris */
.mainTools { float:none !important }

Et ajoutez après:

/* Affiche le suivi de discussions en bas à droite */
#main {width:auto !important;
margin-right:290px !important; }
div#accountPanel { height:auto !important;
width:320px !important;
max-width:320px !important;
max-height:500px !important;
display: block !important;
position:fixed !important;
top:auto !important;
bottom:0px !important;}

------------------------------ 74% de problèmes informatiques résolus ● Tom's Guide Style
Répondre à Flobesst

Nickel pour PPC ! Merci bcp Flo .

------------------------------ Topic Aviation | Vos régions | Les Tutos IDN
Mon inconnue du Métro 6
Répondre à Yama310

Et le suivi de discussions est bien chez toi (pour IDN) ?

------------------------------ 74% de problèmes informatiques résolus ● Tom's Guide Style
Répondre à Flobesst

Ça me masque le heut du premier post mais ça ne gène pas du tout.

------------------------------ Topic Aviation | Vos régions | Les Tutos IDN
Mon inconnue du Métro 6
Répondre à Yama310

Ah ouais ? Uhm... Chez moi je n'ai pas ce soucis... T'es sûr que ça ne te dérange pas, parce que je peux essayer de voir ça.

------------------------------ 74% de problèmes informatiques résolus ● Tom's Guide Style
Répondre à Flobesst

Non, c'est bon, ça ne masque rien d'important.

Enfin, je viens de voir que ça supprime un bloc dans l'interface de modération. Je vais demander à Omar de voir ça s'il a un peu de temps.

------------------------------ Topic Aviation | Vos régions | Les Tutos IDN
Mon inconnue du Métro 6
Répondre à Yama310

! Mise à Jour !
Une mise à jour permettant de "décoller" un peu le suivi de discussions par rapport aux messages est disponible.

Cliquez 1 fois sur la petite icône Stylish en bas a droite de Firefox
Gestion des Styles
Sélectionnez Tom's Guide Style
Cliquez sur Rechercher des mises à jour
Sélectionnez Tom's Guide Style
Cliquez sur Mettre à Jour

Merci

------------------------------ 74% de problèmes informatiques résolus ● Tom's Guide Style
Répondre à Flobesst

Exoseth a écrit :

Et voilà, encore une extension QUE pour FX !

'spèce de talibans !

En même temps pour Opera pas besoin d'installer une extension pour surcharger un css

------------------------------ Le site 3.0 | Twitt' | Hinsotube

Répondre à H-hich

C'est juste. J'ai tendance à l'oublier.

Edit :

Quelqu'un veut bien mettre le code du CSS pour que je le test avec Opera siouplait ?

Message édité par Exoseth le 03-02-2009 à 09:21:45

------------------------------ Gonzo addict :
"ah non finalement ils t'ont retiré le droit , zavé bien raison
- Ah oué? Bah j't'emmerde."
Répondre à Exoseth

http://userstyles.org/styles/14271
("Show Code" )

------------------------------ 74% de problèmes informatiques résolus ● Tom's Guide Style
Répondre à Flobesst

Curieux comme je suis j'ai installé et testé.... ben je le garde!
Merci Flo

------------------------------ L'embétant avec les cons c'est qu'ils ne s'arrêtent jamais!
Ingénieur en mécanique .

Répondre à MaxoupierrotiN

Derien Maxou merci à toi, ça fait plaisir

N'hésite pas si tu as des suggestions

------------------------------ 74% de problèmes informatiques résolus ● Tom's Guide Style
Répondre à Flobesst

c'est quoi ton prochain plan flo ?

------------------------------ n'aura plus jamais le temps de se consacrer a la quete du grand guide , je resterai un vulgaire inissié =(
Répondre à nicotelsa

Cul [:cupra]

EDIT: merci pour ta signature nico :lol:

Message édité par Flobesst le 05-02-2009 à 17:16:08

------------------------------ 74% de problèmes informatiques résolus ● Tom's Guide Style
Répondre à Flobesst

aah enfin du cul sur l'idn

merci a toi flo

------------------------------ n'aura plus jamais le temps de se consacrer a la quete du grand guide , je resterai un vulgaire inissié =(
Répondre à nicotelsa

J'vais tenter de remettre les BBCodes au-dessus de la réponse rapide tiens

------------------------------ 74% de problèmes informatiques résolus ● Tom's Guide Style
Répondre à Flobesst

A oui c'est bien ça... et un petit bouton "Haut de page" c'est possible?

------------------------------ L'embétant avec les cons c'est qu'ils ne s'arrêtent jamais!
Ingénieur en mécanique .

Répondre à MaxoupierrotiN

Non et non

Répondre à OmaR

D'accord Omar comme tu veux!

De toute façon je suis incapable de le faire alors....

Par contre, Flo, tu sais quand il y a plusieurs pages sur un topic en bas il y a "Page précédente" et "Page suivante" et aussi les numéros de page qu'on peut sélectionner!

Et bien moi "Page suivante" il n'apparait pas! C'est normal?

------------------------------ L'embétant avec les cons c'est qu'ils ne s'arrêtent jamais!
Ingénieur en mécanique .

Répondre à MaxoupierrotiN

Erf c'est bizarre Maxou, en fait, je possède 2 PC et sur un j'ai le même soucis que toi, mais pas sur l'autre. Et manque de bol, je suis sur celui où ça fonctionne

Mais je vais essayer de voir ça quand même

------------------------------ 74% de problèmes informatiques résolus ● Tom's Guide Style
Répondre à Flobesst

C'est pas comme je veux max
C'est juste qu'on peut pas faire ça juste avec du CSS

Message cité 1 fois

Répondre à OmaR

OmaR a écrit :

C'est pas comme je veux max
C'est juste qu'on peut pas faire ça juste avec du CSS

D'accord Omar c'est comme tu veux, si tu veux pas le faire avec du CSS c'est ton choix!!

A la fois Flo ce n'est pas super important!!!

Spoiler :

C'est bon OmaR j'ai compris va....
excuses moi je suis assez inculte en techno site web! Il faudrait que je m'y mette mais je me laisse doucement bercer par ceux que ça passionne!

------------------------------ L'embétant avec les cons c'est qu'ils ne s'arrêtent jamais!
Ingénieur en mécanique .

Répondre à MaxoupierrotiN

On va quand même tester ceci Maxou:

! Mise à Jour !
Une mise à jour pour ne pas masquer le lien "Page Suivante".
Le site où est hébergé le code semble buger, on fait donc une mise à jour manuelle:

Cliquez 1 fois sur la petite icône Stylish en bas a droite de Firefox
Gestion des Styles
Sélectionnez Tom's Guide Style
Cliquez sur Editer...
Recherchez ceci:
/* Cache le système de notations */
.right { display:none !important; }
- Remplacez par ceci:
  /* Cache le système de notations */
  .header .right { display:none !important; }
  - Enregistrez.
  Merci
  
  Message édité par Flobesst le 05-02-2009 à 22:10:45

------------------------------ 74% de problèmes informatiques résolus ● Tom's Guide Style
Répondre à Flobesst

Forum Coin des IDNautes : Tom's Guide Style