[Aide Codage] Modification de l'allure des sondages sur ModernBB

Hello! comment ça va ? C'est encore moi !!!

Voila voila, j'aimerai modifier l'allure des sondages sur mon forum , parce que la...c'est vraiment moche !


J'aimerais modifier la couleur de la Question, puis mettre le texte sur une seule ligne car la ça me fait un retours à la ligne alors qu'il y a de la place , et puis mettre le texte en face de la puce de liste car la ça se met en dessous ^^' 

Idem pour la vue des résultats :

La couleur de la question, les réponses avec retour à la ligne et sous la puce... c'est pas beau ! ( et si c'est possible je changerais bien la couleur de la jauge aussi car bleu c'est pas très assorties ^^

Mais je ne sais pas quel template modifier, ni le nom des différentes balise ^^' , pourrais tu me donner un petit coup de pouce  ?

Bisous !!

Coucou

Tout ce qui concerne les sondages se trouve dans PA > Templates > Général

• viewtopic_poll_ballot (affichage)
• viewtopic_poll_result (résultat)

Je te laisse tenter de faire lesmodifs et revenir vers moi si besoin ?

Re coucou ! 
Alors pour changer la CSS de la question, pas de soucis, j'ai trouvé facilement ...
Du coup j'ai ajouter ceci a la CSS, ça ne risque pas d'"interférer" avec d'autre éléments du forum ?

Code:

.content h2.h3, .panel h2.h3
{
color : black;
font-family: Amatic SC;
font-size: 25px;}



par contre je m'arrache les cheveux avec la mise en page des propositions (et pour les résultats j'ai même pas encore essayé ! ) 

J'ai tenté 2/3 trucs mais sans succès ^^:

Code:

<dl compact>
                  <dt class="sondage" compact>{poll_option.POLL_OPTION_CAPTION}</dt>
                  <dd><input type="{poll_option.POLL_TYPE_BUTTON}" name="vote_id[]" value="{poll_option.POLL_OPTION_ID}" />&nbsp;</dd>
               </dl>
               <!-- END poll_option -->

Code:

.dt sondage{width: 100%;}

J'ai tenté dans tous les sens ^^en mettant .dl ... en mettant .sondage dl etc... mais ça ne change rien ^^
J'ai finalement compris que sur la ligne "dl" il y a une parti "dt" et une parti "dd" qui prend tout le reste de la ligne, mais je n'arrive pas à modifier ça...et ce qu'il faut mettre une class pour dt et une pour dd ?

Hello

si tu ne veux pas que ça intérefére, tu peux sans souci ajouter un id dans le template :

* viewtopic_poll_ballot

Code:

<h2 class="left-box h3" id="question-sondage" style="width: 97%;">{POLL_QUESTION}</h2>

* viewtopic_poll_result

Code:

<h2 id="question-sondage">{POLL_QUESTION}</h2>

et du coup, cibler davantages dans la CSS :

Code:

.content h2.h3#question-sondage,
.panel h2#question-sondage{
  color : black;
  font-family: Amatic SC;
  font-size: 25px;
}

------

Concernant les boutons, on va modifier un peu le template en ajoutant une class à l'intitulé et une classe à la zone qui contient la case à cocher ou le bouton radio. Donc dans "viewtopic_poll_ballot", on va remplacer ça

Code:

<!-- BEGIN poll_option -->
          <dl>
            <dt>{poll_option.POLL_OPTION_CAPTION}</dt>
            <dd><input type="{poll_option.POLL_TYPE_BUTTON}" name="vote_id[]" value="{poll_option.POLL_OPTION_ID}" /> </dd>
          </dl>
          <!-- END poll_option -->

par ça

Code:

<!-- BEGIN poll_option -->
          <dl>
            <dt class="sondage-intitule">{poll_option.POLL_OPTION_CAPTION}</dt>
            <dd class="sondage-btn-vote"><input type="{poll_option.POLL_TYPE_BUTTON}" name="vote_id[]" value="{poll_option.POLL_OPTION_ID}" />&nbsp;</dd>
          </dl>
          <!-- END poll_option -->

et dans la CSS on va ajouter ça

Code:


.polls > dl{
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.polls .sondage-intitule,
.polls .sondage-btn-vote{
  float: inherit;
}

.polls .sondage-intitule{
  flex: 1 1 auto;
}

.polls .sondage-btn-vote{
  flex: 0 0 50px;
}


Grâce au display: flex, tout se placera comme il faut

Super ça marche nickel  
Merci beaucoup !!

Hello

Du coup, tout est bon ici ?

Upinou

Tu as vu mon message @MmeFeuillage ?

Hello hello

Bon toujours pas de nouvelles, je classe donc ^^