Bonjour à tous.
Après avoir suggéré d'ajouter un thème sombre au forum, je me suis dit :
Pourquoi ne pas créer le mien ?
Voici donc ce que j'ai mijoté, et malgré de nombreuses heures de tests, tout n'est pas parfait. 
Je n'ai qu'une connaissance "correcte" des styles CSS3 donc ce thème est loin d'être fini, je dirais même qu'il est encore en version BETA..
Si vous voulez le tester, il vous faudra l'extension Stylus, disponible pour Firefox, Chrome et Opera.
Bien que vous puissiez utiliser l'add-on Stylish (le plus connu), je vous le déconseille. Stylish n'est plus développé et contient un "spyware".
Plus d'infos ici : https://www.ghacks.net/2017/05/16/stylus-is-a-stylish-fork-without-analytics/
Code source de Stylus : https://github.com/openstyles/stylus
Site officiel de Stylus : https://add0n.com/stylus.html
Firefox : https://addons.mozilla.org/fr/firefox/addon/styl-us/
Chrome : https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne
Opera : https://addons.opera.com/fr/extensions/details/stylus/
NOTE :
J'aime assez comment j'ai modifié les commentaires du blog, façon "bulles de BD" (je n'ai rien inventé, ce genre de code CSS se trouve partout sur le net). Je trouve ça quand même joli.
BUGS :
--- Certaines pages du forum ne sont pas encore modifiées (page Qui est en ligne, page Résultats d'une recherche, page Contact, ...)
--- Je n'ai pas encore trouvé comment corriger le style des boutons Ecrire un nouveau sujet ou Répondre. Ils entrent en conflit avec les liens de Articles en relation.
--- Certains liens ou boutons gardent leur style "normal" même quand on les survole (peut-être un problème avec l'état "visited" ?)
--- Les boutons (une fois appuyés) montrent un style "active" qui appartient au thème CSS actuel.
Voilà voilà. Il me reste encore un peu de travail dessus mais en attendant, j'espère qu'il plaira à certains d'entre vous.
Après avoir suggéré d'ajouter un thème sombre au forum, je me suis dit :
Pourquoi ne pas créer le mien ?
Je n'ai qu'une connaissance "correcte" des styles CSS3 donc ce thème est loin d'être fini, je dirais même qu'il est encore en version BETA..
Si vous voulez le tester, il vous faudra l'extension Stylus, disponible pour Firefox, Chrome et Opera.
Bien que vous puissiez utiliser l'add-on Stylish (le plus connu), je vous le déconseille. Stylish n'est plus développé et contient un "spyware".
Plus d'infos ici : https://www.ghacks.net/2017/05/16/stylus-is-a-stylish-fork-without-analytics/
Code source de Stylus : https://github.com/openstyles/stylus
Site officiel de Stylus : https://add0n.com/stylus.html
Firefox : https://addons.mozilla.org/fr/firefox/addon/styl-us/
Chrome : https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne
Opera : https://addons.opera.com/fr/extensions/details/stylus/
NOTE :
J'aime assez comment j'ai modifié les commentaires du blog, façon "bulles de BD" (je n'ai rien inventé, ce genre de code CSS se trouve partout sur le net). Je trouve ça quand même joli.
BUGS :
--- Certaines pages du forum ne sont pas encore modifiées (page Qui est en ligne, page Résultats d'une recherche, page Contact, ...)
--- Je n'ai pas encore trouvé comment corriger le style des boutons Ecrire un nouveau sujet ou Répondre. Ils entrent en conflit avec les liens de Articles en relation.
--- Certains liens ou boutons gardent leur style "normal" même quand on les survole (peut-être un problème avec l'état "visited" ?)
--- Les boutons (une fois appuyés) montrent un style "active" qui appartient au thème CSS actuel.
Voilà voilà. Il me reste encore un peu de travail dessus mais en attendant, j'espère qu'il plaira à certains d'entre vous.
Code : #
/*
Dark Grey CSS Theme for Andlil.com (blog and forum) by Blia
Pour appliquer ce style CSS, vous aurez besoin de l'extention Stylus (n'utilisez pas Stylish)
Pourquoi utiliser Stylus ? Stylish n'est plus développé et contient des "spywares". Stylus est open-source, ne contient pas ce spyware et est toujours dévelopé.
Pour plus d'infos, lisez : https://www.ghacks.net/2017/05/16/stylus-is-a-stylish-fork-without-analytics/
1. Installez l'extension Stylus (Firefox, Chrome, Opera)
2. Cliquez sur "Write style for" www.andlil.com
3. Copiez-collez ce code CSS et appliquez-le à l'URL sur le domaine: andlil.com
PS : Ne faites pas attention aux commentaires "OK", je m'en sers juste pour être sûr qu'une balise est débugguée. J'enlèverai ces "OK" une fois le style est fini.
*/
/* OK */
body {
background: #202225;
color: #97b5aa;
}
/* ---------- Menu général du blog et forum en haut à droite ---------- */
/* Couleur des liens du menu général en bleu */
/* Voulons-nous vraiment ça ? Ca rend les liens assez sombres */
/*
.navbar-default .navbar-nav > li > a {
padding-left: 10px;
padding-right: 10px;
color: #01a1f7;
}
*/
/* Couleur des liens du menu quand on clique dessus */
/* OK */
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
background: #01a1f7;
color: white;
}
/* Menu déroulant */
/* OK */
.dropdown-menu {
background: #484c52;
}
/* OK */
.dropdown-menu li a {
color: white;
}
/* OK */
.dropdown-menu li a:hover {
background: #01a1f7;
color: white;
}
/* Couleur bleue pour le fond des boutons s'ils sont survolés */
/* OK */
.navbar-default .navbar-nav > li > a:hover {
background: #01a1f7;
color: white;
}
/* Ombre de 5px sous le menu */
/* OK */
.navbar, .navbar-default, .navbar-fixed-top {
background: #484c52;
-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.25);
box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.25);
}
/* ---------- Cache la bannière ProRealTime située en haut ---------- */
/* Décommenter pour cacher la bannière */
/* OK */
/* #header-banner { display: none; } */
/* ---------- Le bloc qui englobe tout le forum ---------- */
/* OK */
#page-wrapper {
background: #2f3136;
border: 1px solid #484c52;
}
/* ---------- Blocs DIV à droite ---------- */
/* Sujets Récents sur les Forums & Liens Utiles */
/* OK */
.widget h3.title {
background: #484c52;
border: 1px solid #484c52;
}
/* OK */
.widget .padder {
background: #36393e;
border: 1px solid #484c52;
}
/* OK */
.widget .padder li {
border-color: #484c52;
}
/* ---------- Couleurs des liens ---------- */
/* Il y a un problème général de couleurs de liens hover. Parfois, certains liens deviennent blancs (comportement voulu), mais parfois, ils restent bleus */
/* Cette note ne vaut pas forcément pour les attributs CSS ci-dessous. L'erreur peut être située ailleurs dans ce fichier CSS. */
/* Boutons en mode "normal" (non survolés) */
/* OK */
a:link { color: #01a1f7; font-weight: bold; }
a:hover { color: white; font-weight: bold; }
a:visited { color: #01a1f7; font-weight: bold; }
a:active { color: #01a1f7; font-weight: bold; }
/* ---------- Titre du forum écrit en gros une fois qu'on est dessus */
/* Exemple: "Pourquoi Andlil ?" https://www.andlil.com/forum/pourquoi-andlil-t5697.html */
/* OK */
.area h1 a:hover { color: white; }
/* ---------- Boutons ---------- */
/* Il y a un problème (quelque part) quand on appuie sur les boutons
Le bouton affiché (:active) est alors celui du thème originel) */
/* Fond des boutons en mode "normal" (non survolés) */
/* OK */
.btn-default {
color: #01a1f7;
background-color: #36393e;
border-color: #484c52;
}
/* Fond des boutons en mode "hover" (survolés) */
/* OK */
.btn-default:hover {
color: #fff;
background-color: #01a1f7;
border-color: #40aae6;
}
/* Fond des boutons en mode "visited" */
/* Si j'active ça, le bouton "Messages non lus" bug */
/*
.btn-default:visited {
color: #01a1f7;
background-color: #36393e;
border-color: #484c52;
}
*/
/* Fond des boutons en mode "active" */
/* Pourquoi le bouton affiche t-il le style originel ? */
.btn-default:active {
color: #01a1f7;
background-color: #36393e;
border-color: #484c52;
}
/* ---------- Bouton Répondre & Ecrire un nouveau sujet ---------- */
/* Fond du bouton Répondre & Ecrire un nouveau sujet & Connexion - normal */
/* OK */
.btn-primary {
background: #01a1f7;
border-color: #40aae6;
}
/* Fond du bouton Répondre & Ecrire un nouveau sujet & Connexion - hover */
/* OK */
.btn-primary:hover {
background: #01a1f7;
border-color: #40aae6;
}
/* Couleur (blanc) du lien du bouton Répondre */
/* Cette mauvaise ligne CSS fait bugguer soit le bouton répondre, soit les articles en relation */
/* Si je décommente la ligne suivante, ça crée un bouton Répondre correct (le lien est blanc) mais ça fait bugguer les articles en relation */
/* #page-body .area a:link { color: #fff; } */
/* ---------- Articles en relation ---------- */
/* OK */
.forum-list-item .inside .row a:link { color: #01a1f7; }
.forum-list-item .inside .row a:hover { color: white; text-decoration: underline; }
.forum-list-item .inside .row a:visited { color: #01a1f7; }
.forum-list-item .inside .row a:active { color: #01a1f7; }
/* ---------- Boutons de Pagination ---------- */
/* OK */
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
background-color: #01a1f7;
border-color: #40aae6;
}
/* Boutons de pagination normal */
/* OK */
.pagination > li > a, .pagination > li > span {
position: relative;
float: left;
padding: 6px 12px;
line-height: 1.42857143;
text-decoration: none;
color: #01a1f7;
background-color: #36393e;
border-color: #484c52;
margin-left: -1px;
}
/* Boutons de pagination hover */
/* OK */
.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
z-index: 2;
color: white;
background-color: #01a1f7;
border-color: #40aae6;
}
/* Décale "Page 1 sur 9 & 1 2 3 4 5 6 7 8 9 (par exemple sur https://www.andlil.com/forum/forex.html) */
/* Si activé, fonctionne avec la pagination en haut, mais décale "Index du Forum" & "Ecrire un nouveau sujet" (en bas) */
/* Ce serait plus facile si les DIV, boutons et liens avaient des ID et pas uniquement des classes */
/* Désactivé pour le moment */
/*
#page-body .area .btn-default {
margin-left: 240px;
}
*/
/* Aligne les boutons de pagination 1 2 3 avec le bloc situé sur sa gauche "Page 1 sur 3" */
/* (quand on est sur n'importe quel sujet. Par exemple : https://www.andlil.com/forum/eurusd-et-6e-t17981.html) */
/* OK */
.area ul li {
margin-top: 4px;
}
/* C'est quoi, c'est où ??? (ne pas supprimer sans être sûr) */
.center ul li {
margin-top: 4px;
}
/* TODO: la pagination en bas a le dernier bouton >> qui est décalé vers la droite */
/* Exemple : https://www.andlil.com/forum/methode-de-trading.html */
/* ---------- Couleur de bordure du forum ---------- */
/* Exemple: https://www.andlil.com/forum/ */
/* En fonction de la couleur, ça corrige la bordure sur https://www.andlil.com/forum/ */
/* mais pas sur https://www.andlil.com/forum/nouveaux-messages.html */
.forum-list {
border: 1px solid #484c52;
/* border: 1px solid #2f3136; */
}
/* ---------- Séparation visuelle des catégories avec deux couleurs différentes alternées ---------- */
/* OK */
.forum-list-item:nth-child(2n+1) {
background: rgba(72, 76, 82, 0.4);
border-top: 1px solid #484c52;
}
/* Eclaircit la DIV au survol du curseur */
/* OK */
/*
.forum-list-item:nth-child(2n+1):hover {
background: rgba(120, 154, 204, 0.3);
}
*/
/* OK */
.forum-list-item:nth-child(2n) {
background: rgba(72, 76, 82, 0.6);
border-top: 1px solid #484c52;
}
/* Eclaircit la DIV au survol du curseur */
/* OK */
/*
.forum-list-item:nth-child(2n):hover {
background: rgba(120, 154, 204, 0.3);
}
*/
/* C'est quoi, c'est où ??? (ne pas supprimer sans être sûr) */
/* OK */
.bg1, .bg2 {
background: #36393e;
border: 1px solid #484c52;
}
/* C'est quoi, c'est où ??? (ne pas supprimer sans être sûr) */
/* OK */
.desc {
margin-left: 23px;
}
/* ---------- Titre du forum en petit quand on visionne un sujet ---------- */
/* OK */
.post-header h3 a:link { color: #01a1f7; }
.post-header h3 a:hover { color: white; text-decoration: underline; }
.post-header h3 a:visited { color: #01a1f7; }
.post-header h3 a:active { color: #01a1f7; }
/* Le pseudo de celui qui a crée un sujet */
/* OK */
.post:target h3 a:link { color: #01a1f7; }
.post:target h3 a:hover { color: white; text-decoration: underline; }
.post:target h3 a:visited { color: #01a1f7; }
.post:target h3 a:active { color: #01a1f7; }
/* Couleur du texte du premier message d'un sujet */
/* Exemple : le premier message de https://www.andlil.com/forum/presentation-thealtiste-t20830.html#p828136 */
/* OK */
.post:target .content {
color: #97b5aa;
}
/* Couleur du texte des sujets (appelés "files" sur Andlil) eux-mêmes */
/* OK */
.content {
color: #97b5aa;
}
/* Ceci définit non pas la couleur des pseudos des membres du forum (ces couleurs sont gérées par le code du forum phpbb lui-même) mais la couleur du fond */
/* Avec ce thème gris foncé, certains pseudos sont plus difficiles à lire (les pseudos bleus, entre autres) */
/* Du coup, je n'ai pas d'autre choix que de colorer le fond du nom des membres avec une couleur gris clair */
/* OK */
.last-post-author span:hover {
background: #5f646a;
}
/* OK */
.post-header p span:hover {
background: #5f646a;
}
/* OK */
.username-coloured:hover {
background: #5f646a;
}
/* OK */
.forum-list-item span:hover {
background: #5f646a;
}
/* pseudos en haut à gauche dans un forum */
/* fonctionne avec un simple span (le pseudo a un fond, mais dans ce cas, les 2 petits boutons à droite ont le même fond.. ce qui est génant */
/* quand on le met dans span:hover (c'est ce que je voudrais), il ne se passe rien */
.author span:hover {
background: #5f646a;
}
/* ---------- Fixe la couleur d'arrière-plan pour les boutons Rapporter le message et Répondre en citant le message ---------- */
/* OK */
.post-header p span:hover {
background: #36393e;
}
/* ---------- Ligne de séparation sous l'auteur et la date du message ---------- */
/* OK */
.post-header {
border-bottom: 1px solid #484c52;
}
/* ---------- Bloc Profile ---------- */
/* Rectangle qui regroupe l'avatar, le pseudo, nombre de messages, date d'inscription */
/* OK */
.post .profile {
background: #2f3136;
border: 1px solid #484c52;
color: #97b5aa;
}
/* C'est quoi, c'est où ??? (ne pas supprimer sans être sûr) */
.post-header h3 a {
color: #01a1f7;
}
/* ---------- Voir les messages non lus, Voir les nouveaux messages, Mes Messages... ---------- */
/* OK */
h2, .h2 {
color: #01a1f7;
}
/* ----------Titres des catégories de forums (Bourse et Trading, Economie et Finances, Informatique et High Tech, ...) ---------- */
/* Liens visibles sur https://www.andlil.com/forum (par exemple) */
/* OK */
.forum-title {
color: #01a1f7;
text-decoration: none;
font-style: italic;
}
/* ---------- Titres des catégories de forums (Bourse et Trading, Economie et Finances, Informatique et High Tech, ...) ---------- */
/* Liens visibles sur https://www.andlil.com/forum (par exemple) */
/* OK */
#page-body .forum-title a {
color: #01a1f7;
font-style: normal;
}
/* ---------- Forum "Débuter en Bourse" sur https://www.andlil.com/forum/debuter-en-bourse.html (par exemple) ---------- */
/* OK */
#page-body h2 a {
color: #01a1f7;
}
.panel-default {
border: 1px solid #484c52;
}
.panel {
background: #36393e;
border-radius: 0px;
}
.panel-default > .panel-heading {
color: #fff;
background: #36393e;
border-bottom: 1px solid #484c52;
}
/* ---------- Bloc Qui est en ligne ? ---------- */
/* OK */
.panel-heading h3 a:link {
color: #01a1f7;
text-decoration: none;
}
.panel-heading h3 a:hover {
color: white;
text-decoration: underline;
}
.panel-heading h3 a:visited {
color: #01a1f7;
}
.panel-heading h3 a:active {
color: #01a1f7;
}
/* ---------- Titre du bloc Statistiques tout en bas ---------- */
/* OK */
.panel-heading h3 {
color: #fff;
}
/* Zone où sont affichés tous les membres en ligne ("Qui est en ligne") ainsi que la zone où sont affichées les statistiques */
/* OK */
.panel-body p {
color: #97b5aa;
}
/* ---------- Zones de texte pour répondre à un message ---------- */
/* Titre de la réponse */
/* OK */
input[type="text"], input[type="password"], textarea {
background: #2f3136;
border: 1px solid #484c52;
color: #97b5aa;
}
/* Large zone qui sert à écrire une réponse */
/* OK */
.form-control {
background: #2f3136;
border: 1px solid #484c52;
color: #97b5aa;
}
/* ---------- Editeur complet ---------- */
/* Exemple : https://www.andlil.com/forum/posting.php?mode=reply&f=15&t=20830 */
/* Décale le bloc Sujet vers la gauche */
/* OK */
.col-sm-8 {
width: 64%;
left: 1.5%;
right: 1.5%;
}
/* Décale le Dropdown pour la police vers la gauche */
/* OK */
.col-sm-4 {
width: 33.33333333%;
right: -1.5%;
}
/* Décale les Smileys vers la gauche */
/* OK */
.col-sm-3 {
width: 24%;
right: -1.5%;
}
/* Large zone pour écrire son message */
/* OK */
.col-sm-9 {
width: 73%;
left: 1.5%;
}
/* Décale le mot REPONDRE */
/* OK */
#postingbox h3 {
padding: 15px;
}
/* ---------- Bloc qui entourre les fichiers joints (images) ---------- */
/* OK */
.attachments {
background: #2f3136;
border: 1px solid #484c52;
}
/* ---------- Bloc de citation ---------- */
/* La border-left bug un peu, les autres bordures overlap dessus */
blockquote {
background: #2f3136;
border: 1px solid #484c52;
border-left: 5px solid #01a1f7;
}
/* ----------Ligne séparatrice en bas de https://www.andlil.com/forum/debuter-en-bourse.html (par exemple) ---------- */
/* OK */
hr {
background-color: #484c52;
height: 1px;
border: none;
}
/* ---------- Bas de page ---------- */
/* OK */
#footer {
background: #2f3136;
}
/* Descend un peu les boutons noirs A propos, Contact - Condidentialité - Mentions Légales */
/* OK */
#footer .row {
margin-top: 10px;
}
/* ---------- Page Rechercher ---------- */
/* OK */
.panel h3, .panel h3 a {
color: #97b5aa;
}
/* OK */
fieldset {
color: #97b5aa;
}
/* OK */
fieldset dt label {
color: #97b5aa;
}
/* OK */
fieldset dd label {
color: #97b5aa;
}
/* OK */
span.corners-top span {
background-image: none;
}
/* OK */
span.corners-bottom span {
background-image: none;
}
/* ---------- Bloc Insertion de code ---------- */
/* Cadre */
/* OK */
dl.codebox {
background: #2f3136;
border: 1px solid #484c52;
color: #97b5aa;
}
/* Contenu */
/* OK */
code {
background: #2f3136;
border: 1px solid #484c52;
color: #97b5aa;
}
/* Ligne horizontale sous CODE : TOUT SELECTIONNER */
/* OK */
dl.codebox dt {
border-bottom: 0px;
}
/* Couleur du texte du code */
dl.codebox code {
color: #97b5aa;
}
/* ---------- Résultats d'une recherche ---------- */
/* Par exemple : https://www.andlil.com/forum/search.php?st&sk=t&sd=d&sr=posts&keywords=entreprise&start=10 */
/* ---------- Page Qui est en ligne ? ---------- */
/* https://www.andlil.com/forum/viewonline.php */
/* ---------- Bloc "Inscription à la Newsletter" ---------- */
/* Exemple : https://www.andlil.com/trading/ */
/* OK */
.tnp-widget input[type="text"], .tnp-widget input[type="email"], .tnp-widget input[type="submit"], .tnp-widget select {
background: #2f3136;
border: 1px solid #484c52;
color: #97b5aa;
}
/* Trouver un moyen de changer l'aspect du bouton ENVOYER, comme un bouton normal */
/* ---------- Panneau de l'utilisateur ---------- */
/* https://www.andlil.com/forum/ucp.php */
/* Onglets du panneau de l'utilisateur (onglets Aperçu - Profil - Préférences du forum - Messages privés - Groupes d'utilisateurs - Amis et ignorés) */
/* Ligne horizontale */
/* OK */
.nav-tabs {
border-bottom: 1px solid #484c52;
}
/* Onglet actif */
/* OK */
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
color: #fff;
background: #484c52;
border: 1px solid #484c52;
}
/* Titre du menu du panneau de l'utilisateur (menu à gauche) */
/* OK */
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
z-index: 2;
color: #fff;
background: #484c52;
border: 1px solid #484c52;
}
/* OK */
a.list-group-item, button.list-group-item, a.list-group-item, button.list-group-item {
background: #36393e;
border: 1px solid #484c52;
}
/* OK */
a.list-group-item:hover, button.list-group-item:hover, a.list-group-item:focus, button.list-group-item:focus {
background: #36393e;
border: 1px solid #484c52;
text-decoration: underline;
color: white;
}
/* ---------- Page Contact ---------- */
/* https://www.andlil.com/contact/ */
/* ---------- Block CONNEXION & M'ENREGISTRER ---------- */
/* En bas du forum https://www.andlil.com/forum/ */
/* OK */
.panel-primary .panel-heading {
background: #484c52;
border: 1px solid #484c52;
}
/* OK */
.panel-primary {
background: #36393e;
border: 1px solid #484c52;
}
/* ---------- Page Connexion ---------- */
/* https://www.andlil.com/forum/ucp.php?mode=login */
/* OK */
label {
color: #97b5aa;
}
/* Bloc M’enregistrer (en bas)
/* OK */
.panel-default > .panel-heading {
color: #fff;
background: #484c52;
border: 1px solid #484c52;
}
/* Bloc "Vous avez dépassé le nombre maximummum autorisé de tentatives de connexion" */
/* OK */
.bg-danger {
background: #36393e;
border: 1px solid #484c52;
color: yellow;
}
/* Titre M'ENREGISTRER
/* OK */
.panel h3, .panel h3 a {
color: #fff;
}
/* Pour les liens Conditions d’utilisation | Politique de vie privée */
/* https://www.andlil.com/forum/ucp.php?mode=login */
/* OK */
#login .area a:link { color: #01a1f7; }
#login .area a:hover { color: white; text-decoration: underline; }
#login .area a:visited { color: #01a1f7; }
#login .area a:active { color: #01a1f7; }
/* ---------- Supprimer les cookies du forum ---------- */
/* https://www.andlil.com/forum/ucp.php?mode=delete_cookies */
/* OK */
.panel {
background: #36393e;
border: 1px solid #484c52;
color: #97b5aa;
}
/* OK */
.content h2, .panel h2 {
background: #484c52;
border: 1px solid #484c52;
color: white;
margin: 0;
padding: 15px 15px;
font-size: 12px;
text-transform: uppercase;
}
/* Nécessaire pour enlever les coins (corners) blancs (qui ne se fondent pas bien avec un thème gris foncé) */
/* OK */
span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span {
height: 0px;
}
/* Pour que le texte "Êtes-vous sûr de vouloir supprimer tous les cookies de ce forum ?" ne colle pas aux bordures */
/* OK */
.panel p {
padding: 15px;
}
/* Revoir la taille et le style des boutons OUI NON */
a.button2, input.button2, input.button3 { }
a.button1, input.button1, input.button3, a.button2, input.button2 { }
/* ---------------------------------------- BLOG ---------------------------------------- */
/* Soulignage de "Mon Journal de Trading" tout en haut */
/* OK */
#category h1, #home h1 {
border-bottom: 1px solid #484c52;
}
/* Séparation entre les différentes news */
/* OK */
.post-item {
border-bottom: 1px solid #484c52;
}
/* Soulignage des titres des news */
/* OK */
.post-item h2 {
border-bottom: 1px solid #484c52;
}
/* ---------- Titres de paragraphes ---------- */
/* Par exemple : https://www.andlil.com/prorealtime-trading-cfd à risque limité/ */
/* OK */
#post h1 {
color: #01a1f7;
text-decoration: none;
font-style: italic;
}
/* OK */
#post h2, #post h3, #post h4 {
color: #01a1f7;
text-decoration: none;
font-style: italic;
}
/* Par ex: https://www.andlil.com/bourse/ */
#category h1, #home h1 {
padding: 0 0 10px;
margin: 0 0 20px;
color: #01a1f7;
text-decoration: none;
font-style: italic;
}
/* ---------- Sommaire ---------- */
/* Par exemple : https://www.andlil.com/prorealtime-trading-cfd à risque limité/ */
/* OK */
#toc_container {
background: #36393e;
border: 1px solid #484c52;
padding: 10px;
margin-bottom: 1em;
width: auto;
display: table;
font-size: 95%;
}
/* ---------- Vignettes miniatures des images ---------- */
/* OK */
.thumbnail {
background: #484c52;
border: 1px solid #484c52;
}
/* OK */
.thumbnail:hover{
background-color: #01a1f7;
border: 1px solid #01a1f7;
}
/* ---------- Titres des blogs (qui sont aussi des liens) ---------- */
/* Par exemple : https://www.andlil.com/trading/ */
/* OK */
.post-items h2 {
color: #01a1f7;
}
/* OK */
.post-items h2 a:link { color: #01a1f7; }
.post-items h2 a:hover { color: white; text-decoration: underline; }
.post-items h2 a:visited { color: #01a1f7; }
.post-items h2 a:active { color: #01a1f7; }
/* ---------- Articles complémentaires ---------- */
/* Titre */
/* OK */
.related-posts h3 {
background: #484c52;
border: 1px solid #484c52;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
margin: 0;
padding: 15px 15px;
color: white;
font-size: 12px;
text-transform: uppercase;
}
/* OK */
.yarpp-related ul {
background: #36393e;
border: 1px solid #484c52;
}
/* OK */
.yarpp-related ul li {
border-top: 1px solid #484c52;
}
/* ---------- Commentaires dans les blogs ---------- */
/* OK */
#comments li.comment.even {
background: #2f3136;
}
/* OK */
#comments li.comment {
background: #2f3136;
}
/* Espaces entre chaque "speech bubble" */
/* OK */
#comments li.comment {
margin: 0 0 30px 0;
padding: 0px;
}
/* Speech Bubbles */
/* OK */
#comments p {
position: relative;
width: 100%;
padding: 10px;
background: #36393e;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 8px;
border: #484c52 solid 2px;
margin-top: 5px;
margin-bottom: 20px;
}
/* OK */
#comments p:after {
content: '';
position: absolute;
border-style: solid;
border-width: 0 8px 13px;
border-color: #36393e transparent;
display: block;
width: 0;
z-index: 1;
top: -13px;
left: 32px;
}
/* OK */
#comments p:before {
content: '';
position: absolute;
border-style: solid;
border-width: 0 10px 15px;
border-color: #484c52 transparent;
display: block;
width: 0;
z-index: 0;
top: -16px;
left: 30px;
}
/* ---------- Pagination de certaines pages de blog ---------- */
/* Exemple : https://www.andlil.com/trading/ */
/* Espace les boutons pour choisir la page */
/* OK */
.pagination-wrapper ul li {
display: inline-block;
margin: 0 4px;
margin-top: 0px;
}
Beau travail !
) Déjà qu'on me signale 5 fois par semaine des bugs de navigateurs comme si je codais chrome ou safari ^^
