2 résultats trouvés pour privmsgs-menu

Comment dissocier les couleurs de texte ?

Bonjour !

Et c'est reparti, encore une fois réorganisés par groupe :

• La date/heure actuelle : Template privmsgs_body, {LAST_VISIT_DATE}
  
• Dernière visite : Template privmsgs_body, {CURRENT_TIME}
  
• Historique des messages privés : Template privmsg_topic_review, {L_TOPIC_REVIEW}
  
  
• Les liens pour revenir sur les catégories précédentes : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de .topic-actions p (pour les :: ) et .topic-actions a.nav
  
  
• Sauter vers : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de .vf_jumpbox label
  
  
• Le nombre de participants : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de .poster-count
  
  
• Le page X sur Y : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de .pagination
  
  
• Le numéro des pages dans les petits rectangles : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de #main-content .pagination span a
  
  
• Le descriptif des icônes : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de #privmsgs-menu li et #privmsgs-menu li a
  
  
• Lorsque l'on rentre dans un message : vous avez déjà ce qu'il faut dans le Template, changer juste le CSS de h1.page-title
  
  
• Pour le menu plus, on a dit fond foncé (j'ai mis noir, vous pouvez juste changer la valeur de la couleur) :
  

  Code:

  #plus_menu {
  background: #000;
}

  
  
  
• Et enfin, pour le petit espace dans la liste des MP, on va aller dans le Template privmsgs_body, et modifier la ligne suivante :
  

  Code:

              <a href="{listrow.U_READ}" class="topictitle">{listrow.MSG_UNANSWERED}{listrow.SUBJECT}</a><br />

  
  Pour mettre à la place :
  

  Code:

              <a href="{listrow.U_READ}" class="topictitle" style="margin: 0 5px">{listrow.MSG_UNANSWERED}{listrow.SUBJECT}</a><br />

Je n'ai rien oublié normalement !

Un mode sombre pour AwesomeBB

Mince, c'est bien suite à la suppression de la bannière, je n'avais pas pensé aux marges.
Remplacez le code précédent :

Code:

#header-banner {
  display: none;
}

par celui-ci :

Code:

#header-banner {
  height: 0;
  visibility: hidden;
}

Et ça devrait être bon ^^

Pour le menu à côté des mp, j'ajoute le sélecteur "#privmsgs-menu li" à la liste de tous ceux auxquels ont a déjà appliqué "color: white;".
Pour le titre des mp eux même, c'est un peu étrange, chez moi ils sont bien blancs  


Pour l'interrupteur jour/nuit sur mon forum test :



Le javascript, à mettre sur toutes les pages, est le suivant

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

(la première partie applique le thème en mémoire dans le cookie, la deuxième partie insère le bouton dans le menu du forum, la troisième partie applique le thème sélectionné et change le cookie lorsqu'on utilise l'interrupteur)

Le css pour la mise en forme de l'interrupteur, à mettre dans le css du forum :

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 *************************/

En thème "nuit", le javascript ajoute la class" darkmode" à la balise "body", c'est à dire à l'ensemble de la page du forum.
A partir de là, il faut modifier votre css pour indiquer au début de chaque élément que c'est seulement dans le cas où la page est en darkmode.
Ce qui donne ce css-ci (que j'ai construit à partir des modifs faites dans ce sujet et qui est actuellement sur mon fo test), à mettre également dans le css de votre forum :

Code:

/*************************** 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 .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: #172329;
}
.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 .posts-lastpost, .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 .select-wrap select:hover, .darkmode .jumpbox-wrap select:hover, .darkmode .quickmod-wrap select:hover {
  border-color: #172329;
}
.darkmode .date-block {
  color: black;
}
.darkmode .block-faq .faq-answer {
  background: #2c3e50;
  border: none;
}


.darkmode *[style="color:#004599"] {  /*couleur d origine*/
  color: #5ea7ff !important;    /*nouvelle couleur*/
}
  
  
  @media (max-width: 750px) {
    .darkmode .forum-lastpost, .darkmode .posts-lastpost {
      background: none;
    }
  }


/***************************** FIN CSS DARKMODE ******************/

Comme je disais, je ne suis pas certaine que ce soit hyper optimisé, mais c'est relativement simple à gérer et a priori ça fonctionne ^^


ET de ce fait avec cette technique, on peut utiliser la même méthode dans le javascript qui modifiait la couleur de l'éditeur :

Code:

$(function(){
  $(function(){
    $(".darkmode .sceditor-container iframe").contents().find("head").append("<style>body,html,code:before,p,table{color:#fff!important;} blockquote,code{color:black;}</style>");
  });
});