[AwesomeBB] Mode sombre pour le chatbox
4 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 2 • Partagez
Page 1 sur 2 • 1, 2
[AwesomeBB] Mode sombre pour le chatbox
Détails techniques
Version du forum : AwesomeBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://jeuxvideo-club.forumactif.com/
Description du problème
BonjourIl y a quelques semaines, j'ai pu intégrer un mode clair/sombre grâce à l'aide précieuse de MlleAlys
Voir : https://forum.forumactif.com/t407710-un-mode-sombre-pour-awesomebb
J'ai décidé de mettre le module Chatbox.
Mais j'aimerais qu'il soit intégré dans le mode sombre aussi et j'aimerais savoir comment faire ?
A noter que je n'ai pas intégré la chatbox directement dans la page d'accueil mais via un lien qui emmène les membre vers la chatbox en plein écran : https://jeuxvideo-club.forumactif.com/chatbox/
Pour info voici le JS et le CSS du mode sombre de base :
JS :
- Code:
$(function() {
if (my_getcookie("cookiemode")) {
$('body').addClass('darkmode');
}
});
$(function() {
$('body #main-menu').append('<div id="modeselect"> ☼ <label class="switch"><input type="checkbox"><span class="slider"></span></label> ☽ </div>');
if (my_getcookie("cookiemode")) {
$('#modeselect input').prop("checked", true );
}
});
$(function() {
$('#modeselect input').on('change', function() {
$('body').toggleClass('darkmode');
my_setcookie('cookiemode', $('body').attr('class') , { expires : 100 } );
});
});
CSS :
- Code:
/***************************** DEBUT INTERRUPTEUR DARKMODE **************/
#modeselect {
color: white;
font-size: 20px;
text-align: center;
margin-bottom: 20px;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 20px;
vertical-align: middle;
margin: 0 5px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 2px;
background-color: #C7C7C7;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #3A474E;
outline: 1pt solid white;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
background:white;
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/************************************* FIN INTERRUPTEUR DARKMODE *************************/
/*************************** CSS DARKMODE *************************/
body.darkmode {
background-color: #2c3e50;
color: #f5f7fa;
}
.darkmode .forum-section, .darkmode .posts-section, .darkmode .notification-row {
background-color: #34495E;
}
.darkmode .forum-section:hover, .darkmode .posts-section:hover, .darkmode .notification-row:hover {
background-color: #2c3e50;
}
.darkmode .forum-header, .darkmode .posts-header {
background-color: #1D2C33;
}
.darkmode #privmsgs-menu li, .darkmode .forum-lastpost-author, .darkmode .posts-lastpost-author, .darkmode .block-topics .block-topics-posts i, .darkmode .block-topics .block-topics-views i, .darkmode .forum-lastpost-header i, .darkmode .forum-statistics-header i, .darkmode .posts-lastpost-header i, .darkmode .posts-statistics-header i, .darkmode .posts-lastpost i, .darkmode .forum-lastpost-author i, .darkmode .forum-lastpost-location i, .darkmode .forum-lastpost-time i, .darkmode .posts-lastpost-author i, .darkmode .posts-lastpost-time i, .darkmode select, .darkmode .input, .darkmode input, .darkmode .sceditor-container iframe, .darkmode .sceditor-container textarea, .darkmode .inputbox, .darkmode a, .darkmode a:visited, .darkmode .forum-description h3, .darkmode .posts-description h3 {
color: white;
}
.darkmode .forum-statistics-posts span, .darkmode .forum-statistics-topics span, .darkmode .posts-statistics-replies span, .darkmode .posts-statistics-views span, .darkmode .profile-advanced-stats dt span[style*="536482"] {
color: white;
}
.darkmode .forum-description p, .darkmode .posts-description p, .darkmode span.notification-date, .darkmode div.post-details {
color: #CCCCCC;
}
.darkmode #tabs ul, .darkmode .tabs ul, .darkmode .box-body, .darkmode .block .block-content, .darkmode .block-subtle, .darkmode .post, .darkmode .post-aside, .darkmode .panel, .darkmode .post-section, .darkmode .fb-or-text, .darkmode .mod-news, .darkmode .mod-news-footer, .darkmode .social_login_group .fb-or-text, .darkmode #chatbox_contextmenu, .darkmode #help-button, .darkmode .fontbutton, .darkmode #header-user img, .darkmode .avatar-big img, .darkmode .avatar-default img, .darkmode .avatar-mini img, .darkmode .cb-avatar img, .darkmode .mod-login-avatar img, .darkmode input, .darkmode .forumline tbody tr, .darkmode .table1 tbody tr, .darkmode .calendar-cell {
background-color: #34495E;
}
.darkmode .select-wrap select:hover, .darkmode .jumpbox-wrap select:hover, .darkmode .quickmod-wrap select:hover {
border-color: #1D2C33;
}
.darkmode .block-market .market-item-price, .darkmode .block .block-secondary-content, .darkmode .block .sub-head, .darkmode .block .block-footer, .darkmode .post-aside, .darkmode .attachbox, .darkmode .box-foot, .darkmode .post-footer, .darkmode .quick-reply .textarea, .darkmode .jumpbox-wrap select, .darkmode .quickmod-wrap select, .darkmode .select-wrap select, .darkmode #divcolor, .darkmode #divsmilies, .darkmode #help-button, .darkmode #submit_button, .darkmode .format-message+label, .darkmode #tabs li:hover, .darkmode .tabs li:hover {
background-color: #2c3e50!important;
border-color: #2c3e50;
color: #fff;
}
.darkmode .fa_like_list, .darkmode .fa_dislike_list, .darkmode .option_voters_list, .darkmode blockquote cite {
color: rgba(255,255,255,0.6);
}
.darkmode dl.post-author-details span.label span, .darkmode #block-online .headline a, .darkmode .cp-sidebar a:not(.btn) {
color: white !important;
}
.darkmode blockquote {
background: #2c3e50;
}
.darkmode .btn, .darkmode input[type="submit"], .darkmode input[type="button"] {
background: white;
color: black !important;
}
.darkmode .quick-reply .quick-reply-btn {
background: none;
color: white !important;
}
.darkmode .sceditor-container textarea {
color: white !important;
}
.darkmode .quick-reply-textarea-wrap .sceditor-container {
border: none !important;
}
.darkmode .quick-reply .sceditor-button {
background: white;
}
.darkmode .quick-reply-textarea-wrap .sceditor-container iframe, .darkmode .quick-reply-textarea-wrap .sceditor-container textarea {
background-color: unset !important;
color: white;
}
.darkmode #profile-tab-field-profil dt span, .darkmode #profile-menu a, .darkmode .profile-field label span {
color: white !important;
}
.darkmode .EV_List .EV_Item {
background: #34495E;
}
.darkmode .date-block {
background: white;
color: #1D2C33;
}
.darkmode .block-faq .faq-answer {
background: #2c3e50;
border: none;
}
.darkmode select option {
background: #2c3e50;
}
.darkmode .forumline th, .darkmode .forumline td, .darkmode .table1 th, .darkmode .table1 td {
border-color: #1D2C33;
}
.darkmode .left-overview a {
color: #1D2C33;
}
.darkmode a.btn.btn-flat[href*="/register"] {
background: #DC143C;
color: white !important;
}
@media (max-width: 750px) {
.darkmode .forum-lastpost, .darkmode .posts-lastpost {
background: #2c3e50;
border : none ;
}
}
.darkmode .dropdown-box li a {
color: black !important;
}
.darkmode .dropdown-box li.btn-quickquote a, .dropdown-box li.btn-quote a, .darkmode .dropdown-box li.btn-edit a, .darkmode .dropdown-box li.btn-delete a, .darkmode .dropdown-box li.btn-report a, .darkmode .dropdown-box li.btn-report-lock a, .darkmode .dropdown-box li.btn-ip a {
color: white !important;
}
/*** Couleurs ***/
.darkmode *[style*="rgb(102, 0, 0);"], .darkmode *[style*="#660000"], .darkmode *[color="#660000"] {
color: #F30000 !important;
}
.darkmode *[style*="rgb(255, 0, 0);"], .darkmode *[style*="#FF0000"], .darkmode *[color="#FF0000"] {
color: #ED3C3F !important;
}
.darkmode *[style*="rgb(102, 51, 0);"], .darkmode *[style*="#663300"], .darkmode *[color="#663300"] {
color: #895555 !important;
}
.darkmode *[style*="rgb(0, 102, 0);"], .darkmode *[style*="#006600"], .darkmode *[color="#006600"] {
color: #00b400 !important;
}
.darkmode *[style*="rgb(102, 102, 51);"], .darkmode *[style*="#666633"], .darkmode *[color="#666633"] {
color: #a2a200 !important;
}
.darkmode *[style*="rgb(0, 0, 255);"], .darkmode *[style*="#0000FF"], .darkmode *[color="#0000FF"] {
color: #1999ff !important;
}
.darkmode *[style*="rgb(0, 125, 224);"], .darkmode *[style*="#000099"], .darkmode *[color="#000099"] {
color: #007de0 !important;
}
.darkmode *[style*="rgb(102, 0, 255);"], .darkmode *[style*="#6600FF"], .darkmode *[color="#6600FF"] {
color: #805cee !important;
}
.darkmode *[style*="rgb(153, 0, 153);"], .darkmode *[style*="#990099"], .darkmode *[color="#990099"] {
color: #d259b5 !important;
}
/***************************** FIN CSS DARKMODE ******************/
Dernière édition par Zlork le Dim 18 Déc 2022 - 14:31, édité 3 fois
Invité- Invité
Invité- Invité
Re: [AwesomeBB] Mode sombre pour le chatbox
Bonjour Zlork
avez vous mis la tchatbox sur une page html
si c est le cas vous pouvez intégrer le code css qui permet de mettre le thème en sombre
tout en bas de la page html à la condition d'avoir activé le haut et le bas de la page
bonne journée
avez vous mis la tchatbox sur une page html
si c est le cas vous pouvez intégrer le code css qui permet de mettre le thème en sombre
tout en bas de la page html à la condition d'avoir activé le haut et le bas de la page
bonne journée
Re: [AwesomeBB] Mode sombre pour le chatbox
creange a écrit:Bonjour Zlork
avez vous mis la tchatbox sur une page html
si c est le cas vous pouvez intégrer le code css qui permet de mettre le thème en sombre
tout en bas de la page html à la condition d'avoir activé le haut et le bas de la page
bonne journée
J'ai juste activé le module dans le PA. Et pris le lien qui va vers le chatbox en plein écran car je ne veux pas le voir directement sur le forum.
J'ai rien touché au niveau CSS, JS ou HTML.
Invité- Invité
Re: [AwesomeBB] Mode sombre pour le chatbox
vous pouvez créer une page html avec le lien de la box en page libre dans les pages html et ensuite après l'avoir enregistrer vous basculer en mode avancé html et tout en bas de la page
mettre le code pour avoir le thème foncé et ne pas oublier de faire une redirection de la box vers la page html
mettre le code pour avoir le thème foncé et ne pas oublier de faire une redirection de la box vers la page html
Re: [AwesomeBB] Mode sombre pour le chatbox
Excuse moi mais pour moi, c'est du chinoiscreange a écrit:vous pouvez créer une page html avec le lien de la box en page libre dans les pages html et ensuite après l'avoir enregistrer vous basculer en mode avancé html et tout en bas de la page
mettre le code pour avoir le thème foncé et ne pas oublier de faire une redirection de la box vers la page html
Le CSS, je me débrouille un tout petit peu mais vraiment un tout petit peu mais alors le reste....
Pouvez-vous m'indiquer la démarche à suivre s'il vous plait ? Merci d'avance.
Invité- Invité
Re: [AwesomeBB] Mode sombre pour le chatbox
Pour créer votre page HTML il faut aller dans les Modules puis gestion des pages HTML
ensuite Création en Mode Avancé HTML
Avant vous allez ouvrir votre page où se trouve votre box
et clic droit pour afficher le code source de la page
une fois la page de la source ouverte faites un copier de tout le code qui s'ouvrira
et vous collerez ce code dans la page que la page HTML que vous ferez
vous pourrez visualiser la page avant de l'enregistrer
ensuite vous placerez le code pour mettre le thème sombre tout en bas de la page toujours en mode avancé
j'espère avoir été clair
ensuite Création en Mode Avancé HTML
Avant vous allez ouvrir votre page où se trouve votre box
et clic droit pour afficher le code source de la page
une fois la page de la source ouverte faites un copier de tout le code qui s'ouvrira
et vous collerez ce code dans la page que la page HTML que vous ferez
vous pourrez visualiser la page avant de l'enregistrer
ensuite vous placerez le code pour mettre le thème sombre tout en bas de la page toujours en mode avancé
j'espère avoir été clair
Re: [AwesomeBB] Mode sombre pour le chatbox
J'ai réussi à faire la page HTML, c'est déjà par mal.creange a écrit:Pour créer votre page HTML il faut aller dans les Modules puis gestion des pages HTML
ensuite Création en Mode Avancé HTML
Avant vous allez ouvrir votre page où se trouve votre box
et clic droit pour afficher le code source de la page
une fois la page de la source ouverte faites un copier de tout le code qui s'ouvrira
et vous collerez ce code dans la page que la page HTML que vous ferez
vous pourrez visualiser la page avant de l'enregistrer
ensuite vous placerez le code pour mettre le thème sombre tout en bas de la page toujours en mode avancé
j'espère avoir été clair
Maintenant, je mets quel code ? Celui du JS ? Du CSS ? Ou les deux ?
Le CSS que j'ai mis. Il y a une partie pour le bouton. Et l'autre pour le forum.
Invité- Invité
Re: [AwesomeBB] Mode sombre pour le chatbox
pour faire plus simple revenez sur la méthode en mode WYZYWYG et placer le bouton
normalement ça devrait marcher
si ça ne marche pas il faudra placer le code css en bas de la page en mode avance HTML
normalement ça devrait marcher
si ça ne marche pas il faudra placer le code css en bas de la page en mode avance HTML
Re: [AwesomeBB] Mode sombre pour le chatbox
Ca ne marche pas du tout.creange a écrit:pour faire plus simple revenez sur la méthode en mode WYZYWYG et placer le bouton
normalement ça devrait marcher
si ça ne marche pas il faudra placer le code css en bas de la page en mode avance HTML
Mais il n'y a pas moyen de faire autrement que de créer une page HTML ? Mettre le CSS du chatbox dans le CSS du mode sombre par exemple ?
Invité- Invité
Re: [AwesomeBB] Mode sombre pour le chatbox
Avez vous coché UTILISER LE HAUT ET LE BAS DU FORUM ?
si vous l'activez vous devez retrouver le bouton de théme sombre
sinon pour le Css il va falloir que Mlle Alys revienne nous aider
si vous l'activez vous devez retrouver le bouton de théme sombre
sinon pour le Css il va falloir que Mlle Alys revienne nous aider
Re: [AwesomeBB] Mode sombre pour le chatbox
En activant cet option, je trouve les menus et donc le bouton.creange a écrit:Avez vous coché UTILISER LE HAUT ET LE BAS DU FORUM ?
si vous l'activez vous devez retrouver le bouton de théme sombre
sinon pour le Css il va falloir que Mlle Alys revienne nous aider
Par contre le chatbox n'est pas centré. Puis évidemment le CSS n'est pas bon.
Invité- Invité
Re: [AwesomeBB] Mode sombre pour le chatbox
mettez ce code en début de la page
et celui là en fin de page
ça devrait centrer la box
Pour le css désolée j'espère que quelqu'un pourra trouver la solution
sur mon forum ça fonctionne sans que j'ai ajouté un code css dans la page
mais je suis en version pph3 donc pour votre version peut être que c'est différent ...
faîtes quand même un essai c'est peut être ce code qui bloque .....!
bonne fin de soirée
- Code:
<br /><br /><br />
<center>
<div style="text-align: center;">
et celui là en fin de page
- Code:
</center>
</center>
</style>
ça devrait centrer la box
Pour le css désolée j'espère que quelqu'un pourra trouver la solution
sur mon forum ça fonctionne sans que j'ai ajouté un code css dans la page
mais je suis en version pph3 donc pour votre version peut être que c'est différent ...
faîtes quand même un essai c'est peut être ce code qui bloque .....!
bonne fin de soirée
Re: [AwesomeBB] Mode sombre pour le chatbox
Bon, ça ne fonctionne pas. En tout cas, ce n'est pas le résultat que je veux.
Je ne pensais pas que ça serait aussi compliqué. Je pensais qu'il suffisait intégrer le CSS de la chatbox dans le CSS du mode sombre mais non.
Merci en tout cas, j'espère que d'autres ont la solution
Je ne pensais pas que ça serait aussi compliqué. Je pensais qu'il suffisait intégrer le CSS de la chatbox dans le CSS du mode sombre mais non.
Merci en tout cas, j'espère que d'autres ont la solution
Invité- Invité
Re: [AwesomeBB] Mode sombre pour le chatbox
Bonjour,
Mettre la Chatbox sur une page HTML ne changera rien pour avoir le mode sombre dessus, il s'agira toujours d'une iframe.
Il va falloir ajouter un script Javascript avec pour placement "Sur la chatbox" qui va ajouter une feuille CSS ou une classe dédiée.
Ajoutez ce script sur la Chatbox :
Par contre, votre script de base de mode sombre, il fonctionne bien pour le désactiver également ? Juste une question, comme ça, parce que j'ai un doute sur le test qui est fait dedans...
Bonne journée
Mettre la Chatbox sur une page HTML ne changera rien pour avoir le mode sombre dessus, il s'agira toujours d'une iframe.
Il va falloir ajouter un script Javascript avec pour placement "Sur la chatbox" qui va ajouter une feuille CSS ou une classe dédiée.
Ajoutez ce script sur la Chatbox :
- Code:
$(function() {
if (my_getcookie("cookiemode")) {
$("#chatbox").toggleClass("darkmode"));
}
});
Par contre, votre script de base de mode sombre, il fonctionne bien pour le désactiver également ? Juste une question, comme ça, parce que j'ai un doute sur le test qui est fait dedans...
Bonne journée
Re: [AwesomeBB] Mode sombre pour le chatbox
chattigre a écrit:Bonjour,
Mettre la Chatbox sur une page HTML ne changera rien pour avoir le mode sombre dessus, il s'agira toujours d'une iframe.
Il va falloir ajouter un script Javascript avec pour placement "Sur la chatbox" qui va ajouter une feuille CSS ou une classe dédiée.
Ajoutez ce script sur la Chatbox :
- Code:
$(function() {
if (my_getcookie("cookiemode")) {
$("#chatbox").toggleClass("darkmode"));
}
});
Par contre, votre script de base de mode sombre, il fonctionne bien pour le désactiver également ? Juste une question, comme ça, parce que j'ai un doute sur le test qui est fait dedans...
Bonne journée
Bonjour
Je suis content qu'on recommence à parler de JS et CSS
Si je comprend bien avec ce script, je vais pouvoir compléter le CSS du mode sombre que j'ai mis ? Cette partie là :
- Code:
/*************************** CSS DARKMODE *************************/
body.darkmode {
background-color: #2c3e50;
color: #f5f7fa;
}
.darkmode .forum-section, .darkmode .posts-section, .darkmode .notification-row {
background-color: #34495E;
}
.darkmode .forum-section:hover, .darkmode .posts-section:hover, .darkmode .notification-row:hover {
background-color: #2c3e50;
}
.darkmode .forum-header, .darkmode .posts-header {
background-color: #1D2C33;
}
.darkmode #privmsgs-menu li, .darkmode .forum-lastpost-author, .darkmode .posts-lastpost-author, .darkmode .block-topics .block-topics-posts i, .darkmode .block-topics .block-topics-views i, .darkmode .forum-lastpost-header i, .darkmode .forum-statistics-header i, .darkmode .posts-lastpost-header i, .darkmode .posts-statistics-header i, .darkmode .posts-lastpost i, .darkmode .forum-lastpost-author i, .darkmode .forum-lastpost-location i, .darkmode .forum-lastpost-time i, .darkmode .posts-lastpost-author i, .darkmode .posts-lastpost-time i, .darkmode select, .darkmode .input, .darkmode input, .darkmode .sceditor-container iframe, .darkmode .sceditor-container textarea, .darkmode .inputbox, .darkmode a, .darkmode a:visited, .darkmode .forum-description h3, .darkmode .posts-description h3 {
color: white;
}
.darkmode .forum-statistics-posts span, .darkmode .forum-statistics-topics span, .darkmode .posts-statistics-replies span, .darkmode .posts-statistics-views span, .darkmode .profile-advanced-stats dt span[style*="536482"] {
color: white;
}
.darkmode .forum-description p, .darkmode .posts-description p, .darkmode span.notification-date, .darkmode div.post-details {
color: #CCCCCC;
}
.darkmode #tabs ul, .darkmode .tabs ul, .darkmode .box-body, .darkmode .block .block-content, .darkmode .block-subtle, .darkmode .post, .darkmode .post-aside, .darkmode .panel, .darkmode .post-section, .darkmode .fb-or-text, .darkmode .mod-news, .darkmode .mod-news-footer, .darkmode .social_login_group .fb-or-text, .darkmode #chatbox_contextmenu, .darkmode #help-button, .darkmode .fontbutton, .darkmode #header-user img, .darkmode .avatar-big img, .darkmode .avatar-default img, .darkmode .avatar-mini img, .darkmode .cb-avatar img, .darkmode .mod-login-avatar img, .darkmode input, .darkmode .forumline tbody tr, .darkmode .table1 tbody tr, .darkmode .calendar-cell {
background-color: #34495E;
}
.darkmode .select-wrap select:hover, .darkmode .jumpbox-wrap select:hover, .darkmode .quickmod-wrap select:hover {
border-color: #1D2C33;
}
.darkmode .block-market .market-item-price, .darkmode .block .block-secondary-content, .darkmode .block .sub-head, .darkmode .block .block-footer, .darkmode .post-aside, .darkmode .attachbox, .darkmode .box-foot, .darkmode .post-footer, .darkmode .quick-reply .textarea, .darkmode .jumpbox-wrap select, .darkmode .quickmod-wrap select, .darkmode .select-wrap select, .darkmode #divcolor, .darkmode #divsmilies, .darkmode #help-button, .darkmode #submit_button, .darkmode .format-message+label, .darkmode #tabs li:hover, .darkmode .tabs li:hover {
background-color: #2c3e50!important;
border-color: #2c3e50;
color: #fff;
}
.darkmode .fa_like_list, .darkmode .fa_dislike_list, .darkmode .option_voters_list, .darkmode blockquote cite {
color: rgba(255,255,255,0.6);
}
.darkmode dl.post-author-details span.label span, .darkmode #block-online .headline a, .darkmode .cp-sidebar a:not(.btn) {
color: white !important;
}
.darkmode blockquote {
background: #2c3e50;
}
.darkmode .btn, .darkmode input[type="submit"], .darkmode input[type="button"] {
background: white;
color: black !important;
}
.darkmode .quick-reply .quick-reply-btn {
background: none;
color: white !important;
}
.darkmode .sceditor-container textarea {
color: white !important;
}
.darkmode .quick-reply-textarea-wrap .sceditor-container {
border: none !important;
}
.darkmode .quick-reply .sceditor-button {
background: white;
}
.darkmode .quick-reply-textarea-wrap .sceditor-container iframe, .darkmode .quick-reply-textarea-wrap .sceditor-container textarea {
background-color: unset !important;
color: white;
}
.darkmode #profile-tab-field-profil dt span, .darkmode #profile-menu a, .darkmode .profile-field label span {
color: white !important;
}
.darkmode .EV_List .EV_Item {
background: #34495E;
}
.darkmode .date-block {
background: white;
color: #1D2C33;
}
.darkmode .block-faq .faq-answer {
background: #2c3e50;
border: none;
}
.darkmode select option {
background: #2c3e50;
}
.darkmode .forumline th, .darkmode .forumline td, .darkmode .table1 th, .darkmode .table1 td {
border-color: #1D2C33;
}
.darkmode .left-overview a {
color: #1D2C33;
}
.darkmode a.btn.btn-flat[href*="/register"] {
background: #DC143C;
color: white !important;
}
@media (max-width: 750px) {
.darkmode .forum-lastpost, .darkmode .posts-lastpost {
background: #2c3e50;
border : none ;
}
}
.darkmode .dropdown-box li a {
color: black !important;
}
.darkmode .dropdown-box li.btn-quickquote a, .dropdown-box li.btn-quote a, .darkmode .dropdown-box li.btn-edit a, .darkmode .dropdown-box li.btn-delete a, .darkmode .dropdown-box li.btn-report a, .darkmode .dropdown-box li.btn-report-lock a, .darkmode .dropdown-box li.btn-ip a {
color: white !important;
}
/*** Couleurs ***/
.darkmode *[style*="rgb(102, 0, 0);"], .darkmode *[style*="#660000"], .darkmode *[color="#660000"] {
color: #F30000 !important;
}
.darkmode *[style*="rgb(255, 0, 0);"], .darkmode *[style*="#FF0000"], .darkmode *[color="#FF0000"] {
color: #ED3C3F !important;
}
.darkmode *[style*="rgb(102, 51, 0);"], .darkmode *[style*="#663300"], .darkmode *[color="#663300"] {
color: #895555 !important;
}
.darkmode *[style*="rgb(0, 102, 0);"], .darkmode *[style*="#006600"], .darkmode *[color="#006600"] {
color: #00b400 !important;
}
.darkmode *[style*="rgb(102, 102, 51);"], .darkmode *[style*="#666633"], .darkmode *[color="#666633"] {
color: #a2a200 !important;
}
.darkmode *[style*="rgb(0, 0, 255);"], .darkmode *[style*="#0000FF"], .darkmode *[color="#0000FF"] {
color: #1999ff !important;
}
.darkmode *[style*="rgb(0, 125, 224);"], .darkmode *[style*="#000099"], .darkmode *[color="#000099"] {
color: #007de0 !important;
}
.darkmode *[style*="rgb(102, 0, 255);"], .darkmode *[style*="#6600FF"], .darkmode *[color="#6600FF"] {
color: #805cee !important;
}
.darkmode *[style*="rgb(153, 0, 153);"], .darkmode *[style*="#990099"], .darkmode *[color="#990099"] {
color: #d259b5 !important;
}
/***************************** FIN CSS DARKMODE ******************/
Sinon je n'ai pas compris votre dernière question ?
Le script permet de permuter entre le mode clair (le css de base) et le mode sombre (CSS que j'ai ajouté) avec un bouton qui se trouve dans le menu burger (vous pouvez aller sur mon forum pour tester, n'hésitez pas). Par contre, en mode sombre, il y a un petit flash à chaque changement de page.... C'est peut être de ça vous voulez parler ? Si vous pensez améliorer le script, je suis preneur
Merci pour votre patience et votre aide.
Invité- Invité
Re: [AwesomeBB] Mode sombre pour le chatbox
chattigre a écrit:Par contre, votre script de base de mode sombre, il fonctionne bien pour le désactiver également ? Juste une question, comme ça, parce que j'ai un doute sur le test qui est fait dedans...
Hello, ce code semble fonctionnel, mais étant assez vieux et il me semble un bon patchwork de bidouillages déjà à l'époque, s'il y a moyen d'avoir une version plus "propre" je suis tout à fait preneuse aussi !
MlleAlys- Membre actif
- Messages : 5813
Inscrit(e) le : 12/09/2012
Re: [AwesomeBB] Mode sombre pour le chatbox
Coucou,
Je suis allé voir sur le forum et j'ai donc ma réponse : Oui, ça marche ^^
En fait, c'est cette condition qui me dérangeait :
Parce que quand le mode sombre a été désactivé puis est réactivé, ben le cookie est toujours là, mais vide... Mais bon, une chaine vide, ça vaut false, donc ça va
Par contre, est-ce que ça suffit comme ça ? :
Normalement, body étant le 1er élément généré, il y a des chances que ça suffise et que ça réduise voire supprime le délai.
Je vous laisse tester et voir...
Sinon le script ne me choque pas ne t'inquiètes pas MlleAlys ^^
Je regarderai plus en détail demain si toutefois...
D'ailleurs, même chose pour la Chatbox, si ce script fonctionne il serait préférable je pense par rapport à ma 1ère proposition... :
Bonne soirée !
Je suis allé voir sur le forum et j'ai donc ma réponse : Oui, ça marche ^^
En fait, c'est cette condition qui me dérangeait :
- Code:
if (my_getcookie("cookiemode")) {
Parce que quand le mode sombre a été désactivé puis est réactivé, ben le cookie est toujours là, mais vide... Mais bon, une chaine vide, ça vaut false, donc ça va
Par contre, est-ce que ça suffit comme ça ? :
- Code:
if (my_getcookie("cookiemode")) {
$('body').addClass('darkmode');
}
$(function() {
$('body #main-menu').append('<div id="modeselect"> ☼ <label class="switch"><input type="checkbox"><span class="slider"></span></label> ☽ </div>');
if (my_getcookie("cookiemode")) {
$('#modeselect input').prop("checked", true );
}
});
$(function() {
$('#modeselect input').on('change', function() {
$('body').toggleClass('darkmode');
my_setcookie('cookiemode', $('body').attr('class') , { expires : 100 } );
});
});
Normalement, body étant le 1er élément généré, il y a des chances que ça suffise et que ça réduise voire supprime le délai.
Je vous laisse tester et voir...
Sinon le script ne me choque pas ne t'inquiètes pas MlleAlys ^^
Je regarderai plus en détail demain si toutefois...
D'ailleurs, même chose pour la Chatbox, si ce script fonctionne il serait préférable je pense par rapport à ma 1ère proposition... :
- Code:
if (my_getcookie("cookiemode")) { $("#chatbox").toggleClass("darkmode"));}
Bonne soirée !
Re: [AwesomeBB] Mode sombre pour le chatbox
chattigre a écrit:Par contre, est-ce que ça suffit comme ça ? :
- Code:
if (my_getcookie("cookiemode")) {
$('body').addClass('darkmode');
}
$(function() {
$('body #main-menu').append('<div id="modeselect"> ☼ <label class="switch"><input type="checkbox"><span class="slider"></span></label> ☽ </div>');
if (my_getcookie("cookiemode")) {
$('#modeselect input').prop("checked", true );
}
});
$(function() {
$('#modeselect input').on('change', function() {
$('body').toggleClass('darkmode');
my_setcookie('cookiemode', $('body').attr('class') , { expires : 100 } );
});
});
Normalement, body étant le 1er élément généré, il y a des chances que ça suffise et que ça réduise voire supprime le délai.
Je vous laisse tester et voir...
Non, ça n'a pas l'air de fonctionner malheureusement.
Je me souviens que j'avais tenté de mettre la première partie du code sans la fonction directement entre balises script juste après la balise body, pour voir si ça limitait le délai, mais sans vraiment de différence significative...
J'ai pourtant des souvenirs de l'époque où sur certains forums le basculement au thème sombre était particulièrement imperceptible, mais peut être que c'était une technique totalement différente
MlleAlys- Membre actif
- Messages : 5813
Inscrit(e) le : 12/09/2012
Re: [AwesomeBB] Mode sombre pour le chatbox
chattigre a écrit:Coucou,
Je suis allé voir sur le forum et j'ai donc ma réponse : Oui, ça marche ^^
En fait, c'est cette condition qui me dérangeait :
- Code:
if (my_getcookie("cookiemode")) {
Parce que quand le mode sombre a été désactivé puis est réactivé, ben le cookie est toujours là, mais vide... Mais bon, une chaine vide, ça vaut false, donc ça va
Par contre, est-ce que ça suffit comme ça ? :
- Code:
if (my_getcookie("cookiemode")) {
$('body').addClass('darkmode');
}
$(function() {
$('body #main-menu').append('<div id="modeselect"> ☼ <label class="switch"><input type="checkbox"><span class="slider"></span></label> ☽ </div>');
if (my_getcookie("cookiemode")) {
$('#modeselect input').prop("checked", true );
}
});
$(function() {
$('#modeselect input').on('change', function() {
$('body').toggleClass('darkmode');
my_setcookie('cookiemode', $('body').attr('class') , { expires : 100 } );
});
});
Normalement, body étant le 1er élément généré, il y a des chances que ça suffise et que ça réduise voire supprime le délai.
Je vous laisse tester et voir...
Sinon le script ne me choque pas ne t'inquiètes pas MlleAlys ^^
Je regarderai plus en détail demain si toutefois...
D'ailleurs, même chose pour la Chatbox, si ce script fonctionne il serait préférable je pense par rapport à ma 1ère proposition... :
- Code:
if (my_getcookie("cookiemode")) { $("#chatbox").toggleClass("darkmode"));}
Bonne soirée !
Malheureusement, ça ne marche pas. Le flash est toujours présent.... Pire, parfois la page reste en mode clair après changement.
J'ai testé aussi votre script pour la chatbox avec un élément CSS (body.chatbox) dans le CSS du mode sombre, ça ne marche pas non plus....
Invité- Invité
Re: [AwesomeBB] Mode sombre pour le chatbox
Je viens juste aux nouvelles
chattigre, tu as pu faire quelque chose ? Si besoin, on peut tester
chattigre, tu as pu faire quelque chose ? Si besoin, on peut tester
Invité- Invité
Re: [AwesomeBB] Mode sombre pour le chatbox
Coucou,
J'ai trouvé l'erreur, il y a une parenthèse en trop dans le js à appliquer sur la chatbox :
Pour le css, vous pouvez tester ça :
La difficulté va être la gestion des couleurs.... Ici j'ai mis juste une inversion en attendant, mais je ne suis pas certaine que ce soit la meilleure solution ! ^^"
J'ai trouvé l'erreur, il y a une parenthèse en trop dans le js à appliquer sur la chatbox :
- Code:
$(function() {
if (my_getcookie("cookiemode")) {
$("body.chatbox").toggleClass("darkmode");
}
});
Pour le css, vous pouvez tester ça :
- Code:
/* darkmode chatbox*/
.darkmode #cb_connect_option {
background: unset !important;
}
.darkmode input#message {
filter: hue-rotate(180deg) invert(1);
background: #c9d8df;
}
.darkmode .chat-editor-inner button {
color: white;
}
.darkmode .chat-editor-inner button:hover {
color: black;
}
.darkmode .chat-row:nth-child(even), .darlmode #chatbox > :nth-child(even) {
background: #1d2c33;
}
.darkmode #chatbox>p {
border-color: black;
}
.darkmode span.msg, .darkmode #divcolor-preview {
filter: invert(1) hue-rotate(180deg);
}
La difficulté va être la gestion des couleurs.... Ici j'ai mis juste une inversion en attendant, mais je ne suis pas certaine que ce soit la meilleure solution ! ^^"
MlleAlys- Membre actif
- Messages : 5813
Inscrit(e) le : 12/09/2012
Re: [AwesomeBB] Mode sombre pour le chatbox
MlleAlys a écrit:Coucou,
J'ai trouvé l'erreur, il y a une parenthèse en trop dans le js à appliquer sur la chatbox :
- Code:
$(function() {
if (my_getcookie("cookiemode")) {
$("body.chatbox").toggleClass("darkmode");
}
});
Pour le css, vous pouvez tester ça :
- Code:
/* darkmode chatbox*/
.darkmode #cb_connect_option {
background: unset !important;
}
.darkmode input#message {
filter: hue-rotate(180deg) invert(1);
background: #c9d8df;
}
.darkmode .chat-editor-inner button {
color: white;
}
.darkmode .chat-editor-inner button:hover {
color: black;
}
.darkmode .chat-row:nth-child(even), .darlmode #chatbox > :nth-child(even) {
background: #1d2c33;
}
.darkmode #chatbox>p {
border-color: black;
}
.darkmode span.msg, .darkmode #divcolor-preview {
filter: invert(1) hue-rotate(180deg);
}
La difficulté va être la gestion des couleurs.... Ici j'ai mis juste une inversion en attendant, mais je ne suis pas certaine que ce soit la meilleure solution ! ^^"
D'abord merci beaucoup, le JS pour le chatbox marche bien !
Je n'ai pas utilisé ton CSS. J'ai, pour le moment, juste mis ça :
- Code:
.darkmode #cb_connect_option {
background-color: #34495E !important;
}
.darkmode #chatbox > :nth-child(2n) {
background-color: #2C3E50;
}
.darkmode #chatbox > p {
border-color: #1D2C33;
}
.darkmode #chatbox_footer #divcolor, .darkmode #chatbox_footer #divsmilies, .darkmode #chatbox_footer #help-button, .darkmode #chatbox_footer #submit_button, .darkmode #chatbox_footer .format-message + label {
background-color: #34495E !important;
}
Le chatbox est quelque chose qu'on va utiliser de manière occasionnel. Alors pour les couleurs, je ne vais pas me prendre la tête, vu le choix qu'il y a. Je souhaite juste inverser l'écriture noir en blanc si c'est possible
Petite question si demain je décide d'avoir la possibilité de créer des salons , il y aura aussi des choses à modifier sur le CSS ?
Invité- Invité
Re: [AwesomeBB] Mode sombre pour le chatbox
Bonjour,
Pour la Chatbox, j'ai développé un CSS de mode sombre (version phpBB3) ...
Pour les messages, je me suis contenté d'une inversion de base. Après, il faut gérer les différents cas de couleurs de groupes si on veut par exemple.
Petit extrait comme ça :
Ici :
- On gère la coloration des pseudos pour une couleur, qu'on remplace par une autre
- Les utilisateurs "normaux" passent en blanc
- On force l'héritage des couleurs de pseudos (pour les span imbriquées...)
- On passe les messages système en lightgreen
- ... et en lightred
- un salon avec couleur 800080 récupère une couleur e44ef0
Il y a un paquet de !important et surcharges de sélecteurs, vu que le principe est d'écraser des trucs déjà très précis que normalement on aurait retiré du CSS, mais là on ne peut pas, il faut passer par dessus...
Après, il faut faire des tests et voir ce qui vous correspond...
Pour le délai de transition, je suis tombé sur un code où il était quasiment absent en effet, il faut que je le retrouve et que je vois pour l'adapter... J'essayerai de voir ça dans les prochains jours...
J'ai bien reçu également votre MP, je reviens vers vous dès que j'ai pu tester
Bonne journée
Cordialement
Pour la Chatbox, j'ai développé un CSS de mode sombre (version phpBB3) ...
Pour les messages, je me suis contenté d'une inversion de base. Après, il faut gérer les différents cas de couleurs de groupes si on veut par exemple.
Petit extrait comme ça :
- Code:
#chatbox_members ul li[style="color:#1763A6"], #chatbox_members ul li a[style="color:#1763A6"], #chatbox_members ul li span[style="color:#1763A6"], #chatbox_members ul li span a[style="color:#1763A6"] {
color: #22B7E8 !important;
}
#chatbox .user {
color: white !important;
}
.chatbox-username .chatbox-user-username {
color: inherit !important;
}
span[style="color:green"] {
color: lightgreen !important;
}
span[style="color:red"] {
color: #ff4a4a !important;
}
li.person[style*="--color_channel:#800080"] {
--color_channel: #e44ef0 !important;
}
Ici :
- On gère la coloration des pseudos pour une couleur, qu'on remplace par une autre
- Les utilisateurs "normaux" passent en blanc
- On force l'héritage des couleurs de pseudos (pour les span imbriquées...)
- On passe les messages système en lightgreen
- ... et en lightred
- un salon avec couleur 800080 récupère une couleur e44ef0
Il y a un paquet de !important et surcharges de sélecteurs, vu que le principe est d'écraser des trucs déjà très précis que normalement on aurait retiré du CSS, mais là on ne peut pas, il faut passer par dessus...
Après, il faut faire des tests et voir ce qui vous correspond...
Pour le délai de transition, je suis tombé sur un code où il était quasiment absent en effet, il faut que je le retrouve et que je vois pour l'adapter... J'essayerai de voir ça dans les prochains jours...
J'ai bien reçu également votre MP, je reviens vers vous dès que j'ai pu tester
Bonne journée
Cordialement
Re: [AwesomeBB] Mode sombre pour le chatbox
Merci pour les couleurs, cela va peut-être me servir plus tard
Mon souci actuellement, c'est l'écriture et la couleur du texte dans la conversation. J'aimerais que le noir soit blanc en mode sombre. Les autres couleurs, comme je disais, je laisserai par défaut. J'ai essayé ce code mais sans succès (mais c'est normal, il doit avoir un truc que je n'ai pas compris )
EDIT :
Ça marche comme ça, j'ai fais au plus simple. S'il y a mieux je suis preneur
Je relancerai si besoin ce week-end au moins pour éviter que le sujet tombe dans l'oubli
Bonne journée également
Mon souci actuellement, c'est l'écriture et la couleur du texte dans la conversation. J'aimerais que le noir soit blanc en mode sombre. Les autres couleurs, comme je disais, je laisserai par défaut. J'ai essayé ce code mais sans succès (mais c'est normal, il doit avoir un truc que je n'ai pas compris )
EDIT :
- Code:
.darkmode input#message {
background: white;
}
.darkmode .msg span[style*="#000000"] {
color: #FFFFFF !important;
}
Ça marche comme ça, j'ai fais au plus simple. S'il y a mieux je suis preneur
Super.Pour le délai de transition, je suis tombé sur un code où il était quasiment absent en effet, il faut que je le retrouve et que je vois pour l'adapter... J'essayerai de voir ça dans les prochains jours...
Je relancerai si besoin ce week-end au moins pour éviter que le sujet tombe dans l'oubli
Merci beaucoup pour votre aideJ'ai bien reçu également votre MP, je reviens vers vous dès que j'ai pu tester
Bonne journée également
Invité- Invité
Re: [AwesomeBB] Mode sombre pour le chatbox
Je relance pour savoir si chattigre a pu trouver une solution pour améliorer le mode sombre et pour éviter que le sujet tombe dans l'oubli
Invité- Invité
Re: [AwesomeBB] Mode sombre pour le chatbox
Bonjour,
Je ne vous ai pas oublié, désolé, j'étais absent ce week-end
J'ai repéré ce code notamment, qui je crois est utilisé sur certains forums, et passe par une approche différente : Javascript pur et localStorage ...
Je ne sais pas si j'aurai la possibilité de m'attarder sur du JS aujourd'hui, mais je pense à vous au plus vite !!
Merci de votre patience
Cordialement
Je ne vous ai pas oublié, désolé, j'étais absent ce week-end
J'ai repéré ce code notamment, qui je crois est utilisé sur certains forums, et passe par une approche différente : Javascript pur et localStorage ...
Je ne sais pas si j'aurai la possibilité de m'attarder sur du JS aujourd'hui, mais je pense à vous au plus vite !!
Merci de votre patience
Cordialement
Re: [AwesomeBB] Mode sombre pour le chatbox
chattigre a écrit:Bonjour,
Je ne vous ai pas oublié, désolé, j'étais absent ce week-end
J'ai repéré ce code notamment, qui je crois est utilisé sur certains forums, et passe par une approche différente : Javascript pur et localStorage ...
Je ne sais pas si j'aurai la possibilité de m'attarder sur du JS aujourd'hui, mais je pense à vous au plus vite !!
Merci de votre patience
Cordialement
J'ai hâte de voir ça J'espère juste que ce nouveau code ne compliquera pas trop les modifications du CSS si on a besoin de modifier les couleurs ou autres
Invité- Invité
Re: [AwesomeBB] Mode sombre pour le chatbox
Re,
Ca fait partie de ce que je vais essayer d'adapter pour ajouter une classe au body au lieu d'un attribut comme actuellement dans le code en question
Normalement au niveau CSS ça devrait être pareil.
Bonne soirée
Ca fait partie de ce que je vais essayer d'adapter pour ajouter une classe au body au lieu d'un attribut comme actuellement dans le code en question
Normalement au niveau CSS ça devrait être pareil.
Bonne soirée
Re: [AwesomeBB] Mode sombre pour le chatbox
chattigre a écrit:Re,
Ca fait partie de ce que je vais essayer d'adapter pour ajouter une classe au body au lieu d'un attribut comme actuellement dans le code en question
Normalement au niveau CSS ça devrait être pareil.
Bonne soirée
D'accord
Merci encore pour l'aide
Invité- Invité
Page 1 sur 2 • 1, 2
Sujets similaires
» Un mode sombre pour AwesomeBB
» [AwesomeBB] Problème avec l'intégration d'un bouton mode sombre
» Mode nuit / sombre pour mon forumactif
» Mode nuit-sombre
» Mode clair/mode sombre
» [AwesomeBB] Problème avec l'intégration d'un bouton mode sombre
» Mode nuit / sombre pour mon forumactif
» Mode nuit-sombre
» Mode clair/mode sombre
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 2
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum