[Astuce] Affichage de la Liste des forums

Bonjour,

Ce sujet fait suite à cette discussion.
[Je précise que j'ai demandé et reçu l'accord de Jeff.]

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
La méthode décrite pour cette modif est présentée pour les utilisateurs(trices) de Firefox.
Cependant, comme l'extension "Stylish" (dont je parle plus bas) existe aussi pour Chrome, ç'est ptêt aussi réalisable, et donc ptêt aussi pour Chromium, ChromePlus, Iron. Comme il(s) n'utilise(ent) pas le même moteur de rendu je ne peux rien garantir quand aux codes utilisés, car je ne les ai pas d'installés, et j'en n'ai pas l'envie, donc avis aux amateurs...
Et pour les autres navigateurs, je saurais pas dire non plus :/
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

En résumé, il s'agit de permettre l'affichage de la "liste des forums" sans être obligé de passer par l'onglet [Liste des forums].
Deux choix sont présentés ici:
-1- soit elle redevient présente en tête de page, c'est à dire comme avant le relooking du site.

-2- soit elle apparaît quand on passe le curseur sur un bouton qui lui est fixe à l'écran pendant le scrolling, à la différence du reste de la page.
En gros, ça pourrait revenir à dire qu'on à fixer l'onglet "Liste des forums", on pourrait le faire mais c'est pas le top :/
Perso c'est l'ergonomie que je préfère et que j'utilise; elle offre l'avantage de ne pas être obligé de revenir en haut de page, on y a accès quelque soit le niveau où on se trouve dans la page.
On pourrait faire de même pour l'onglet "liste des messages".



..........................................................................
Pour celles et ceux qui ne veulent pas s'embarrasser d'une extension, la manip est simple, il s'agit de coller quelques petits codes dans un fichier situé dans le dossier "Profiles" de Firefox, là où sont entre-autre stocké toutes les données personnelles, vous savez, celui dont vous faites de temps en temps une ptite sauvegarde quand on y tient, isn't it ;)
Pour se rendre facilement dans ce dossier, sans se casser la tête (ou autre ;)) avec les dossiers cachés si vous l'avez laissé placé par défaut, dans Firefox direction le menu " ? " (ou "Aide" pour les Bêtateurs ou pour les non-windows) -> "Informations de dépannage" -> "ouvrir le dossier correspondant".
Une fois la nouvelle fenêtre ouverte, fermer FF.

Ensuite, ouvrir le dossier "Chrome", qui doit contenir deux fichiers, userChrome-example.css et userContent-example.css.
C'est le deuxième qui nous intéresse ici => userContent-example.css

note de bibi: si le dossier "Chrome" n'existe pas il faut alors acheter un nouvel ordi dernière génération... oÔ euh... ou pas :)
Non, il suffit de créer ce dossier, par clic-droit -> "nouveau"-> "Dossier", et de le nommer Chrome.
Ensuite ouvrir ce dossier, et par clic-droit -> "nouveau" -> "Document texte", et nommer le fichier userContent.css ;c'est dans ce fichier qu'il faudra coller les codes.

Pour celles et ceux qui ont déjà tout, il suffira d'ouvrir le fichier userContent-example.css, de coller les codes, et de passer par "Enregistrer sous" pour renommer le fichier en userContent.css.

On fini en fermant donc le fichier si c'est pas fait, ainsi que la fenêtre du profil. Ensuite on peut relancer FF.


renote du même auteur: Pour celles et ceux qui l'ont déjà ou qui préfèreraient, il existe aussi la possibilité de passer par exemple par l'extension "Stylish" qui s'occupe de tout pour la gestion du code, et qui est bien pratique pour les tests (réglages des positions, de l'apparence des éléments,...), pas besoin d'enregistrer, fermer, ouvrir à chaque essai.
Bon, si on l'a pas déjà, ça fait une extension rien que pour ça, ...c'est un choix.


Bon voilà, y a plus qu'à.
..........................................................................

►pour la solution 1:
Attention là faut suivre, c'est parti, voilà la bête:

@-moz-document domain("commentcamarche.net") 
{

#forumlist_ctn
{ display: block !important; }

}

épice et tout \o/


On peut aussi ajouter quelques options, comme le bouton "haut de page" dont je parlais dans l'autre topic, et aussi supprimer qq trucs si on s'en sert pas pour gagner de la place.
Le bouton est positionné pour un réglage de zoom à 100% et encore ça dépend de votre config, mais on est libre de le mettre où on veut - surtout si comme moi on zoom gros, bibi l'est à 1 mètre de la lampe à bronzer- ,et comme on veut (vertical, horizontal, lui laisser l'apparence d'origine, changer sa couleur, sa taille,...)
Pour les éléments supprimés, s'ils sont placés entre des /*...*/ ils ne seront pas cachés, comme ici l'exemple du "Forum des marques" avec /*.forumsLGList*/

Tout ce qui est placé entre les /*...*/ n'est pas pris en compte par FF, vous pouvez y noter la liste de vos courses, il ne les fera pas :) ,et donc on peut y inscrire des commentaires pour mieux s'y retrouver.

Le code devient par exemple:

@-moz-document domain("commentcamarche.net") 
{


/*====== Afficher liste des forums ======*/

#forumlist_ctn
{ display: block !important; }


/*** supprimer ***/
 /*=> Forum des marques (si non connecté) */
/*.forumsLGList,*/
 /*=> onglet "Liste des Forums" */
#forumlist_tab,   
 /*=> barre de Recherche*/
.newSearch2[action="/forum/search"],
 /*=> Nbre de résultat sur... */
.pad10-15

{ display: none !important; }



/*** bouton "Haut de page" ***/
#bottom_anchor
{ 
  -moz-appearance: scrollbarbutton-up !important;
  position: fixed !important;
  top: 550px !important;
  left: 190px !important;
  padding-top: 60px !important;
  overflow: hidden !important; 
}


}

►pour la solution 2:
Même remarque pour le bouton, le choix est libre; ici j'ai pris l'exemple pour qui comme moi zoom gros et a moins de place à gauche, donc j'ai choisi de l'orienter à la verticale, mais si vous préférez l'horizontale il suffit de supprimer (ou de cacher par des /*...*/) la ligne -moz-transform: rotate(-90deg) !important;
Pour un zoom à 100% sur mon poste ça donne ceci.
Ici je l'ai collé au bord, ça permet d'éviter son repositionnement jusqu'à un certain niveau de zoom.

Si vous déplacez le bouton, il faut veiller aussi à la position du panneau qui doit être rattaché à celui-ci.
Pour ce faire, il suffit de changer les valeurs "top" et "left" de chacun.

Pour les info-bulles, y a rien d'obligé; perso je les ai déplacé (on peut aussi les supprimer) pcq en cas de mouvement rapide du curseur, s'il passe sur un lien qui n'est pas le choix final, il fait apparaitre la bulle et s'il la survole ça a pour effet de couper l'affichage du panneau.
[j'en profite => Pour les "experts": c'est ptêt pcq le bouton n'est qu'un élément "virtuel", mais j'ai remarqué qu'il n'y a que le "hover" qui agit, ça veut rien savoir en "focus"...??? même en pleurant :) (perso ça me dérange pas, mais y aurait ptêt pas ce problème)]

J'ai aussi choisi de supprimer la barre de recherche dans le panneau, pcq ça créé un ptit saut d'image quand le panneau s'affiche (elle y figure normalement que dans les pages "discussion").

Bon allez hop:

@-moz-document domain("commentcamarche.net") 
{


/*===== Afficher liste des forums =====*/


/*** intégrer le panneau, mais le cacher ***/
#forumlist_ctn
{ 
 display: block !important;
 overflow: hidden !important;
 height: 0 !important;
 width:  0 !important; 
 z-index: 15 !important;
 margin-top: -3px !important;
}


/*** création Bouton ***/
#forumlist_ctn:before
{ 
 position: fixed !important;
 top: 190px !important;
 left: -55px !important;
 width: 150px !important;
 height: 30px !important;
 content: "Liste Forums" !important;  
 text-align: center !important;
 padding-top: 10px !important;
 -moz-transform: rotate(-90deg) !important;
 background: -moz-linear-gradient(left, white -5%, rgba(0%,50%,80%,0.7), white 105%) !important;
 border: groove 5px rgb(0%,50%,80%) !important;
 -moz-border-radius: 8px !important;
 z-index: 15 !important;
 cursor: pointer !important;  
}


/*** Affichage liste ***/
#forumlist_ctn:hover
{ 
 overflow: visible !important; 
 height: auto !important;
 width: 650px !important;
 position: fixed !important;
 top: 5px !important; 
 left: 40px !important;
 border: ridge 10px rgb(0%,50%,80%) !important;
 -moz-box-shadow: rgba(0,0,0,0.6) 20px 30px 10px !important;
}


/*** déplacer info-bulle ***/
#ntt
{ position: fixed !important;
top: 0 !important; left: 40px !important; }



/*** supprimer onglet "Liste de forums" ***/
#forumlist_tab
{ display: none !important; }

/*** supprimer Barre Recherche dans panneau ***/
.colMiddle:not(#ctn_0) > .container > .newSearch2[action="/forum/search"]
{ display: none !important; }


}

Voilà, j'espère avoir réussi à être clair.
Je suis pas expert, je fais avec ce que je sais faire.
En principe ça marche pour tous les sites CCM.