Customisation affichage mtgverse

[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.

[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

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

[Kaptain]

Oooooohhhhh oui, "prendre toute la largeur de l'écran", j'en avais tellement rêvé !!

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

[Mazz]

C'est mis en post-it.

[arni alo]

Si je fais les modifs de elroy il me reste quelque chose à l'écran ?

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

[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

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

[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.

[Mazz]

Je crois qu'on peut être certain d'une chose, personne n'a volé le pseudo d'elr0y.

[Yoman]

On est pas fou.
Personne ne veut se mettre Skynet à dos.

[Majax]

Spéciale dédicace à Régis Robert!

[MerkLC]

Pourquoi les profil pics sont retournés à droite ?

On en avait parlé pourtant !

[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]

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