IndiceDark Mode
Forum dei Forum: Aiuto per Forumattivo :: Assistenza a problemi e richieste :: Problemi con uno script o codici :: I problemi risolti con i codici :: Argomenti chiusi con i codici
Pagina 1 di 1 • Condividi
Dark Mode
Da Simone Boi Dom 17 Mar 2024 - 8:42
Buongiorno,
ho inserito la funzionalità del "Dark Mode" sul mio forum (il classico switch chiaro/scuro), tuttavia ho alcuni problemini grafici, potete aiutarmi cortesemente?
Problemi:
Spero riusciate ad aiutarmi!
Grazie mille,
saluti
ho inserito la funzionalità del "Dark Mode" sul mio forum (il classico switch chiaro/scuro), tuttavia ho alcuni problemini grafici, potete aiutarmi cortesemente?
Problemi:
- Problema 1:
- 1. è presente una specie di sfumatura bianca all'interno delle categorie
Edit -> per il primo ho risolto in questo modo:- Codice:
.forum-description h3::after {
box-shadow: none;
}
- Problema 2:
2. il testo in "profilo, profilo post e Faq" è bianco, perciò non si vede con lo sfondo bianco- Spoiler:
Questo è il codice che ho utilizzato:
Javascript:- Spoiler:
- Codice:
$(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:- Spoiler:
- Codice:
/*************************** CSS DARKMODE *************************/
body.darkmode {
background-color: #2c3e50;
color: #f5f7fa;
}
.darkmode .forum-section, .darkmode .posts-section, .darkmode .notification-row {
background-color: #34495E;
}
.darkmode .forum-header, .darkmode .posts-header {
background-color: #172329;
}
.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-description p, .darkmode .posts-description p, .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 #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: white !important;
}
.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 {
color: #172329;
}
.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: #172329;
}
.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 {
background: #34495e;
}
.darkmode .dropdown-box .activetab a {
color: white;
}
/***************************** FIN CSS DARKMODE ******************/
/***************************** 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);
}
Ho risolto anche per questi con il seguente codice:- Codice:
.profile-advanced-stats dd {
background: #6891994f;
}
.block .block-dl-default dd {
background: #6891994f;
}
.faq dd {
background: #6891994f;
}
- Problema 3:
3. Come posso modificare il css in modo che non venga considerato anche su Mobile? Perchè mi fa casini
Spero riusciate ad aiutarmi!
Grazie mille,
saluti
Simone Boi- ***
- Sesso :
Età : 33
Messaggi : 161
Località : Italia -
Re: Dark Mode
Da Simone Boi Dom 17 Mar 2024 - 22:34
Lascio perdere la versione mobile, troppe cose bisogna cambiare, si può chiudere questo topic
Simone Boi- ***
- Sesso :
Età : 33
Messaggi : 161
Località : Italia -
Forum dei Forum: Aiuto per Forumattivo :: Assistenza a problemi e richieste :: Problemi con uno script o codici :: I problemi risolti con i codici :: Argomenti chiusi con i codici
Pagina 1 di 1
Permessi in questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum.
Facebook
Twitter
Youtube
