Modifier le cadre du message en accueil

[Lalittle]

Détails techniques

Version du forum : ModernBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : non défini
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://in-morues-we-trust.forumactif.com/

Description du problème

Bonjour !

Je souhaite installer un compte à rebours dans le cadre dédié au message d'accueil, de manière à ce que les membres qui consultent sur la version web comme sur la version mobile puissent le voir.

Cependant j'aimerais réduire le cadre à la partie utile, et me défaire de l'encadrement jaune pâle... et de la place qu'il prend de surcroît.

J'ai trouvé deux sujets ici, mais les css ne fonctionnent pas sur ma version...

Pourriez-vous m'y aider ?

Merci par avance...

[Toryudo]

Bonjour !

D'après ce que je constate, j'ai l'impression que vous avez réussi ?


Ou est-ce qu'il reste quelque chose encore ?

[Lalittle]

Merci Toryudo pour cette réponse !!

Non, hélas je n'ai pas du tout réussi ; j'ai bricolé un truc dans la partie "annonce"... ce qui fait que les membres utilisant la version mobile ne le voient pas... j'avoue que je déplore vraiment cette différence entre les deux versions, c'est difficile à gérer et frustrant, car j'organise souvent des petits évènements et ça me demande beaucoup plus de temps et de travail de tenter de "toucher" tout le monde...

Je suis donc trèèèès preneuse d'une solution pour mettre la même chose en message d'accueil, qu'au moins tout le monde puisse le voir !

D'autant que je prépare un audio pour le jour J, et je voudrais aussi poster le lecteur ce jour-là... avec le feu d'artifice... encore MERCI pour ça

[Toryudo]

Est-ce que vous pourriez remettre en place le code de base, celui qui avait le problème ?
Ou est-ce que vous pouvez fournir le code qui permet d'avoir le problème ?
Comme ça, je peux regarder en direct et voir quel CSS il faut rajouter pour corriger !

[Lalittle]

Alors, voici le css actuel :

Code:

i[class*='ion-'] {
  margin-left: 6px;
  padding-right: 5px;
  vertical-align: 0px;
}

ul.navbar.navlinks > li > a > img {
  display: none;
}

ul.navbar.navlinks > li > a {
  font-size: 15px;
  margin: 10px;
}

.forabg, .forumbg, .is-sticky#headerbar-top {
  background: -webkit-linear-gradient(left, #3dade9, #bf2fcb);
}

    div.headerbar {
      background: url(http://tt2.noc.re/img/blue.svg),-webkit-linear-gradient(left,#3dade9,#bf2fcb);
      height: 200px;
}
 
.button, .button1, .button2, input[type="submit"]{
  display: inline-block;
  padding: 1em 2em;
  font-weight: 400;
  text-align: center;
  color: #3dade9!important;
  background: transparent;
  border-left: 3px solid #3dade9;
  border-right: 3px solid #bf2fcb;
  background-image: -webkit-linear-gradient(left, #3dade9, #bf2fcb), -webkit-linear-gradient(left, #3dade9, #bf2fcb);
  background-size: 100% 2px;
  background-position: 0 100%, 0 0;
  background-repeat: no-repeat;
  background-clip: border-box;
  box-shadow: none!important;
}
.button1:hover, .button2:hover, .button:hover, input[type="submit"]:hover {
  display: inline-block;
  padding: 1em 2em;
  font-weight: 400;
  text-align: center;
  color: #bf2fcb!important;
  background: transparent;
  border-left: 3px solid #3dade9;
  border-right: 3px solid #bf2fcb;
  background-image: -webkit-linear-gradient(left, #3dade9, #bf2fcb), -webkit-linear-gradient(left, #3dade9, #bf2fcb);
  background-size: 100% 2px;
  background-position: 0 100%, 0 0;
  background-repeat: no-repeat;
  background-clip: border-box;
  box-shadow: none!important;
}
.postbody .content img { vertical-align: middle;
}
 
 
#site-title h1 {
font-size: 34px;
text-align: center;
}
 
#site-title {
letter-spacing: 0.06em;
font-size: 26px;
}
    .postbody .content a {
         color: #38761D;
         border-bottom: 1px dotted;
    }
    
    .postbody .content a:hover {
         color: #595A5E;
         border-bottom: 1px dotted;
}
 div#site-desc{left: 17%;}
    #site-desc {max-width: 100%; width: 65%}
    #site-desc #site-title {text-align: center}
    #site-desc p {text-align: center}
    /* COULEURS LIENS TAGS */
        .mentiontag {
        background-color: #E2DCF5;
         color: white;
        }
          .rep-button, .rep-button:active, .rep-button:focus {
        
            background: #BFBCF5; /* Couleur de fond */
            border: 1px solid #005c8b; /* Couleur de la bordure du bouton */
            border-radius: 4px; /* Bordure arrondis du bouton */
            box-shadow: 0 -1px 0 #b9b9b9 inset; /* Ombre de la bordure du bouton */
            font-family: Trebuchet MS; /* Police d'écriture du bouton */
            font-size: 14px; /* Taille de la police d'écriture du bouton */
            font-weight: 700; /* Taille de la police grasse du bouton */
            height: 29px; /* Hauteur des boutons */
            text-transform: initial; /* Pour mettre une majuscule aux noms des boutons */
        }
    a.mainmenu{color:#C6B6D1;}
    a.mainmenu{font-size:14px;}
    a.mainmenu[href="/search"] {
    display: none !important; }
a[href="/groups"] {display:none;} /*retrait du lien "Groupes" */
    .edited-message {
      display: none;
    }
    .boutonhautbas {
        bottom: 40px;
        right: 20px; /* remplacez right par left pour afficher les boutons à gauche */
        position: fixed;
        z-index: 100;
    }
 
.bouhautbas
{
bottom: 220px;
position: fixed;
right: 0px;
z-index: 100;
width: 100px;
}
.post .ion-thumbsup, .post .ion-thumbsdown {
  display: none;
}
.post .fa_like {
  background: #ea6cf0;
}
.post .fa_dislike {
  background: #f37804;
}

Et pour la section Template - index-body :

Code:

{JAVASCRIPT}

<!-- BEGIN switch_user_login_form_header -->
<div class="panel">
   <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <div class="user_login_form center">
         <input placeholder="{L_USERNAME}" class="inputbox fl_username" type="text" size="10" name="username" />
         <input placeholder="{L_PASSWORD}" class="inputbox fl_password" type="password" size="10" name="password" />
         <br />
         <label>{L_AUTO_LOGIN}: <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
         {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
            <!-- BEGIN switch_social_login -->
            <div class="social_btn">
                <!-- BEGIN fb_connect -->
                <div class="fb-login-button"></div>
                <!-- END fb_connect -->
                <!-- BEGIN topicit_connect -->
                <div class="ti-connect"></div>
                <!-- END topicit_connect -->
            </div>
            <!-- END switch_social_login -->
      </div>
   </form>
</div>
<!-- END switch_user_login_form_header -->

<!-- BEGIN message_admin_index -->
   <div class="panel introduction">
      <!-- BEGIN message_admin_titre -->
         <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
      <!-- END message_admin_titre -->

      <!-- BEGIN message_admin_txt -->
         <div class="mes-txt">{message_admin_index.message_admin_txt.MES_TXT}</div>
      <!-- END message_admin_txt -->
   </div>
<!-- END message_admin_index -->

{CHATBOX_TOP}

{BOARD_INDEX}

<!-- BEGIN disable_viewonline -->
   <div class="block">
      <!-- BEGIN switch_viewonline_link -->
         <div class="h3"><a href="{U_VIEWONLINE}" rel="nofollow"><i class="ion-stats-bars"></i>{L_WHO_IS_ONLINE}</a></div>
      <!-- END switch_viewonline_link -->

      <!-- BEGIN switch_viewonline_nolink -->
         <div class="h3"><i class="ion-stats-bars"></i>{L_WHO_IS_ONLINE}</div>
      <!-- END switch_viewonline_nolink -->

      {TOTAL_USERS_ONLINE}<br />
      {RECORD_USERS}

      {LOGGED_IN_USER_LIST}

      {L_ONLINE_USERS}
      {L_CONNECTED_MEMBERS}<br />

      {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}

      <!-- BEGIN switch_group_legend -->
      <div class="block-footer"><strong>{LEGEND}:</strong>&nbsp;{GROUP_LEGEND}</div>
      <!-- END switch_group_legend -->
   </div>

   <!-- BEGIN switch_chatbox_activate -->
      <div class="block">
         <div class="h3">
            <a href="{S_JOIN_CHAT}" target="ChatBox"><i class="ion-ios-chatboxes-outline"></i>{CHATBOX_NAME}</a>
            <!-- BEGIN switch_chatbox_popup -->
               <div id="chatbox_popup"></div>
               <script type="text/javascript">
                  insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
               </script>
            <!-- END switch_chatbox_popup -->
         </div>
         {TOTAL_CHATTERS_ONLINE}:&nbsp;{CHATTERS_LIST}
      </div>
   <!-- END switch_chatbox_activate -->
<!-- END disable_viewonline -->

{CHATBOX_BOTTOM}

<!-- BEGIN switch_user_login_form_footer -->
<div class="panel">
   <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <div class="user_login_form center">
         <input placeholder="{L_USERNAME}" class="inputbox fl_username" type="text" size="10" name="username" />
         <input placeholder="{L_PASSWORD}" class="inputbox fl_password" type="password" size="10" name="password" />
         <br />
         <label>{L_AUTO_LOGIN}: <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
         {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
         <!-- BEGIN switch_social_login -->
            <div class="social_btn">
                <!-- BEGIN fb_connect -->
                <div class="fb-login-button"></div>
                <!-- END fb_connect -->
                <!-- BEGIN topicit_connect -->
                <div class="ti-connect"></div>
                <!-- END topicit_connect -->
            </div>
            <!-- END switch_social_login -->
      </div>
   </form>
</div>
<!-- END switch_user_login_form_footer -->

<!-- BEGIN switch_legend -->
<ul id="picture_legend">
   <li><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" loading="lazy" />{L_NEW_POSTS}</li>
   <li><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" loading="lazy" />{L_NO_NEW_POSTS}</li>
   <li><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" loading="lazy" />{L_FORUM_LOCKED}</li>
</ul>
<!-- END switch_legend -->

{AUTO_DST}

Je ne sais pas trop si c'est bien ce que vous souhaitiez ?  

Mon souhait serait de pouvoir mettre le décompte + une image anniv + un audio sur la page d'accueil, que ce soit via "page d'accueil" ou via "annonce", et que tout le monde puisse voir la même chose, version pc ou version mobile...

[Toryudo]

Alors, à priori, ça fonctionne au niveau du message d'accueil, à la fois sur le site et sur la version mobile.
Si je découpe la demande en trois partie :

1) Pour ajouter une image dans la page d'accueil, vous pouvez mettre ce code (changer juste le lien), un peu plus simple que celui que vous avez actuellement :

Code:

<div align="center">
   <img src="https://i.servimg.com/u/f97/20/45/63/81/ezgif-11.gif" />
</div>

2) Pour ajouter le décompte, vous avez juste à ajouter ce code, au-dessus ou en dessous :

Code:

<div align="center">
    <img src="https://gen.sendtric.com/countdown/or6pl330lv" alt="decompte" />
</div>

3) Et pour ajouter le fichier audio, vous avez juste à ajouter ce code :

Code:

<div align="center">
    <audio controls="controls"><source type="audio/mp3" src="https://www.auboutdufil.com/get.php?fla=https://download.tuxfamily.org/lacrymosa/albums/eponymeI/04-petit_pantin_au_coeur_de_glace-eponyme_I-laei-copyleft.mp3" /></audio>
</div>

C'est à chaque fois le lien contenu dans src que vous devez modifier pour avoir une autre image ou un autre fichier audio, normalement, ce n'est pas plus compliqué que ça.

[Lalittle]

Merci Toryudo !

Excusez-moi, il y avait en fait dans ma demande initiale la question du cadre et du fond pour le message en page d'accueil.
Quand j'avais testé, je m'étais retrouvée avec un grand cadre jaune autour du compteur (je suppose que ce sera la même chose en mettant l'image et l'audio avec).
Et ça prend énormément de place de surcroît !

Il se fait que je n'ai pas la moindre idée de où et comment modifier/adapter le cadre et la couleur !

Merci encore, vraiment.

EDIT : j'ai testé ce matin pendant que personne n'est sur le forum.
En allant dans "images et couleurs" et en modifiant la "couleur de fond 2" j'enlève effectivement le jaune du cadre.
Cependant, ça a une incidence sur les cadres de conversations dans les discussions, puisque j'avais réglé des couleurs différentes pour plus de lisibilité.

Serait-il possible d'agir via un code sur la couleur de fond du cadre d'accueil uniquement ? Et avoir également la possibilité d'en régler les dimensions ?
Le fait est que je souhaite désormais l'utiliser en lieu et place du système d'annonce que j'utilisais jusqu'à présent afin que tous les membres aient accès aux mêmes informations.
J'avais testé il y a quelque temps (sur votre précieux conseil), mais la présence du cadre d'accueil m'avait découragée...

J'ai testé également ceci :
- désactiver les annonces
- mettre le décompte en page d'accueil
- sur la version mobile, retirer l'image que j'avais mise en logo pour que ça ne prenne pas trop de place... je vérifie sur mon iphone et je constate la présence d'un cadre noir à la place :



J'avoue que je n'y comprends rien

[Toryudo]

Bonjour !

Alors, changer la taille du cadre, non, mieux vaut la laisser telle quelle.
Par contre, il est possible de faire en sorte que le cadre (fond + bordures) ne soit pas visible du tout, et je pense que ça vous conviendrait tout autant. Voici le CSS à ajouter dans votre CSS personnalisé pour obtenir ce résultat (version web normale et mobile) :

Code:

.panel.introduction, .box.introduction {
  background: none;
  border: none;
  box-shadow: none;
}

Pour la présence du cadre noir, moi, je vois encore une image à l'intérieur. Elle doit encore être quelque part, il faudra la supprimer pour qu'il soit plus propre !

[Lalittle]

Aaaaaah MERCIIIIIII !!!
C'est merveilleux !
J'avais essayé de bricoler mille trucs (même écrire un code alors même que je n'y connais rien ) sans succès...
L'image je l'avais remise ce matin en désespoir de cause, trouvant ce cadre noir vraiment trop laid !!!
Je suis super contente !!!
Merci encore (je me répète, je sais ^^)