EDForum :: Voir le sujet - Personnaliser l'affichage du forum avec Firefox (MÀJ le 10 Mai 2009)

Darathor

Mage-Administrateur
Archangemage

Inscrit le : 28 Oct 2001
Messages : 27741
Points : 21 Concours jeux - 30e place

170

Localisation : Strasbourg
Séries favorites : Last Exile, Gunslinger Girl, Noir, Monster, Buffy/Angel, Stargate, Battlestar Galactica, Rome, Monster...

Posté le : 19 Avr 2009 02:10

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]

Une feuille de style, qu’est-ce que c’est ?
Des feuilles de style personnalisées ?
Comment ajouter une feuille de style ?

II - Personnaliser la liste des forums

A - Masquer certains éléments [GO]

Masquer la ligne de statistiques (nombre de posts...) sur la colonne de droite
Masquer les modos (exemple)
Masquer le texte "Sous-forums:" devant la liste des sous-forums
Masquer les liens "Aller au menu" et "Aller au contenu" en haut du forum
Masquer la liste des affichages en haut du forum

B - Ré-organiser certains éléments [GO]

Aligner la colonne de droite (celle contenant les statistiques et les infos sur le dernier message) à gauche (left), au centre (center) ou à droite (right)
Afficher les sous-forums sous forme de liste (exemple)
Afficher les sous-forums sous forme de liste sur trois colonnes

C - Modifier images de fond et les couleurs [GO]

Insérer une image de son choix en fond de la liste (exemple)
Insérer une image de son choix en fond de la liste avec certaines zones en transparence (exemple)
Insérer une image de son choix en fond sur l'index du forum en affichant clairement la colonne de droite (exemple)
Ajouter une image de fond à la colonne de droite
Changer la couleur des liens des sous-forums (exemple)

III - Personnaliser la liste des topics d'un forum [Go]

Insérer une image de son choix en fond sur la liste (exemple)

IV - Personnaliser la liste des messages d'un topic [Go]

Placer une texture sur les messages
Placer la colonne contenant l'auteur du message à droite plutôt qu'à gauche

| Profil | MP | E-mail | Site web

Dernière édition par Darathor le 10 Mai 2009 09:36; édité 14 fois

Darathor

Mage-Administrateur
Archangemage

Inscrit le : 28 Oct 2001
Messages : 27741
Points : 21 Concours jeux - 30e place

170

Localisation : Strasbourg
Séries favorites : Last Exile, Gunslinger Girl, Noir, Monster, Buffy/Angel, Stargate, Battlestar Galactica, Rome, Monster...

Posté le : 19 Avr 2009 02:11

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) :

Les différents sélecteurs
Les principales propriétés

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.

| Profil | MP | E-mail | Site web

Dernière édition par Darathor le 19 Avr 2009 11:16; édité 3 fois

Darathor

Mage-Administrateur
Archangemage

Inscrit le : 28 Oct 2001
Messages : 27741
Points : 21 Concours jeux - 30e place

170

Localisation : Strasbourg
Séries favorites : Last Exile, Gunslinger Girl, Noir, Monster, Buffy/Angel, Stargate, Battlestar Galactica, Rome, Monster...

Posté le : 19 Avr 2009 02:19

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;
}
}

| Profil | MP | E-mail | Site web

Dernière édition par Darathor le 19 Avr 2009 15:05; édité 5 fois

Darathor

Mage-Administrateur
Archangemage

Inscrit le : 28 Oct 2001
Messages : 27741
Points : 21 Concours jeux - 30e place

170

Localisation : Strasbourg
Séries favorites : Last Exile, Gunslinger Girl, Noir, Monster, Buffy/Angel, Stargate, Battlestar Galactica, Rome, Monster...

Posté le : 19 Avr 2009 02:22

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;
}
}

| Profil | MP | E-mail | Site web

Dernière édition par Darathor le 17 Juin 2009 09:15; édité 7 fois

Darathor

Mage-Administrateur
Archangemage

Inscrit le : 28 Oct 2001
Messages : 27741
Points : 21 Concours jeux - 30e place

170

Localisation : Strasbourg
Séries favorites : Last Exile, Gunslinger Girl, Noir, Monster, Buffy/Angel, Stargate, Battlestar Galactica, Rome, Monster...

Posté le : 19 Avr 2009 02:26

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.

| Profil | MP | E-mail | Site web

Dernière édition par Darathor le 19 Avr 2009 02:33; édité 3 fois

Darathor

Mage-Administrateur
Archangemage

Inscrit le : 28 Oct 2001
Messages : 27741
Points : 21 Concours jeux - 30e place

170

Localisation : Strasbourg
Séries favorites : Last Exile, Gunslinger Girl, Noir, Monster, Buffy/Angel, Stargate, Battlestar Galactica, Rome, Monster...

Posté le : 19 Avr 2009 02:27

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.

| Profil | MP | E-mail | Site web

Darathor

Mage-Administrateur
Archangemage

Inscrit le : 28 Oct 2001
Messages : 27741
Points : 21 Concours jeux - 30e place

170

Localisation : Strasbourg
Séries favorites : Last Exile, Gunslinger Girl, Noir, Monster, Buffy/Angel, Stargate, Battlestar Galactica, Rome, Monster...

Posté le : 19 Avr 2009 02:28

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;
}

}

| Profil | MP | E-mail | Site web

Dernière édition par Darathor le 10 Mai 2009 09:18; édité 5 fois