[AwesomeBB] Taille de la police en bas de l'index

[orpheus]

Détails techniques

Version du forum : AwesomeBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://sailormoon-france.forumactif.com/

Description du problème

Bonjour à tous !

Voila, je fais actuellement quelques tests sur un forum qui tourne sous AwesomeBB et j'aurais aimé savoir comment réduire la taille de la police d'écriture en bas (je parle du nom du dernier inscrit qui s'affiche en gros, le chiffre d'inscrit/messages publiés).

J'ai tenté ce code qui fonctionne sous ModernBB :

Code:

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

Sans succès sous AwesomeBB.

Je souhaiterai également que tous les textes soit aligné sur une seule ligne.
Merci d'avance pour votre aide.

[orpheus]

up !

[chattigre]

Bonjour
Pour la première partie de la question, ceci devrait fonctionner :

Code:

#forum-statistics strong {
  font-size: inherit;
  vertical-align: 0;
}

#forum-statistics > div {
  line-height: normal;
}

Par "alignés sur une seule ligne", c'est à dire afficher les trois "blocs" en une seule ligne ?

Bonne journée

[*Splash*]

Je souhaiterai également que tous les textes soit aligné sur une seule ligne.
Merci d'avance pour votre aide.

Salut
En général il est bien d'ouvrir un sujet par question, au niveau de la recherche c'est mieux pour d'éventuelles autres demandes.

Ce genre d'affichage te conviendrais ?

[orpheus]

Je te remercie pour ton aide Chattigre, je confirme que ton code fonctionne parfaitement

Splash : J'en suis conscient mais étant donné que les deux problèmes sont tout de même liés, je me voyait mal ouvrir deux sujets juste pour une histoire d'alignement, peut-être ai-je mal fait ...

Voici ce que je souhaiterai par "aligné sur une seule ligne" :


Car actuellement voici ce que j'ai  :

[*Splash*]

Regarde ce tuto

[orpheus]

Ah ce n'est pas tout à fait ce que je voulais faire mais ça rend plutôt bien, merci pour le tuto Splash !

Une dernière question (désolé pour le HS), est-ce qu'il est possible de marquer le nom du dernier membre à droite plutôt qu'à gauche ? Car sur ton tuto par exemple, c'est marqué « Testmail Nouveau Membre ». Moi, je préférais qu'il soit inscrit : « Nouveau Membre Testmail ».

[Invité]

Hello orpheus,

alors pour mettre cette partie à droite, il va falloir intervenir dans le template overall_footer_begin :
Affichage/Templates/Général/overall_footer_begin

Recherches ceci:

Code:

 
<div>
                <div>{NEWEST_USER}</div>
            </div>


Remplaces par ceci:

Code:

 <div class="M14_NEWEST_USER">
                <div>{NEWEST_USER}</div>
            </div>


Penses a enregistrer puis à valider en cliquant respectivement sur puis


Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajoutes ceci et joue avec les valeurs pour obtenir satisfaction:

Code:


.M14_NEWEST_USER
{
width:54% !important;
min-width: 750px;
 
}
.M14_NEWEST_USER div
{
left:350px !important;
right: 10px!important;
}

.M14_NEWEST_USER div a[href^="/u"]
{
margin-left:20px; 
}


Penses à cliquer sur le bouton


Puis le script qui va changer le texte désiré:


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.
Cocher sur l'index.


Déposes ceci:

Code:


$(function(){
$('.M14_NEWEST_USER div').each(function(){
$(this).html($(this).html().replace(/L'utilisateur enregistré le plus récent est/g,"Nouveau Membre Testmail"));});
});



Penses à cliquer sur le bouton VALIDER


Et voilou .

a++

[orpheus]

Coucou Milouze et merci pour ton aide

J'ai suivi la procédure mais à priori, ça n'a pas l'air de marcher

Dans le doute, je te transmet tout ce que j'ai modifié, peut-être que le problème vient de là

CSS:

index_body:

overall_footer_begin:

[Invité]

Hello orpheus,

je ne vois pas de changement ( class ajoutée ) sur le forum cité dans ton premier message:

https://sailormoon-france.forumactif.com/

a++

[orpheus]

Tu entends quoi par "class ajoutée" ?
Car j'ai peut-être loupé un truc dans la procédure mais j'ai beau me relire, je vois pas quoi
Et je confirme que le forum que tu cites est bien celui sur lequel je souhaite effectuer des modifications.

[*Splash*]

Salut

Tu entends quoi par "class ajoutée" ?

La class ajoutée c'est ceci dans le template :

Code:

 <div class="M14_NEWEST_USER">
                <div>{NEWEST_USER}</div>
            </div>

Par ta question je me demande si tu as bien publié ton template après avoir fait les modifications ?

[orpheus]

Je viens d'aller vérifier pour être sur, il me semble ne rien avoir oublié :



Après, je viens juste de remarquer un truc mais dans le javascript :

Code:

 
$(function(){
$('.M14_NEWEST_USER div').each(function(){
$(this).html($(this).html().replace(/L'utilisateur enregistré le plus récent est/g,"Nouveau Membre Testmail"));});
});
 

Milouze a écrit le texte que j'avais donné en exemple "Nouveau Membre Testmail", est-ce que le problème ne viendrait pas de là ?
Et si oui, il faudrait mettre quoi à la place ?

[Invité]

Hello orpheus,

il faudrait voir a donner les bonnes informations dès le départ car ta capture sur ton message initial montre les statistiques présentes en bas de page sur la version AmesomeBB :



Alors qu'il faut modifier un code html que tu as ajouté qui  est présent dans le template mentionné.

Donc, tu peux supprimer tout ce que je t'ai donné ici:

https://forum.forumactif.com/t404783-awesomebb-taille-de-la-police-en-bas-de-l-index#3375663

Dans le dit template, tu as ajouté ce code html:

Code:

   <div class="global-stat-bar">
    <div>
        <span>{TOTAL_POSTS}</span>
        <script>$('script:last').prev().text(function(_,o){return o.match(/[0-9]+/)[0]})</script>
        MESSAGES
    </div>
    <div>
        <span>{TOTAL_USERS}</span>
        <script>$('script:last').prev().text(function(_,o){return o.match(/[0-9]+/)[0]})</script>
        MEMBRES
    </div>
    <div>
        <span>{NEWEST_USER}</span>
        <script>$('script:last').prev().html(function(_,o){return o.match(/<.*>/)[0]})</script>
        NOUVEAU MEMBRE
    </div>
</div>


Il faut modifier "NOUVEAU MEMBRE" par le texte souhaité "NOUVEAU MEMBRE TESTMAIL" .


On peut aussi le faire sans script et agir avec la css comme ceci:

Le code html:

Code:

 
<div class="global-stat-bar">
    <div>
      <span class="M14_TOTAL_POSTS">{TOTAL_POSTS} <span class="M14_visible">MESSAGES</span></span>
      
        
    </div>
    <div>
      <span class="M14_TOTAL_USERS">{TOTAL_USERS} <span class="M14_visible">MEMBRES</span></span>
  
        
    </div>
    <div>
      <span class="M14_NEWEST_USER">{NEWEST_USER} <span class="M14_visible">NOUVEAU MEMBRE TESTMAIL </span></span>
      
        
    </div>
</div>


Et la css:

Code:


 /*on mettre une taille de police à 0 sur tout le bloc*/
.global-stat-bar span[class^="M14_"]{font-size:0px;}
/*On impose une taille de police aux balises désrirées*/
.global-stat-bar span[class^="M14_"] strong,.M14_visible{font-size: 1rem!important;}
/*on decale de 5px le texte de droite*/
.M14_visible{margin-left:5px;}
.action-bar-top{
display:none !important;
}
 
.global-stat-bar {
  display: flex;
  width: 100%;
  text-align: center;
  background: #263238;
  font-size:0rem;
}
.global-stat-bar > div {
  flex: 1 1 auto;
  color: white;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.global-stat-bar strong {
  border-radius: 0.3rem;
  background: white;
  color: #263238;
  padding: 0.3rem;
  margin-right: 0.3rem;
}
 
/* on masque les statistiques de la version AwesomeBB */
#forum-statistics {
    display: none;
}


Voir le rendu sur mon fofo de tests:
https://milouze.1fr1.net/

a++

[*Splash*]

Salut Milouze
Pourquoi faire apparaître "Nouveau membre Testmail" alors que ce nouveau membre se nomme maxime60 ?

[orpheus]

Hello orpheus,

il faudrait voir a donner les bonnes informations dès le départ car ta capture sur ton message initial montre les statistiques présentes en bas de page sur la version AmesomeBB :



Alors qu'il faut modifier un code html que tu as ajouté qui  est présent dans le template mentionné.

Attention, si tu as suivi un peu la discussion, de base, je ne souhaitais pas apporter une modification radical à mon forum mais tout simplement réduire les textes sur le bas et tout alignée sur une seule ligne.

Ensuite, Splash ma proposé son tutoriel présent sur Caforum, d'où justement, sur l'une des dernières captures, il y a le fameux texte "Testmail NOUVEAU MEMBRE" (désolé pour les majuscules) mais à aucun moment j'ai souhaité intégré cette phrase sur mon forum, je pensais avoir été clair dans ce message :

Une dernière question (désolé pour le HS), est-ce qu'il est possible de marquer le nom du dernier membre à droite plutôt qu'à gauche ? Car sur ton tuto par exemple, c'est marqué « Testmail Nouveau Membre ». Moi, je préférais qu'il soit inscrit : « Nouveau Membre Testmail ».

Dans tous les cas, je vous remercie tous d'avoir essayé de m'aider.
Je vais tâcher de tester tout ça dans et je classerai le sujet ensuite,
bon week end à tous !