Affichage :
EDForum Index du Forum

EDForum

Forum généraliste spécialisé dans les séries TV
Personnaliser l'affichage du forum avec Firefox (MÀJ le 10 Mai 2009)

Poster un nouveau sujet Ce sujet est verrouillé, vous ne pouvez pas éditer les messages ou faire de réponses.

Rechercher dans ce sujet :
Messages
Darathor Sexe : Masculin
Mage-Administrateur
Archangemage
Mage-Administrateur
Archangemage

Inscrit le : 28 Oct 2001
Messages : 27703
Points : 21 Concours jeux - 30e place 170 Concours graphiques - 8e place
Localisation : Strasbourg
Séries favorites : Last Exile, Gunslinger Girl, Noir, Monster, Buffy/Angel, Stargate, Battlestar Galactica, Rome, Monster...
MessagePosté le : 19 Avr 2009 02:10
Masquer ce messageAfficher ce message
Répondre en citantAjouter à liste des messages à citerRetirer de la liste des messages à citer
Sommaire

Ce sujet est un récapitulatif des modifications proposées dans celui-ci. Pour toute question ou suggestion ou pour proposer vos propres modifications, c'est là bas que ça se passe ;)

I - Les bases : Stylish ? Feuille de style ? [GO]
  1. Une feuille de style, qu’est-ce que c’est ?
  2. Des feuilles de style personnalisées ?
  3. Comment ajouter une feuille de style ?


II - Personnaliser la liste des forums

A - Masquer certains éléments [GO]
  1. Masquer la ligne de statistiques (nombre de posts...) sur la colonne de droite
  2. Masquer les modos (exemple)
  3. Masquer le texte "Sous-forums:" devant la liste des sous-forums
  4. Masquer les liens "Aller au menu" et "Aller au contenu" en haut du forum
  5. Masquer la liste des affichages en haut du forum


B - Ré-organiser certains éléments [GO]
  1. Aligner la colonne de droite (celle contenant les statistiques et les infos sur le dernier message) à gauche (left), au centre (center) ou à droite (right)
  2. Afficher les sous-forums sous forme de liste (exemple)
  3. Afficher les sous-forums sous forme de liste sur trois colonnes


C - Modifier images de fond et les couleurs [GO]
  1. Insérer une image de son choix en fond de la liste (exemple)
  2. Insérer une image de son choix en fond de la liste avec certaines zones en transparence (exemple)
  3. Insérer une image de son choix en fond sur l'index du forum en affichant clairement la colonne de droite (exemple)
  4. Ajouter une image de fond à la colonne de droite
  5. Changer la couleur des liens des sous-forums (exemple)


III - Personnaliser la liste des topics d'un forum [Go]
  1. Insérer une image de son choix en fond sur la liste (exemple)


IV - Personnaliser la liste des messages d'un topic [Go]
  1. Placer une texture sur les messages
  2. Placer la colonne contenant l'auteur du message à droite plutôt qu'à gauche

Revenir en haut Aller en bas
Hors ligne | Profil | MP | E-mail | Site web
Dernière édition par Darathor le 10 Mai 2009 09:36; édité 14 fois
Darathor Sexe : Masculin
Mage-Administrateur
Archangemage
Mage-Administrateur
Archangemage

Inscrit le : 28 Oct 2001
Messages : 27703
Points : 21 Concours jeux - 30e place 170 Concours graphiques - 8e place
Localisation : Strasbourg
Séries favorites : Last Exile, Gunslinger Girl, Noir, Monster, Buffy/Angel, Stargate, Battlestar Galactica, Rome, Monster...
MessagePosté le : 19 Avr 2009 02:11
Masquer ce messageAfficher ce message
Répondre en citantAjouter à liste des messages à citerRetirer de la liste des messages à citer
I - Les bases : Stylish ? Feuille de style ?
Cette partie est une reprise de ce que j'ai déjà expliqué ici.

1 - Une feuille de style, qu’est-ce que c’est ?
Pour ceux qui ne s’y connaitraient pas trop en développement web, la feuille de style est un fichier qui permet de définir l’apparence d’une page web. Idéalement, lorsqu’on développe un site, la sémantique du contenu est indiquée par le code HTML qui le met en page (par exemple telle ligne est un titre, telle autre est une définition, etc) et on le décore ensuite via une feuille de style. Le langage utilisé pour écrire ces feuilles de style est CSS.

Quelques références concernant le CSS2 (CSS2 est la version couramment implémentée dans Firefox jusqu'à sa version 3. Dans les versions ultérieurs, de nouveaux sélecteurs et propriétés s'ajoutent mais ceux-ci resteront valides) :


2 - Des feuilles de style personnalisées ?
C’est là que Firefox intervient ! En effet, ce génial navigateur a une fonctionnalité qui bien que peu connue du grand public ouvre d’énormes possibilités : il permet à l’utilisateur averti de définir des feuilles de styles personnelles appliquées soit à tous les sites qu’il affiche, soit à un site, groupe de sites ou même une page en particulier (plus d’explications ici ).

De base c’est masqué et pas facile d’accès mais l’extension Stylish permet de les définir très facilement. On peut ainsi modifier soi-même l’affichage des sites que l’on visite (bien entendu, cette modification ne vaut que pour votre navigateur à vous et n’est visible par personne d’autre).

On peut par exemple réorganiser les éléments en occupant l’espace inutilisé par un design prévu pour une résolution plus base, remplacer certaines couleurs insupportables, supprimer certains blocs d’affichage, etc.


3 - Comment ajouter une feuille de style ?
a. Installez Stylish et relancez Firefox.
b. Lancez l’outil de gestion des feuilles de style :

c. Cliquez sur le bouton “Écrire” :

d. Indiquez d’abord un titre (1) qui vous servira uniquement à reconnaitre cette feuille quand vous en aurez ajouté plein d’autres. Puis copiez/collez le code CSS que vous voulez appliquer dans le cadre texte (2) et enfin cliquez sur “Enregistrer” (3).

e. C’est prêt. Il peut cependant s’avérer necessaire de rafraichir la page pour que les modifications apparaissent.

Revenir en haut Aller en bas
Hors ligne | Profil | MP | E-mail | Site web
Dernière édition par Darathor le 19 Avr 2009 11:16; édité 3 fois
Darathor Sexe : Masculin
Mage-Administrateur
Archangemage
Mage-Administrateur
Archangemage

Inscrit le : 28 Oct 2001
Messages : 27703
Points : 21 Concours jeux - 30e place 170 Concours graphiques - 8e place
Localisation : Strasbourg
Séries favorites : Last Exile, Gunslinger Girl, Noir, Monster, Buffy/Angel, Stargate, Battlestar Galactica, Rome, Monster...
MessagePosté le : 19 Avr 2009 02:19
Masquer ce messageAfficher ce message
Répondre en citantAjouter à liste des messages à citerRetirer de la liste des messages à citer
II - Personnaliser la liste des forums

A - Masquer certains éléments

1 - Masquer la ligne de statistiques (nombre de posts...) sur la colonne de droite
Code :
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("edforum.net")
{
   .forum-list div.topic-statistics
   {
      display: none;
   }
}


2 - Masquer les modos (exemple)
Code :
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("edforum.net")
{
   .forum-block .left-block em
   {
      display: none;
   }
}


3 - Masquer le texte "Sous-forums:" devant la liste des sous-forums
Code :
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("edforum.net")
{
   .forum-block .sub-forums strong
   {
      display: none !important;
   }
}


4 - Masquer les liens "Aller au menu" et "Aller au contenu" en haut du forum
Code :
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("edforum.net")
{
   #quick-links
        {
              display: none;
        }
}


5 - Masquer la liste des affichages en haut du forum
Code :
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("edforum.net")
{
   #themeSelectionForm
       {
             display: none;
       }
}

Revenir en haut Aller en bas
Hors ligne | Profil | MP | E-mail | Site web
Dernière édition par Darathor le 19 Avr 2009 15:05; édité 5 fois
Darathor Sexe : Masculin
Mage-Administrateur
Archangemage
Mage-Administrateur
Archangemage

Inscrit le : 28 Oct 2001
Messages : 27703
Points : 21 Concours jeux - 30e place 170 Concours graphiques - 8e place
Localisation : Strasbourg
Séries favorites : Last Exile, Gunslinger Girl, Noir, Monster, Buffy/Angel, Stargate, Battlestar Galactica, Rome, Monster...
MessagePosté le : 19 Avr 2009 02:22
Masquer ce messageAfficher ce message
Répondre en citantAjouter à liste des messages à citerRetirer de la liste des messages à citer
II - Personnaliser la liste des forums (suite)

B - Ré-organiser certains éléments

1 - Aligner la colonne de droite (celle contenant les statistiques et les infos sur le dernier message) à gauche (left), au centre (center) ou à droite (right)
Code :
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("version4.edforum.net")
{
   .forum-list div.right-block
   {
      text-align: left;
      min-width: 220px;
   }
}


2 - Afficher les sous-forums sous forme de liste (exemple)
Code :
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("version4.edforum.net")
{
   .forum-block .sub-forums ul li a
   {
      display: block !important;
      text-indent : 10%;
   }
}


EDIT (10 Mai 2009 09:33) :
3 - Afficher les sous-forums sous forme de liste sur trois colonnes
Code :
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("version4.edforum.net")
{
   .forum-block .sub-forums ul li
   {
      display: block !important;
   }

   .forum-block .sub-forums ul
   {
      margin-left: 10px !important;
      display: block !important;
      -moz-column-count: 3 !important;
      -moz-column-width: 150px !important;
      -moz-column-gap: 0 !important;
   }
}
Il est possible de restreindre cet affichage à certaines sections (par exemple ici la section "Séries TV" ayant l'id 15, à remplacer dans "#forum-15" par l'id du forum sur lequel vous souhaitez appliquer cet affichage) :
Code :
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("version4.edforum.net")
{
   #forum-15.forum-block .sub-forums ul li
   {
      display: block !important;
   }

   #forum-15.forum-block .sub-forums ul
   {
      margin-left: 10px !important;
      display: block !important;
      -moz-column-count: 3 !important;
      -moz-column-width: 150px !important;
      -moz-column-gap: 0 !important;
   }
}

Revenir en haut Aller en bas
Hors ligne | Profil | MP | E-mail | Site web
Dernière édition par Darathor le 17 Juin 2009 09:15; édité 7 fois
Darathor Sexe : Masculin
Mage-Administrateur
Archangemage
Mage-Administrateur
Archangemage

Inscrit le : 28 Oct 2001
Messages : 27703
Points : 21 Concours jeux - 30e place 170 Concours graphiques - 8e place
Localisation : Strasbourg
Séries favorites : Last Exile, Gunslinger Girl, Noir, Monster, Buffy/Angel, Stargate, Battlestar Galactica, Rome, Monster...
MessagePosté le : 19 Avr 2009 02:26
Masquer ce messageAfficher ce message
Répondre en citantAjouter à liste des messages à citerRetirer de la liste des messages à citer
II - Personnaliser la liste des forums (suite)

C - Modifier les images de fond et les couleurs

1 - Insérer une image de son choix en fond de la liste (exemple)
Code :
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("edforum.net")
{
   .forum-list
   {
      background-image: url("http://darathor.free.fr/divers/Fond_Forum_ErgoProxy_001.jpg");
      background-position: top center;
   }

   .forum-list .illustrated
   {
      background-image: none !important;
   }
}

Note : Il faut mettre l'URL de votre choix à la suite de "background-image". Vous pouvez également choisir de ne pas centrer l'image, et préférer un alignement à droite ou à gauche. Pour ce faire, remplacer "center" par "right" ou "left".


2 - Insérer une image de son choix en fond de la liste avec certaines zones en transparence (exemple)
Code :
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("edforum.net")
{
   .forum-list
   {
      background-image: url("http://darathor.free.fr/divers/Fond_Forum_ErgoProxy_001.jpg");
      background-position: top center;
   }

   .forum-list h3
   {
      background-color: transparent !important;
      background: left url("http://darathor.free.fr/divers/Cellpic01c.png") !important;
      background-repeat: repeat-y !important;
   }

   .forum-list .illustrated
   {
      background-image: none !important;
      min-width: 300px;
      background: right url("http://darathor.free.fr/divers/Category_right_001-1_transparent.png") !important;
      background-repeat: repeat-y !important;
   }
}


3 - Insérer une image de son choix en fond sur l'index du forum en affichant clairement la colonne de droite (exemple)
Code :
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("edforum.net")
{
   .forum-list
   {
      background-image: url("http://darathor.free.fr/divers/Fond_Forum_ErgoProxy_001.jpg") !important;
      background-position: top center !important;
   }

   .forum-list h3
   {
      background-color: transparent !important;
      background: left url("http://darathor.free.fr/divers/Cellpic01c.png") !important;
      background-repeat: repeat-y !important;
   }

   .forum-list .illustrated
   {
      background-image: none !important;
   }

   .forum-list .left-block
   {
      border-right: 1px solid #000 !important;
      background: transparent url("http://darathor.free.fr/divers/DesignPersoForums/Cellpic_grey_001.png") repeat !important ;
   }

   .forum-list .right-block
   {
      min-width: 300px !important ;
   }

   .forum-list .right-block, .forum-list .bullets-block
   {
      background: transparent url("http://darathor.free.fr/divers/DesignPersoForums/Cellpic_blue_001.png") repeat !important ;
   }
}


4 - Ajouter une image de fond à la colonne de droite
Code :
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("edforum.net")
{
   .forum-list h3
   {
      background-color: transparent !important;
      background: left url("http://darathor.free.fr/divers/Cellpic01c.png") !important;
      background-repeat: repeat-y !important;
   }
}


5 - Changer la couleur des liens des sous-forums (exemple)
Code :
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("edforum.net")
{
   .forum-block .sub-forums ul li a
   {
      color : #D6D6FF !important;
   }
}


Note : Le #D6D6FF est le code héxadécimal de la couleur de votre choix.

Revenir en haut Aller en bas
Hors ligne | Profil | MP | E-mail | Site web
Dernière édition par Darathor le 19 Avr 2009 02:33; édité 3 fois
Darathor Sexe : Masculin
Mage-Administrateur
Archangemage
Mage-Administrateur
Archangemage

Inscrit le : 28 Oct 2001
Messages : 27703
Points : 21 Concours jeux - 30e place 170 Concours graphiques - 8e place
Localisation : Strasbourg
Séries favorites : Last Exile, Gunslinger Girl, Noir, Monster, Buffy/Angel, Stargate, Battlestar Galactica, Rome, Monster...
MessagePosté le : 19 Avr 2009 02:27
Masquer ce messageAfficher ce message
Répondre en citantAjouter à liste des messages à citerRetirer de la liste des messages à citer
III - Personnaliser la liste des topics d'un forum

1 - Insérer une image de son choix en fond sur la liste (exemple)
Code :
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("edforum.net")
{
   .topic-list .main-block
   {
      background: transparent !important;
   }

   .topic-list table
   {
      background-image: url("http://darathor.free.fr/divers/Fond_Forum_ErgoProxy_001.jpg") !important;
      background-position: top center !important;
   }

   .topic-list .bullet-block,
   .topic-list .responses-block,
   .topic-list .views-block
   {
      background: transparent url("http://darathor.free.fr/divers/DesignPersoForums/Cellpic_grey_001.png") repeat !important ;
   }

   .topic-list .main-block,
   .topic-list .author-block,
   .topic-list .last-block
   {
      background: transparent url("http://darathor.free.fr/divers/DesignPersoForums/Cellpic_blue_001.png") repeat !important ;
   }
}


Pour personnaliser selon le forum :

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

@-moz-document domain("edforum.net")
{
   .topic-list#forum_10 table
   {
      background-image: url("http://darathor.free.fr/divers/Fond_Forum_ErgoProxy_001.jpg") !important;
      background-position: top center !important;
   }
}


où le 10 de #forum_10 représente l'id du forum.

Revenir en haut Aller en bas
Hors ligne | Profil | MP | E-mail | Site web
Darathor Sexe : Masculin
Mage-Administrateur
Archangemage
Mage-Administrateur
Archangemage

Inscrit le : 28 Oct 2001
Messages : 27703
Points : 21 Concours jeux - 30e place 170 Concours graphiques - 8e place
Localisation : Strasbourg
Séries favorites : Last Exile, Gunslinger Girl, Noir, Monster, Buffy/Angel, Stargate, Battlestar Galactica, Rome, Monster...
MessagePosté le : 19 Avr 2009 02:28
Masquer ce messageAfficher ce message
Répondre en citantAjouter à liste des messages à citerRetirer de la liste des messages à citer
IV - Personnaliser la liste des messages d'un topic

1 - Placer une texture sur les messages
Code :
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("edforum.net")
{
   .post-body
   {
      background: repeat url("http://darathor.free.fr/divers/DesignPersoForums/CellpicGrande_grise_01.jpg") !important;
   }

   .post-body.row2 > div
   {
      background: transparent repeat url("http://darathor.free.fr/divers/DesignPersoForums/Cellpic_grey_001.png")  !important;
   }

   .post-body.row1 > div
   {
      background: transparent repeat url("http://darathor.free.fr/divers/DesignPersoForums/Cellpic_blue_001.png")  !important;
   }
}


EDIT (03 Mai 2009 19:46) :
2 - Placer la colonne contenant l'auteur du message à droite plutôt qu'à gauche
Code :
@namespace url(http://www.w3.org/1999/xhtml);

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

   .post-left
   {
      float: right !important;
      border-left: #000000 solid 1px !important;
   }

   .post-right
   {
      border-left: none !important;
   }

}

Revenir en haut Aller en bas
Hors ligne | Profil | MP | E-mail | Site web
Dernière édition par Darathor le 10 Mai 2009 09:18; édité 5 fois
Poster un nouveau sujet Ce sujet est verrouillé, vous ne pouvez pas éditer les messages ou faire de réponses.
  Vous ne pouvez pas poster de nouveaux sujets dans ce forum
Vous ne pouvez pas répondre aux sujets dans ce forum
Vous ne pouvez pas éditer vos messages dans ce forum
Vous ne pouvez pas supprimer vos messages dans ce forum
Vous ne pouvez pas voter dans les sondages de ce forum