Se connecter avec
S'enregistrer | Connectez-vous

==> [IDN v2] Editer l'affichage d'IDN (dernier ajout 13/08 14h00) <==

Dernière réponse : dans Discussions générales

Salut à tous,

Ce topic a pour but de rendre IDN un peu plus attrayant par rapport aux remarques que vous faites.
Je ne travaille pas pour IDN, donc je n'ai pas accès à n'importe quoi, je peux déplacer des blocks, cacher des choses, etc, mais en aucun cas, vous redonnez l'ancienne version par exemple, ou ajouter des choses.

Le but au départ était de virer la pub qui prenait 1/4 de la place, et qui fesait bugger le forum.

0) Pré-requis

  • Cette modification n'est possible qu'avec deux navigateurs :
    - Firefox version >= 1.5
    - Flock version 0.7.4.1 (les autres je sais pas)

  • Savoir ou se situe le dossier "chrome" de Firefox (les répertoires par défaut sont) :
    Sous Windows XP/2000 : C:\Documents and Settings\<Pseudo>\Application Data\Mozilla\Firefox\Profiles\<nom-du-profil>\chrome (Attention, Application Data est un fichier caché)
    Sous Windows NT : C:\WINNT\Profiles\<Pseudo>\Application Data\Mozilla\Firefox\Profiles\<nom-du-profil>\chrome
    Sous Windows 98, ME : C:\Windows\Application Data\Mozilla\Firefox\Profiles\<nom-du-profil>\chrome
    Sous Mac OS X : ~/Library/Application Support/Firefox/Profiles/<nom-du-profil>/chrome
    Sous Linux et autres Unix : ~/.mozilla/firefox/Profiles/<nom-du-profil>/chrome

  • Sous Flock, celui-ci se trouve :
    - Sous Windows XP : C:\Documents and Settings\<Pseudo>\Application Data\Flock\Browser\Profiles\<nom-du-profil>\chrome

  • Créer un fichier userContent.css :
    - Allez dans le dossier de votre profil Firefox
    - Créez un fichier nommé userContent.css (attention à ne pas faire un fichier à double extension)

  • Comment insérer un fichier CSS dans un autre :
    1. @import "monFichierCss.css";
    (sans le "1." qui marque le numéro de la ligne avec la balise code)



    1) Supprimer le bandeau de pub à droite au forum, et ainsi agrandir la taille du forum en largeur

    - Téléchargez ce fichier : http://weirdclan.chez.tiscali.fr/IDN/supprimerPub.css et le mettre dans le même dossier que votre userContent.css
    - Insérer le code suivant dans votre fichier userContent.css (sans le "1.") :
    1. @import "supprimerPub.css";



    2) Augmenter la hauteur des topics/sujets et quelques polices

    Voilà ce que donne le forum une fois mon script installé :
    Aperçu de la liste des forums : http://weirdclan.chez.tiscali.fr/IDN/apercu_forums.jpg
    Aperçu de la liste des topics dans un forum : http://weirdclan.chez.tiscali.fr/IDN/apercu_topics.jpg
    Aperçu d'un topic : http://weirdclan.chez.tiscali.fr/IDN/apercu_posts.jpg

    Si vous voulez, vous aussi avoir ceci :
    - Téléchargez ce fichier : http://weirdclan.chez.tiscali.fr/IDN/elargirEspaces.css et le mettre dans le même dossier que votre userContent.css
    - Insérer le code suivant dans votre fichier userContent.css (sans le "1.") :
    1. @import "elargirEspaces.css";



    3) Elargir quelques espaces dans les topics entre deux posts
    Modifications apportées :
    - élargir l'espace entre le message et les bordures
    - élargir l'espace entre le "Pseudo/Citation/Profil" et les bordures
    - élargir l'espace entre la fin d'un post et le post suivant
    - élargir l'espace entre l'information "Profil : IDNaute" et l'avatar, ainsi que l'avatar et le bas du tableau s'il est petit
    - corriger le bug des lists qui s'affichent dans la goutière à gauche

    Aperçu (tout est activé chez moi) : http://weirdclan.chez.tiscali.fr/IDN/apercu_espacements.jpg


    Si vous voulez, vous aussi avoir ceci :
    - Téléchargez ce fichier : http://weirdclan.chez.tiscali.fr/IDN/elargirPosts.css et le mettre dans le même dossier que votre userContent.css
    - Insérer le code suivant dans votre fichier userContent.css (sans le "1.") :
    1. @import "elargirPosts.css";

    Si tout ne vous intéresse pas dans ce fichier CSS, vous pouvez mettre en commentaire certaines parties.



    Nouveauté du 12/08 à 22h06 :
    /!\ Attention : Bug corrigé le 13/08 à 14h ! /!\
    4) Remettre la barre de login comme pour la version 1. (enfin pas exactement)

    Vu qu'il y avait un bug avec ma précédente version, voici une nouvelle version.
    Je vous laisse deux choix :
    - soit vous laissez le formulaire de Recherche mais on le déplace
    - soit vous l'enlevez
    C'est les deux solutions pour corriger ce bug.

    Rien ne parle mieux que des screenshots :
    Aperçu avant : http://weirdclan.chez.tiscali.fr/IDN/login_avant.jpg
    Aperçu avec la barre : http://weirdclan.chez.tiscali.fr/IDN/login_avec_recherche.jpg
    Aperçu sans la barre : http://weirdclan.chez.tiscali.fr/IDN/login_sans_recherche.jpg

    - Choix 1 : Si vous voulez la version avec la barre, téléchargez ce fichier : http://weirdclan.chez.tiscali.fr/IDN/barreLogAvecRech.css
    - Choix 2 : Si vous voulez la version sans la barre, téléchargez ce fichier : http://weirdclan.chez.tiscali.fr/IDN/barreLogAvecRech.css
    Puis,
    - Mettre le fichier dans le dossier chrome de votre profil Firefox (ou Flock)
    - Ajouter cette ligne dans le fichier userContent.css : 
    1. @import "barreLogAvecRech.css";

    OU
    1. @import "barreLogSansRech.css";

    - Redémarrer Firefox
    - Enjoy !


    5) Si vous avez d'autres souhaits / idées, faites les partager, j'essaierai de vous le faire

    On est une communauté, alors si vous avez besoin... Go go go ! (merde ça me donne envie de jouer ça...)



    Hé ! Ca marche pas !
    - redémarre Firefox (quitter complètement l'application et la relancer)
    - vérifier qu'il n'y a pas de double extension au fichier (.css.txt par exemple)


    Quelques explications :

    J'ai pris le temps de détailler chaque opération pour que vous sachiez à quoi ça correspond, si y'a quelque chose que vous voudriez plus petit, plus gros, par rapport à ce que j'ai fait, ça vous permet de le modifier facilement.

    J'ai séparé les différentes opérations en deux fichiers (voire bientôt plus ?) afin que vous puissiez ajouter facilement que ce qui VOUS intéresse, et ce même si vous ne comprenez pas ce que je fais.

    Je suis un flemard moi !

    Ok, t'es un flemard, alors je t'ai préparé le fichier userContent.css avec les deux includes de fichiers, donc faudra juste télécharger ces trois fichiers et les mettre dans le dossier indiqué ci-dessus.
    Si tu ne veux pas d'une fonction, ajoute des commentaires autour de l'import, avec ces balises 
    1. /* @import "le-fichier-que-je-veux-pas-importer.css; */


    Le fichier userContent.css tant désiré : http://weirdclan.chez.tiscali.fr/IDN/userContent.css
    /!\ Nouveauté du 13/08 à 14h00 /!\ : Le fichier a été mis à jour avec le 4).
    Dans ce fichier, j'ai mis la barre avec la recherche. Si vous ne voulez pas de la recherche, inversez les commentaires pour les deux lignes, comme ceci (sans les "1." et "2.") :
    1. /*@import "barreLogAvecRech.css";*/
      

    2. @import "barreLogSansRech.css";


    Edit 10/08 à 23:10 :
    J'ai refait complètement le topic pour que ce soit plus simple d'utilisation pour une personne lambda.

    Edit 11/08 à 00:12 :
    Ajout de la partie 3, et modification du userContent.css pour le prendre en compte

    Edit 12/08 à 22:06 :
    Ajout de la partie 4, et modification du userContent.css pour le prendre en compte

    Edit 13/08 à 14:00 :
    Modification de la partie 4 pour corriger le bug, et modification du userContent.css pour le prendre en compte

    • Autres pages sur : idn editer affichage idn dernier ajout 14h00

    Lassé par la pub ? Créez un compte

    De rien.

    Alors, tu peux le créer avec le bloc-notes, le seul truc c'est que ça doit avoir l'extension .css et pas .css.txt !

    Ce que je conseillerais, c'est que normalement dans ton dossier chrome, tu as un fichier qui s'appele userContent-example.css, tu fais un copier/coller, et tu le renommes en userContent.css.

    Et tu l'édites après.

    cbone a dit :
    c'est cool,mais ça marche pas!
    et j'ai fait a la lettre ce que tu as dit!
    :pfff: 


    Normalement ça doit marcher, si tu as créé le fichier avec le bloc-notes, vérifie que tu n'as pas la double extension .css.txt.

    Et n'oublie pas de redémarrer Firefox.

    Ci-joint une image vue depuis mon pc : http://monniem.e-supinfo.net/idn2.jpg (j'affiche pas l'image, elle est trop grande)

    Ca marche pas ^^

    Voila ce que j'ai dans le fichier :

    1. @-moz-document domain(infos-du-net.com) {
    2. #sidebar {
    3. display: none !important;
    4. }
    5.
    6. #principal {
    7. width: 95% !important;
    8. margin-left: 0px !important;
    9. }
    10. }

    Angeldark a dit :
    Ca marche pas ^^

    Voila ce que j'ai dans le fichier :

    1. @-moz-document domain(infos-du-net.com) {
    2. #sidebar {
    3. display: none !important;
    4. }
    5.
    6. #principal {
    7. width: 95% !important;
    8. margin-left: 0px !important;
    9. }
    10. }



    D'accord... je vois !

    En fait, c'est parce qu'il ne faut pas mettre les chiffres de numérotation de ligne, ils apparaissent avec la balise [code*][/code*]
    Je vais éditer mon premier post...

    chez moi non plus ça marche pas!
    et ya pas de .txt,j'ai fait vraiment ce que tu as dit,j'ai copié le code dans le fichier que tu a dit,j'ai enregistrer,j'ai redémarer plusieurs fois FF,et toujours cette pub!

    Pour les flemmards, il y a maintenant la version à télécharger dans le premier post.

    Edit: il y a la possibilité de faire n'importe quoi quasiment.
    Si vous voulez quelque chose de spécial et que ça vaut le coup, demandez-moi, je verrai ce que je peux faire pour vous.

    scoff a dit :
    AHHHHHHHHHHHHHHH !!!
    Super ton astuce... ;) 
    Merci....
    C'est quand même plus clair comme ça...


    Je viens de remarquer un truc, qui m'a travaillé cette nuit ! (si si...)
    Pour se connecter au forum, et plus principalement au site, on est obligé de se connecter avec la barre de droite, donc il vaut mieux utiliser le @-moz-document url-prefix(http://www.infos-du-net.com/forum) et non pas la première solution que j'ai donné, sinon vous n'aurez plus le champ pour vous connecter.

    Voilà voilà.

    Si vous voulez d'autres modifications au site, demandez-moi, et dans la limite du raisonnable, je verrai ce que je peux faire pour vous ! ;-)

    Juste pour signaler que j'avais éditer mon premier post.
    J'ai directement mis le url-prefix au lieu du domain, qui permet de pouvoir se connecter au forum.

    Le fichier à télécharger a lui aussi été modifié.

    polytv a dit :
    ce que tu pourais faire j'ai une idée remetre l'ancien disign


    Hmm... je ne peux pas faire ça non, étant donné que tout a été modifié entièrement. Je ne peux pas ajouter de rubrique, etc... Je peux déplacer des rubriques, masquer certaines, mais pas en créer !
    Mais si vous voulez par exemple, des cases plus grandes, plus espacées, etc... ça je peux faire !

    allstar27 a dit :
    C'est cool mais j'ai firefox 1.8 et j'ai pas application data!!


    Firefox 1.8 n'existe pas.
    La dernière version (stable) est 1.5.0.6.

    Et le dossier Application Data n'a rien à voir avec Firefox.
    Ce dossier est un dossier caché par défaut sous windows.

    Pour l'afficher :
    Outils -> Options des dossiers -> onglet Affichage :
    coche : "Afficher les fichiers / dossiers cachés"


    Topic modifié aujourd'hui à 22h25 afin d'ajouter le redimenssionnement des lignes du tableau et de quelques polices qui sont trop petites.

    Si vous avez des questions / remarques / souhaits, allez-y, pendant que je suis encore chaud !

    Alors là OmaR, je suis bluffé. C'est vraiment super !!!

    Citation :
    - Edit : Il semblerait que ça marche aussi avec Flock


    Ça marche même très bien. Pour ceux qui veulent, le chemin c'est C:\Documents and Settings\ton-pseudo\Application Data\Flock\Browser\Profiles\nom-profil\chrome.

    Et voilà ! Encore merci OmaR.

    Je viens de refaire entièrement le topic, afin de séparer les parties, j'ai mis un peu de couleurs, tout ça tout ça, histoire que ce soit plus conviviale...

    Maintenant, je vais faire un fichier par requête, et ainsi, la personne aura juste à faire un import du fichier voulu, afin que chacun puisse personnaliser comme il le souhaite !


    Yama310 a dit :
    Alors là OmaR, je suis bluffé. C'est vraiment super !!!
    Citation :
    - Edit : Il semblerait que ça marche aussi avec Flock

    Ça marche même très bien. Pour ceux qui veulent, le chemin c'est C:\Documents and Settings\ton-pseudo\Application Data\Flock\Browser\Profiles\nom-profil\chrome.

    Et voilà ! Encore merci OmaR.


    Ok, merci pour ces précisions sur Flock, je l'ai mis dans mon premier sujet !
    Et de rien :) 

    Dams a dit :
    Jusque là rien à redire, j'aime bien le forum avec tes modifs :) 

    :bounce: 
    canardwc_strikes_back a dit :
    yep omar, je voulais savoir si tu pouvais indiquer les valeurs des tailles de chaque police, etc... par defaut (ou si y a un moyen de le trouver tout seul)... merci

    EDIT : laisse tomber omar, j'ai modif a ma guise, j'ai juste modif les marges, ca pete...
    pour moi t'es un dieu :ouimaitre:  (le smiley qui dechire), merci bcp !


    Si tu veux des informations pour savoir quel taille utilise ça et ça, quel paramètre changer pour avoir telle ou telle chose, vas y demande ;) 


    :D  Merci à tous pour vos encouragements et remerciements ! Ca fait chaud au coeur ! :whistle: 

    yep, double post, y a t il moyen d'agrandir les marges dans les posts eux memes ?

    par exemple si on prend cette ligne de code :

    .catCase1bis {
    height: 45px !important; /* pour agrandir la taille de la liste de forums "Hardware" etc.... */
    }

    je suppose que pour modif la marge dans les posts, il suffit de remplacer .catcasebis1 par un autre mot-clé (que je n'ai point)... et de modif la valeur si on veut plus ou moins grand.

    edit : finalement pas double post -__-

    canardwc_strikes_back a dit :
    y a t il moyen d'agrandir les marges dans les posts eux memes ?

    par exemple si on prend cette ligne de code :

    .catCase1bis {
    height: 45px !important; /* pour agrandir la taille de la liste de forums "Hardware" etc.... */
    }

    je suppose que pour modif la marge dans les posts, il suffit de remplacer .catcasebis1 par un autre mot-clé (que je n'ai point)... et de modif la valeur si on veut plus ou moins grand.


    Qu'est ce que tu appeles la marge ?
    L'espace entre deux posts en hauteur ?
    Si oui, j'avais essayé toute à l'heure, je n'avais pas réussi. Je vais continuer les recherches.


    Edit : Ah, je pense avoir compris.
    Tu parles dans un topic, avoir un plus grand espace entre les deux réponses ?
    Je te fais ça, attend quelques secondes !

    Dams a dit :
    Ouai :) 

    Si tout est décalé (signature, boutons du haut + message), c'est pas génant ;) 


    L'aperçu que je t'ai montré, ça a pas été modifié avec un logiciel de dessin, c'est ce que j'avais fait directement, donc nan ça va pas décaler la signature et tout... ;) 

    Citation :
    td.messCass2 p {
    margin-left: 10px !important; /* espace avec la gauche */
    margin-right: 10px !important; /* espace avec la droite*/
    margin-top: 10px !important; /* espace avec le haut */
    margin-bottom: 10px !important; /* espace avec le bas */
    }

    Dams a dit :
    Ne semble pas fonctionner chez moi :( 


    Je me suis trompé, c'est messCase2 et pas messCass2

    Voici le bon :

    Citation :
    td.messCase2 p {
    margin-left: 10px !important; /* espace avec la gauche */
    margin-right: 10px !important; /* espace avec la droite*/
    margin-top: 10px !important; /* espace avec le haut */
    margin-bottom: 10px !important; /* espace avec le bas */
    }


    Je vous prépare l'espacement entre deux posts en hauteur attendez un peu
    Lassé par la pub ? Créez un compte

    Créer un nouveau sujet

    Tom's guide dans le monde