[ModernBB] Question à propos de la toolbar

[orpheus]

Bonjour à tous !

Voila, j'ai actuellement un forum qui tourne sous ModernBB et je souhaiterai savoir s'il est possible de personnaliser la Toolbar en supprimant les boutons de partage à l'exception de Facebook et Twitter.

J'aurais également voulu savoir s'il est possible de "transformer" les boutons de partage en lien de redirection vers les communautés que je gère sur Facebook et Twitter et du coup, renommer le titre "partagez" en "suivez-nous".

En gros, je ne souhaite pas que les membres puissent partager des publications via la Toolbar mais que celle-ci serve exclusivement de lien entre mes pages de réseaux sociaux et mon forum

Lien du forum : http://pokemon-anime.forumactif.com

Merci d'avance.

[*Splash*]

Hi orpheus,

Pour masquer les liens des réseaux sur la toolbar tu peux coller ce code à la CSS :

Code:

#fa_share {display: none !important;} /* Masquer les liens sociaux */

Ensuite tu peux étudier ce code laissé par Milouze, sur ce forum, pour recréer une ligne de liens sociaux sous la navbar > Clique

[orpheus]

Merci pour ton aide Splash

J'ai appliqué les codes mais j'ai un petit soucis, est-ce normal que la barre des réseaux sociaux est invisible, sauf lorsque je descend ?
Je précise que j'ai pas appliqué la modification de template pour le moment.



En fait dans l'idéal s'il n'est pas possible de mettre les boutons des réseaux sociaux dans la Toolbar, j'aurais aimé qu'il soient situé comme sur le forum ici en fait, donc quelque part par ici sur mon forum (voir l'encadré en rouge) :



Après il y a peut-être quelque chose qui m'a échappé, je sais pas ...

[*Splash*]

Comme sur ce forum > Clique ?

[orpheus]

Oui quelque chose dans ce genre là ça serait parfait (mais sans les contours blancs sur les boutons ^^).
Et si possible, modifier l'intitulé : au lieu de "suivez l'actualité du forum" je préférerai "suivez nous sur les réseaux sociaux".

[*Splash*]

Pour les contours des boutons, dans la CSS tu as ceci :

Code:

a.M14_btn
{
background-color:white;/*couleur de fond en relation avec les images*/

Supprime cette ligne :

Code:

background-color:white;/*couleur de fond en relation avec les images*/

Le code que tu as mis dans le overall_header tu le déplace en tout début de template index_box, juste avant ceci :

Code:

<ul class="linklist top topliens">

[orpheus]

Je viens d'essayer, ça semble fonctionner correctement mais j'ai deux petits soucis :

- J'ai un encadré gris qui entoure le tout, comment faire pour s'en débarrasser ?



- Je souhaiterai également réduire la taille du texte, comment faire ?

De plus, le fait d'avoir installé ceci à complètement chamboulé l'ordre des textes à côté (voir les nouveaux messages, etc).
Y'a t-il moyen d'harmoniser un peu le tout comme avant ?

Merci.

[*Splash*]

Dans le code CSS tu as ceci :

Code:

#M14_btn
{
color: #fff;
display: inline-block;
float: left;
font-family: sans-serif;
font-size: 15px;
font-weight: 700;
padding:18px 0px 18px 200px;
background-color:grey;
padding: 10px 10px 10px 70px;
width: 40%;/*on determine la largeur du bloc*/
margin-left: 10%;/*/*on decale le bloc de 10% de la gauche*/
}

La couleur de fond se trouve ici :

Code:

background-color:grey;

Tu supprimes la ligne ou tu changes la couleur

Pour la taille de police c'est ici :

Code:

font-size: 15px;

Modifie la valeur 15px à ta guise

[orpheus]

Je te remercie pour ton aide, du coup vu les tests que je viens de faire, tout semble fonctionner à l'exception de deux choses (excuse moi pour toutes mes questions).

- L'intitulé avant le bouton Facebook est écrit en blanc, ou faut-il aller pour modifier la couleur de ce texte ?
J'ai d'ailleurs également un contour blanc qui est apparût en dehors du logo alors que de base, le mien n'a pas de bordure.

- Et je voulais savoir s'il y a pas moyen de placer tout ceci au dessus de la légende puisque comme je disais, ça a complètement tout chambouler avec des retours à la ligne etc (je parle de la colonne "Voir les nouveaux messages depuis votre dernière visite Voir ses messages Voir les messages sans réponses Marquer tous les forums comme lus") alors qu'avant tout tenait sur une seule ligne.

[*Splash*]

- L'intitulé avant le bouton Facebook est écrit en blanc, ou faut-il aller pour modifier la couleur de ce texte ?
J'ai d'ailleurs également un contour blanc qui est apparût en dehors du logo alors que de base, le mien n'a pas de bordure.

Dans le code CSS tu as ceci :

Code:

/*LE BLOC DES RESEAUX SOCIAUX*/
#M14_btn
{
color: #fff;

color: #fff correspond à la couleur blanche, alors tu change ceci #fff

Pour le contour blanc en dehors du logo je ne vois pas de quoi tu parles

- Et je voulais savoir s'il y a pas moyen de placer tout ceci au dessus de la légende puisque comme je disais, ça a complètement tout chambouler avec des retours à la ligne etc (je parle de la colonne "Voir les nouveaux messages depuis votre dernière visite Voir ses messages Voir les messages sans réponses Marquer tous les forums comme lus") alors qu'avant tout tenait sur une seule ligne.

Là je pense que tu as mal positionné le code en début de template.
Ton template index_box devrait commencer ainsi :

Code:

<div id="M14_btn">
                            <span>Suivez l'actualité du forum >></span>
<a class="M14_btn" href="LIEN FACEBOOK" target="_blank" title="INFOBULLE FACEBOOK"><img src="https://2img.net/i/fa/modernbb/icon_contact_fb.png"/></a>
<a class="M14_btn" href="LIEN TWITTER" target="_blank" title="INFOBULLE TWITTER"><img src="https://2img.net/i/fa/modernbb/icon_contact_twitter.png"/></a>
         </div>
<ul class="linklist top topliens">

[orpheus]

Encore merci pour ton aide, le problème de couleur est résolu, reste celui du template.

Car de ce que je vois, il a l'air de commencer pareil mais certaines choses semble différer, dans le doute, voici l'intégralité du template :

Code:

<div id="M14_btn">
                            <span>Suivez l'actualité du forum</span>
<a class="M14_btn" href="https://www.facebook.com/pokemondessinanime" target="_blank" title="Pokémon la série animée"><img src="https://i.servimg.com/u/f96/18/56/12/14/icon_c10.png"/></a>

 
        </div>

<ul class="linklist top">
   <!-- BEGIN switch_user_logged_in -->
   <li>
      <a href="{U_SEARCH_NEW}"><i class="ion-ios-flame"></i>{L_SEARCH_NEW}</a>
   </li>
   <li>
      <a href="{U_SEARCH_SELF}"><i class="ion-ios-box-outline"></i>{L_SEARCH_SELF}</a>
   </li>
   <!-- END switch_user_logged_in -->
   <li>
      <a href="{U_SEARCH_UNANSWERED}"><i class="ion-ios-chatbubble-outline"></i>{L_SEARCH_UNANSWERED}</a>
   </li>
   <!-- BEGIN switch_user_logged_in -->
      <li class="rightside">
         <a href="{U_MARK_READ}" accesskey="m"><i class="ion-android-checkmark-circle"></i>{L_MARK_FORUMS_READ}</a>
      </li>
   <!-- END switch_user_logged_in -->
</ul>

<!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
      <div class="forabg">
         <ul class="topiclist">
            <li class="header">
               <dl class="icon">
                  <dd class="dterm"><div class="table-title">{catrow.tablehead.L_FORUM}</div></dd>
                  <dd class="topics"><i class="ion-android-list" data-tooltip="{L_TOPICS}"></i></dd>
                  <dd class="posts"><i class="ion-android-chat" data-tooltip="{L_POSTS}"></i></dd>
                  <dd class="lastpost"><i class="ion-android-time" data-tooltip="{L_LASTPOST}"></i></dd>
               </dl>
            </li>
         </ul>
         <ul class="topiclist forums">
   <!-- END tablehead -->

   <!-- BEGIN forumrow -->
            <li class="row">
               <dl class="icon" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll {catrow.forumrow.INC_LEVEL} 50%;">
                  <dd class="dterm">
                     <div style="display: block; margin : 0 {catrow.forumrow.INC_LEVEL_RIGHT} 0 {catrow.forumrow.INC_LEVEL_LEFT};">
                        <h{catrow.forumrow.LEVEL} class="hierarchy">
                        <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
                        </h{catrow.forumrow.LEVEL}>
                        {catrow.forumrow.FORUM_DESC}

                        <!-- BEGIN switch_moderators_links -->
                           {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                        <!-- END switch_moderators_links -->
                        {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                        <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
                     </div>
                  </dd>
                  <dd class="topics">{catrow.forumrow.TOPICS} <dfn>{L_TOPICS}</dfn></dd>
                  <dd class="posts">{catrow.forumrow.POSTS} <dfn>{L_POSTS}</dfn></dd>
                  <dd class="lastpost">
                     <!-- BEGIN ads -->
                     <span class="AD_LastPA">
                                <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
                                <span class="AD_LastInfos">
                                    <a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a>
                                    {catrow.forumrow.ads.DATE}<br />
                                    {catrow.forumrow.ads.LOCATION}
                                </span>
                     </span>
                            <!-- END ads -->
                     
                            <!-- BEGIN avatar -->
                            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                            <!-- END avatar -->

                     <span>
                     <!-- BEGIN switch_topic_title -->
                     <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                     <!-- END switch_topic_title -->
                     {catrow.forumrow.USER_LAST_POST}
                     </span>
                  </dd>
               </dl>
            </li>
   <!-- END forumrow -->

   <!-- BEGIN tablefoot -->
            </ul>
      </div>
   <!-- END tablefoot -->
<!-- END catrow -->

<!-- BEGIN switch_on_index -->
<ul class="linklist bottom">
   <li>
      <a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a>
   </li>
   <li>
      <a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a>
   </li>
   <li class="last">
      <a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a>
   </li>
   <!-- BEGIN switch_delete_cookies -->
      <li class="rightside">
         <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow"><i class="ion-trash-a"></i>{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
      </li>
   <!-- END switch_delete_cookies -->
</ul>
<!-- END switch_on_index -->

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
   var btn_collapse = $('<div></div>', {
      class: 'btn-collapse'
   });

   var btn_collapse_show = $('<i></i>', {
      class: 'ion-android-add-circle hidden',
      'data-tooltip': '{L_EXPEND_CAT}'
   }).appendTo(btn_collapse);

   var btn_collapse_hide = $('<i></i>', {
      class: 'ion-android-remove-circle',
      'data-tooltip': '{L_HIDE_CAT}'
   }).appendTo(btn_collapse);

   var collapsed = [];

   if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
      collapsed = readCookie('collapsed').split(',');
   }

   $(document).on('click', '.btn-collapse', function() {
      $(this).children('.ion-android-add-circle').toggleClass('hidden');
      $(this).children('.ion-android-remove-circle').toggleClass('hidden');
      $(this).parents('.forabg').toggleClass('hidden');

      if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
         collapsed = readCookie('collapsed').split(',');
      }

      if (!$(this).parents('.forabg').hasClass('hidden')) {
         removeFromArray('' + $(this).parents('.forabg').data('cindex'), collapsed);

         createCookie('collapsed', collapsed);
      } else {
         collapsed.push('' + $(this).parents('.forabg').data('cindex'));

         createCookie('collapsed', collapsed);
      }
   });

   $('.forabg').each(function(i) {
      $(this).data('cindex', '' + i);

      $(btn_collapse)
         .clone()
         .attr('id', 'forabg' + i)
         .appendTo($(this).find('.header'));

      if ($.inArray('' + i, collapsed) > -1) {
         $(this).toggleClass('hidden');
         $('#forabg' + i).children('.ion-android-add-circle').toggleClass('hidden');
         $('#forabg' + i).children('.ion-android-remove-circle').toggleClass('hidden');
      }
   });
});

function removeFromArray(item, array) {
   var i = array.indexOf(item);

   if (i > -1) {
      array = array.splice(i, 1);
   }
}

function createCookie(name, value, days) {
   var expires;

   if (days) {
      var date = new Date();
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      expires = "; expires=" + date.toGMTString();
   } else {
      expires = "";
   }
   document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
}

function readCookie(name) {
   var nameEQ = encodeURIComponent(name) + "=";
   var ca = document.cookie.split(';');
   for (var i = 0; i < ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) === ' ') c = c.substring(1, c.length);
      if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
   }
   return null;
}
//]]>
</script>


[*Splash*]

Hum...
Quand je remplace mon template par le tien sur mon fofo test j'ai ceci :



tente de changer le début ainsi :

Code:

<div id="M14_btn">
                            <span>Suivez l'actualité du forum</span>
<a class="M14_btn" href="https://www.facebook.com/pokemondessinanime" target="_blank" title="Pokémon la série animée"><img src="https://i.servimg.com/u/f96/18/56/12/14/icon_c10.png"/></a>

 
        </div>
<br />
<ul class="linklist top topliens">

[orpheus]

Je viens d'essayer, ça a presque résolu le problème ^^
Il reste plus que "Voir les nouveaux messages depuis votre dernière visite" et "Voir ses messages" qui ne veulent pas s'aligner

[*Splash*]

C'est quoi le lien de ton fofo ?

[orpheus]

Le voici : http://pokemon-anime.forumactif.com

[*Splash*]

Dans ta CSS remplace ceci :

Code:

#M14_btn
{
color: #444;
display: inline-block;
float: left;
font-family: sans-serif;
font-size: 15px;
font-weight: 700;
padding:18px 0px 18px 200px;
background-color:grey;
padding: 10px 10px 10px 70px;
width: 40%;/*on determine la largeur du bloc*/
margin-left: 10%;/*/*on decale le bloc de 10% de la gauche*/
}

Par ceci :

Code:

#M14_btn {
    color: #444;
    font-family: sans-serif;
    font-size: 15px;
    font-weight: 700;
}

Tu devrais arriver à ceci

[orpheus]

Ah cette fois-ci tout semble fonctionner normalement, encore merci pour tout Splash !

Mais il subsiste une dernière anomalie, rien de bien méchant sans doute mais je préfère le signaler.

Lorsque j'ai validé les dernières modifications dans le CSS j'ai eu ce message d'erreur qui est apparût : « Erreur détectée
Nous avons compté un nombre différent de "{" et de "}". Cela signifie que votre CSS risque de ne pas être valide et ne sera pas affiché correctement sur votre forum.

Nous vous conseillons de relire votre code. ».

Dans le doute, je te transmet ma feuille de CSS

Code:

.headerbar {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 185px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
  }

.Description_none{display:none;/**ont efface la description**/}

.statistics-item > strong {
  font-size: inherit;
  line-height: inherit;
  vertical-align: 0;
}

#fa_share {display: none !important;} /* Masquer les liens sociaux */

 
/*LE BLOC DES RESEAUX SOCIAUX*/
#M14_btn {
    color: #444;
    font-family: sans-serif;
    font-size: 15px;
    font-weight: 700;
}
width: 40%;/*on determine la largeur du bloc*/
margin-left: 10%;/*/*on decale le bloc de 10% de la gauche*/
}
/*LE TEXTE DES RESEAUX SOCIAUX*/
#M14_btn span
{
float: left;
margin-right: 10px;
width:200px;
height: 32px;
line-height: 32px;
}
/*LES BOUTONS DES RESAUX SOCIAUX*/
a.M14_btn
{
background-color:white;/*couleur de fond en relation avec les images*/
border-radius: 3px;
color: #fff !important;
display: inline-block;
font-size: 17px;
height: 32px;
margin: 3px;
padding: 7px;
text-align: center;
width: 32px;
  padding: 4px;/*en relation avec la dimension des images*/
}

[*Splash*]

Il est là le bug :

Code:

/*LE BLOC DES RESEAUX SOCIAUX*/
#M14_btn {
    color: #444;
    font-family: sans-serif;
    font-size: 15px;
    font-weight: 700;
}
width: 40%;/*on determine la largeur du bloc*/
margin-left: 10%;/*/*on decale le bloc de 10% de la gauche*/
}

Supprime et remplace par ceci :

Code:

/*LE BLOC DES RESEAUX SOCIAUX*/
#M14_btn {
    color: #444;
    font-family: sans-serif;
    font-size: 15px;
    font-weight: 700;
    width: 40%;/*on determine la largeur du bloc*/
    margin-left: 10%;/*/*on decale le bloc de 10% de la gauche*/
}

[orpheus]

Ah cette-fois ci tout est nickel !
Plus d'erreurs, tout s'affiche correctement.

Encore merci pour toute l'aide que tu ma accordé, je passe le sujet en résolu

[*Splash*]

Au plaisir