Customisation affichage mtgverse

C'est ainsi que commença la déchéance de MF, Requiem et Wizard's Lair
elr0y
Membre
Messages : 589
Inscription : 26 avr. 2021, 02:07

Customisation affichage mtgverse

Message par elr0y »

Il y a des questions recurrentes posees sur l'apparence d'un forum phpBB, et vu que je suis en train de refaire mon style pour le forum, j'en profite pour vous le partager, au cas ou.
LESS [noise] IS MORE [signal]
elr0y
Membre
Messages : 589
Inscription : 26 avr. 2021, 02:07

Customisation affichage mtgverse : installation necessaire

Message par elr0y »

Premiere chose a faire, installer l'extension Stylus pour FIrefox ou Chrome.

Ensuite, allez sur le wiki et faites scrupuleusement ce qu'ils expliquent dans la section Creating a new style.

Ensuite, editez votre style, c'est du simple css mais pour tous les Mr. Grand du forum, vous pouvez copier/coller les sections suivantes (v. les autres messages de ce thread).

J'ai decoupe le code par sections pour que vous puissiez supprimer facilement dans Stylus celles qui ne vous conviennent pas :
  • NON DISRUPTIF (les demandes les plus courantes, garde le meme feeling visuel)
  • SFW (pour un rendu plus discret, donne un aspect serieux avec FLAT DESIGN)
  • FLAT DESIGN (pour avoir un aspect plus moderne)
  • MODE COMPACT (pour pouvoir lire les listes de sujets sans scroller sur un ecran 1080p ou plus, affecte peu un thread en lui-meme)
  • PREFERENCES PERSONNELLES (mes choix persos de couleurs, saturations et d'elements inutiles)
Voici le code a importer dans Stylus :

Code : Tout sélectionner

@-moz-document domain("mtgverse.com") {
/*NON DISRUPTIF
Les demandes les plus courantes, adaptees a tout le monde
*/
/*  largeur 100%*/
.wrap {
    max-width: none !important;
}

/*  profil a gauche*/
.postprofile {
    float: left;
    border-width: 0 1px 0 0;
    margin: 0 5px 0 0;
}

.search .postprofile {
    width: 200px;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    float: none;
    display: table-cell;
    vertical-align: top;
}

.search .postbody {
    float: none;
    width: unset;
    display: table-cell;
    padding: 0 0 0 5px;
}


.online {
    background-position: 152px 0;
}

/*  ignore*/
.ignore,
.post-ignore {
    opacity: 0.1;
    max-height: 1.1em;
    overflow: hidden;
}
}

@-moz-document domain("mtgverse.com") {
/*FLAT DESIGN
On garde le delicieux vert bouteille mais plus d'ombres portees, plus de bords arrondis, plus de degrade et on utilise un fond blanc
*/
/*  fond blanc*/
body,
html {
    background-color: #FFF;
    height: auto !important;
}

.topiclist > .header dd,
.topiclist > .header dt {
    color: #888;
}

/* flat design */
.wrap,
.forumbg,
.forabg,
ul.forums {
    background: none;
    border: none;
    box-shadow: none;
}

.navbar,
.post,
.button,
.button1,
.button2,
.button3,
.inputbox,
.panel,
.dropdown,
.dropdown-contents {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.button,
.button1,
.button2,
.button:hover {
    background: #FFF !important;
}

.tabs .tab > a,
.tabs .tab > a:hover {
    border-radius: 0;
}

.tabs .activetab > a,
.tabs .activetab > a:hover {
    background: none;
    border-color: #ebeff1;
    background-color: #ebeff1;
    border-radius: 0;
}

li.arrow a:hover .icon {
    background: none !important;
}

.jumpbox .dropdown .pointer-inner {
    border-top-color: #FFF;
    border-bottom-color: #FFF;
}

li.row {
    border: none;
}

.forabg .header a {
    color: #68A;
}

.bg1,
li.row:nth-child(2n),
table.zebra-list tr:nth-child(2n) td {
    background: none !important;
}

.bg2,
li.row:nth-child(2n+1),
table.zebra-list tr:nth-child(2n+1) td,
.panel {
    background: #ebeff1 !important;
}
}

@-moz-document domain("mtgverse1.com") {
/*DARK MODE
On garde le delicieux vert bouteille mais plus d'ombres portees, plus de bords arrondis, plus de degrade et on utilise un fond blanc
*/
/*  fond blanc*/
.wrap,
body,
html {
    background-color: #000;
    color: #EEE;
    opacity: 0.9;
    background-image: none;
}

a {
    color: #6db9ff;
}

.copyright,
.topiclist > .header dd,
.topiclist > .header dt,
.content,
.panel-container h2,
h2,
h3,
li,
.postbody,
.postprofile {
    color: #AAA;
    border-color: #222;
}

label,
.panel,
.copyright a,
ul.topiclist li,
li.row strong,
.postprofile strong {
    color: #EEE !important;
}

.panel-container .panel,
.forabg,
.forumbg,
.bg1,
.panel,
li.row:nth-child(2n),
table.zebra-list tr:nth-child(2n) td {
    background: #444;
    background-image: none;
}

.bg2,
li.row:nth-child(2n+1),
table.zebra-list tr:nth-child(2n+1) td,
.navbar {
    background: #000;
}

li.row dd {
    border-color: #222;
}

li.row:hover dd {
    border-color: #CCC;
}

fieldset dl:hover dt label {
    color: #FFF;
}
}

@-moz-document domain("mtgverse.com") {
/*SFW
Pour etre plus discret, les images/video deviennent opaques lorsque le curseur de la souris reste dessus.
Se combine bien avec la section "FLAT DESIGN" pour donner un aspect plus serieux au site
*/
/*logo masque*/
.headerbar {
    display: none;
}

/*images/video transparentes*/
.avatar,
#postingbox img,
.postimage,
[data-s9e-mediaembed="youtube"],
[data-s9e-mediaembed="dailymotion"],
[data-s9e-mediaembed="vimeo"] {
    opacity: 0.03
}

.avatar:hover,
#postingbox img:hover,
.postimage:hover,
[data-s9e-mediaembed="youtube"]:hover,
[data-s9e-mediaembed="dailymotion"]:hover,
[data-s9e-mediaembed="vimeo"]:hover {
    opacity: 1
}
}

@-moz-document domain("mtgverse.com") {
/*MODE COMPACT
Pour pouvoir lire les listes de sujets sans scroller, tout est sur une meme ligne.
Affecte en revanche peu l'affichage d'un thread.
Supprime des colonnes inutiles pour les ecrans pas trop larges.
*/
/*  colonnes inutiles*/
.forabg .topics,
.posts,
.views,
.lastpost br,
.row br {
    display: none !important;
}

/*  gain d'espace*/
dd.lastpost {
    width: auto !important;
    max-width: 400px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

.row-item > dt > div:before {
    display: inline-block;
    width: 2px;
    content: "";
}

.row-item > dt {
    background-size: 12px 12px !important;
    background-position: top left !important;
}

.list-inner span,
.back2top,
.page-footer {
    display: none !important;
}

.row {
    max-height: 2.3em;
    overflow: hidden !important;
}

.left-box {
    float: none;
}

.left-box,
.row .pagination {
    display: inline-block !important;
    margin: 0
}

.post {
    padding: 5px;
    margin: 0;
}

.content {
    min-height: 0;
}

body,
ul.topiclist li.row dl {
    padding: 0;
    margin: 0;
}

wrap {
    margin: 0;
    padding: 1em;
}

dl.row-item {
    background-position: 2px 2px;
    background-position-x: 2px;
    background-position-y: 2px;
    background-repeat: no-repeat;
    background-size: 20px;
}

dl a.row-item-link {
    display: block;
    width: 23px;
    height: 23px;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 0;
    margin-left: 0;
}

dl.row-item dt .list-inner {
    padding-left: 26px;
}

/*  résultats de recherche avancée*/
.search.post {
    max-height: 54px;
    overflow: hidden;
}

/*  footer masque*/
.copyright {
    display: none;
}
}

@-moz-document domain("mtgverse.com") {
/*PREFERENCES VISUELLES PERSONNELLES 
Rendu visuel personnel et donc completement facultatif.
Section "FLAT DESIGN" necessaire en sus, sans quoi le resultat sera bizarre.
Couleurs et saturation modifiees, et disparition d'icones inutiles.
*/
.postprofile {
    display: none;
}

.postbody {
    width: 100%;
}

.bg1,
li.row:nth-child(2n),
table.zebra-list tr:nth-child(2n) td {
    background: none !important;
}

.bg2,
li.row:nth-child(2n+1),
table.zebra-list tr:nth-child(2n+1) td,
.panel {
    background: #F4F4F4 !important;
}

li.row {
    border: none;
}

.jumpbox-cat-link,
.navigation .active-subsection a {
    background-color: #F4F4F4;
    color: #444;
}

.jumpbox-sub-link {
    background-color: #FFF;
    color: #888;
}

.jumpbox-cat-link:hover,
.jumpbox-sub-link:hover {
    background-color: #CCC;
    color: #FFF;
}

.row-item {
    background: none !important;
}

dl.row-item dt .list-inner {
    padding-left: 8px;
}

/*confort visuel*/
/*   desaturation*/
a,
.forabg .header a,
.navigation a {
    color: #68A;
}

a:hover,
.button,
.button:hover .icon,
.forabg .header a:hover,
.forumbg .header a:hover {
    color: #E88;
}

.button:hover {
    border-color: #E88 !important;
    color: #E88 !important;
}

li.arrow a:hover {
    background-color: #E88 !important;
}

li.arrow a:hover .icon {
    background: none !important;
}

.username-coloured,
.mention {
    opacity: 0.4;
}

h2,
h3,
.first-unread,
div.pagination > ul > li > a.button {
    color: #888;
}

.pagination li.active span {
    background: #888;
    border-color: #888
}

/*   icones inutiles*/
.unread > i {
    display: none;
}

.forumbg .unread {
    background-color: #FBB;
    height: 1em;
    width: 1em;
    border-radius: 0.5em;
    display: inline-block !important;
}

.pagination > span:nth-child(1) {
    display: none;
}

h3 img {
    display: none;
}

/* onglets*/
.tabs .tab > a,
.tabs .tab > a:hover {
    border-color: #CCC;
    background-color: #CCC;
}

.tabs .activetab > a,
.tabs .activetab > a:hover {
    border-color: #F4F4F4;
    background-color: #F4F4F4;
}

.tabs .tab > a:hover,
.navigation .active-subsection a:hover,
.navigation a:hover {
    color: #E88;
}

.navigation a {
    background: none;
}

.navigation a:hover {
    background: #CCC;
}


.navigation .active-subsection a {
    background: #FFF;
}
}


Edit 20220119 : prise en compte des icones en debut de sujet
Dernière modification par elr0y le 19 janv. 2022, 13:48, modifié 4 fois.
LESS [noise] IS MORE [signal]
elr0y
Membre
Messages : 589
Inscription : 26 avr. 2021, 02:07

Customisation affichage mtgverse : NON DISRUPTIF

Message par elr0y »

Ce sont les modifications demandees le plus frequemment, qui ne changent pas le feeling du forum et adaptees a tout le monde.

Screenshots
mtgverse-non-disruptif-home.png
mtgverse-non-disruptif-sujet.png
mtgverse-non-disruptif-sujets-actifs.png


Code

Code : Tout sélectionner

/*NON DISRUPTIF
Les demandes les plus courantes, adaptees a tout le monde
*/

/*  largeur 100%*/
.wrap {
    max-width: none !important;
}

/*  profil a gauche*/
.postprofile {
    float: left;
    border-width: 0 1px 0 0;
    margin: 0 5px 0 0;
}

.online {
    background-position: 152px 0;
}

/*  ignore*/
.ignore,
.post-ignore {
    opacity: 0.1;
    max-height: 1.1em;
    overflow: hidden;
}
Dernière modification par elr0y le 28 avr. 2021, 13:18, modifié 3 fois.
LESS [noise] IS MORE [signal]
Avatar de l’utilisateur
Kaptain
Membré
Messages : 5199
Inscription : 26 avr. 2021, 07:17

Re: Customisation affichage mtgverse

Message par Kaptain »

Oooooohhhhh oui, "prendre toute la largeur de l'écran", j'en avais tellement rêvé !! :love: :love:
elr0y
Membre
Messages : 589
Inscription : 26 avr. 2021, 02:07

Customisation affichage mtgverse : SFW

Message par elr0y »

Pour etre plus discret, les images et videos sont (tres) transparentes et redeviennent opaques quand le curseur de la souris reste dessus.
La banniere est retiree aussi.
En combinaison avec "FLAT DESIGN", le site pourrait passer pour tres serieux.
Pour plus de discretion, desactivez carrement les avatars, signatures et emoticones en images dans les preferences du forum lui-meme.

Screenshots
mtgverse-sfw-home.png
mtgverse-sfw-sujet.png


Code

Code : Tout sélectionner

/*SFW
Pour etre plus discret, les images/video deviennent opaques lorsque le curseur de la souris reste dessus.
Se combine bien avec la section "FLAT DESIGN" pour donner un aspect plus serieux au site
*/

/*logo masque*/
.headerbar {
    display: none;
}

/*images/video transparentes*/
.avatar,
#postingbox img,
.postimage,
[data-s9e-mediaembed="youtube"],
[data-s9e-mediaembed="dailymotion"],
[data-s9e-mediaembed="vimeo"] {
    opacity: 0.03
}

.avatar:hover,
#postingbox img:hover,
.postimage:hover,
[data-s9e-mediaembed="youtube"]:hover,
[data-s9e-mediaembed="dailymotion"]:hover,
[data-s9e-mediaembed="vimeo"]:hover {
    opacity: 1
}
Dernière modification par elr0y le 28 avr. 2021, 13:37, modifié 8 fois.
LESS [noise] IS MORE [signal]
Avatar de l’utilisateur
Mazz
Alpha
Messages : 3124
Inscription : 22 avr. 2021, 16:51

Re: Customisation affichage mtgverse

Message par Mazz »

C'est mis en post-it.
Laissez les bons temps rouler
Avatar de l’utilisateur
arni alo
Prophète
Messages : 1575
Inscription : 26 avr. 2021, 08:32

Re: Customisation affichage mtgverse

Message par arni alo »

Si je fais les modifs de elroy il me reste quelque chose à l'écran ? :)
elr0y
Membre
Messages : 589
Inscription : 26 avr. 2021, 02:07

Customisation affichage mtgverse : FLAT DESIGN

Message par elr0y »

On garde le delicieux vert bouteille mais plus d'ombres portees, plus de bords arrondis, plus de degrades et on utilise un fond blanc.
On a (presque) l'impression d'etre sortis des annees 2000 comme ca.

Screenshots
mtgverse-flat-design-home.png
mtgverse-flat-design-sujet.png


Screenshot avec SFW
mtgverse-flat-design-sfw-sujet.png


Code

Code : Tout sélectionner

/*FLAT DESIGN
On garde le delicieux vert bouteille mais plus d'ombres portees, plus de bords arrondis, plus de degrade et on utilise un fond blanc
*/

/*  fond blanc*/
body,
html {
    background-color: #FFF;
    height: auto !important;
}

.topiclist > .header dd,
.topiclist > .header dt {
    color: #888;
}

/* flat design */
.wrap,
.forumbg,
.forabg,
ul.forums {
    background: none;
    border: none;
    box-shadow: none;
}

.navbar,
.post,
.button,
.button1,
.button2,
.button3,
.inputbox,
.panel,
.dropdown,
.dropdown-contents {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.button,
.button1,
.button2,
.button:hover {
    background: #FFF !important;
}

.tabs .tab > a,
.tabs .tab > a:hover {
    border-radius: 0;
}

.tabs .activetab > a,
.tabs .activetab > a:hover {
    background: none;
    border-color: #ebeff1;
    background-color: #ebeff1;
    border-radius: 0;
}

li.arrow a:hover .icon {
    background: none !important;
}

.jumpbox .dropdown .pointer-inner {
    border-top-color: #FFF;
    border-bottom-color: #FFF;
}

li.row {
    border: none;
}

.forabg .header a {
    color: #68A;
}

.bg1,
li.row:nth-child(2n),
table.zebra-list tr:nth-child(2n) td {
    background: none !important;
}

.bg2,
li.row:nth-child(2n+1),
table.zebra-list tr:nth-child(2n+1) td,
.panel {
   background: #ebeff1 !important;
}
Dernière modification par elr0y le 28 avr. 2021, 13:36, modifié 2 fois.
elr0y
Membre
Messages : 589
Inscription : 26 avr. 2021, 02:07

Customisation affichage mtgverse : MODE COMPACT

Message par elr0y »

Pour pouvoir lire les listes de sujets sans scroller, tout est sur une meme ligne.
Affecte en revanche peu l'affichage d'un thread.
Supprime des colonnes inutiles pour les ecrans pas trop larges.

Screenshots
mtgverse-mode-compact-home.png
mtgverse-mode-compact-sujets-actifs.png
mtgverse-mode-compact-sujet.png


Code

Code : Tout sélectionner

/*MODE COMPACT
Pour pouvoir lire les listes de sujets sans scroller, tout est sur une meme ligne.
Affecte en revanche peu l'affichage d'un thread.
Supprime des colonnes inutiles pour les ecrans pas trop larges.
*/

/*  colonnes inutiles*/
.forabg .topics,
.posts,
.views,
.lastpost br,
.row br {
    display: none !important;
}

/*  gain d'espace*/
dd.lastpost {
    width: auto !important;
    max-width: 400px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

.row-item > dt > div:before {
    display: inline-block;
    width: 2px;
    content: "";
}

.row-item > dt {
    background-size: 12px 12px !important;
    background-position: top left !important;
}

.list-inner span,
.back2top,
.page-footer {
    display: none !important;
}

.row {
    max-height: 2.3em;
    overflow: hidden !important;
}

.left-box {
    float: none;
}

.left-box,
.row .pagination {
    display: inline-block !important;
    margin: 0
}

.post {
    padding: 5px;
    margin: 0;
}

.content {
    min-height: 0;
}

body,
ul.topiclist li.row dl {
    padding: 0;
    margin: 0;
}

wrap {
    margin: 0;
    padding: 1em;
}

dl.row-item {
    background-position: 2px 2px;
        background-position-x: 2px;
        background-position-y: 2px;
    background-repeat: no-repeat;
    background-size: 20px;
}

dl a.row-item-link {
    display: block;
    width: 23px;
    height: 23px;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 0;
    margin-left: 0;
}

dl.row-item dt .list-inner {
    padding-left: 26px;
}

/*  résultats de recherche avancée*/
.search.post {
    max-height: 54px;
    overflow: hidden;
}

/*  footer masque*/
.copyright {
    display: none;
}


Edit 20220119 : prise en compte des icones en debut de sujet
Dernière modification par elr0y le 19 janv. 2022, 13:46, modifié 2 fois.
elr0y
Membre
Messages : 589
Inscription : 26 avr. 2021, 02:07

Customisation affichage mtgverse : PREFERENCES PERSONNELLES

Message par elr0y »

Rendu visuel personnel et donc completement facultatif.
Section "FLAT DESIGN" necessaire en sus, sans quoi le resultat sera bizarre.
Couleurs et saturation modifiees, et disparition d'icones inutiles.

Screenshots (+ toutes les sections precedentes)
mtgverse-home.png
mtgverse-sujet.png
mtgverse-sujets-actifs.png


Code

Code : Tout sélectionner

/*PREFERENCES VISUELLES PERSONNELLES 
Rendu visuel personnel et donc completement facultatif.
Section "FLAT DESIGN" necessaire en sus, sans quoi le resultat sera bizarre.
Couleurs et saturation modifiees, et disparition d'icones inutiles.
*/

.postprofile {
    display: none;
}

.postbody {
    width: 100%;
}

.row-item > dt {
    background-image: none !important;
}

.bg1,
li.row:nth-child(2n),
table.zebra-list tr:nth-child(2n) td {
    background: none !important;
}

.bg2,
li.row:nth-child(2n+1),
table.zebra-list tr:nth-child(2n+1) td,
.panel {
    background: #F4F4F4 !important;
}

li.row {
    border: none;
}

.jumpbox-cat-link {
    background-color: #F4F4F4;
    color: #444;
}

.jumpbox-sub-link {
    background-color: #FFF;
    color: #888;
}

.jumpbox-cat-link:hover,
.jumpbox-sub-link:hover {
    background-color: #CCC;
    color: #FFF;
}

.row-item {
    background: none !important;
}

dl.row-item dt .list-inner {
    padding-left: 8px;
}

/*confort visuel*/
/*   desaturation*/
a,
.forabg .header a {
    color: #68A;
}

a:hover,
.button,
.button:hover .icon,
.forabg .header a:hover,
.forumbg .header a:hover {
    color: #E88;
}

.button:hover {
    border-color: #E88 !important;
    color: #E88 !important;
}

li.arrow a:hover {
    background-color: #E88 !important;
}

li.arrow a:hover .icon {
    background: none !important;
}

.username-coloured,
.mention {
    opacity: 0.4;
}

h2,
h3,
.first-unread,
div.pagination > ul > li > a.button {
    color: #888;
}

.pagination li.active span {
    background: #888;
    border-color: #888
}

/*   icones inutiles*/
.unread > i {
    display: none;
}

.forumbg .unread {
    background-color: #FBB;
    height: 1em;
    width: 1em;
    border-radius: 0.5em;
    display: inline-block !important;
}

.pagination > span:nth-child(1) {
    display: none;
}

h3 img {
    display: none;
}

/* onglets*/
.tabs .tab > a,
.tabs .tab > a:hover {
    border-color: #CCC;
    background-color: #CCC;
}

.tabs .activetab > a,
.tabs .activetab > a:hover {
    border-color: #F4F4F4;
    background-color: #F4F4F4;
}

.tabs .tab > a:hover {
 color: #E88;
}
Dernière modification par elr0y le 28 avr. 2021, 14:04, modifié 1 fois.
elr0y
Membre
Messages : 589
Inscription : 26 avr. 2021, 02:07

Re: Customisation affichage mtgverse

Message par elr0y »

Thread reorganise/nettoye pour plus de clarte, et code mis a jour.
Si vous rencontrez des difficultes ou bugs, n'hesitez pas a les signaler.
Avatar de l’utilisateur
Mazz
Alpha
Messages : 3124
Inscription : 22 avr. 2021, 16:51

Re: Customisation affichage mtgverse

Message par Mazz »

Je crois qu'on peut être certain d'une chose, personne n'a volé le pseudo d'elr0y.
Laissez les bons temps rouler
Yoman
Membre
Messages : 303
Inscription : 26 avr. 2021, 09:11

Re: Customisation affichage mtgverse

Message par Yoman »

On est pas fou.
Personne ne veut se mettre Skynet à dos.
Avatar de l’utilisateur
Majax
Lorenzo Lamas
Messages : 4020
Inscription : 26 avr. 2021, 07:29

Re: Customisation affichage mtgverse

Message par Majax »

Spéciale dédicace à Régis Robert!
MerkLC
Membre
Messages : 1011
Inscription : 26 avr. 2021, 12:27

Re: Customisation affichage mtgverse

Message par MerkLC »

Pourquoi les profil pics sont retournés à droite ?

On en avait parlé pourtant !
elr0y
Membre
Messages : 589
Inscription : 26 avr. 2021, 02:07

Re: Customisation affichage mtgverse

Message par elr0y »

Pas certain de saisir ton probleme, j'ai teste en n'activant que https://mtgverse.com/viewtopic.php?p=1980#p1980 et les profils sont bien a gauche.
MerkLC
Membre
Messages : 1011
Inscription : 26 avr. 2021, 12:27

Re: Customisation affichage mtgverse

Message par MerkLC »

On en reparle la semaine prochaine quand j'aurai internet.