Aller en bas
Miettes
Râleuse
Informations :
► En ligne de 9h à 18h en semaine
Peu présente le reste du temps
----
Idea Viens papoter avec nous sur le discord

Pseudo Discord : Miettes
Messages : 1151
Voir le profil de l'utilisateurhttp://tambouille-raleuses.forumactif.com

En-tête 3 blocs, liens et derniers messages Empty En-tête 3 blocs, liens et derniers messages

le Lun 8 Juil - 17:23

Débutant

En-tête 3 blocs, liens et derniers messages


Hello hello Smile

Dans ce LS, je te propose une en-tête avec :
• 3 blocs de texte (ou image) avec une couleur de fond ;
• 1 bloc de texte sans fond ;
• 2 rangées de liens / boutons ;
• une zone pour mettre le widget des derniers messages.

Voici le visuel :
Spoiler:
En-tête 3 blocs, liens et derniers messages Captur12

Idea Ce LS se base sur une commande.

IdeaCe qui est modifiable :
• Les couleurs,
• l'image de fond,
• les textes.




Si tu ne sais pas coder...

... il y a un formulaire à remplir pour mettre à jour le code. Tu le trouveras ici.

Ce formulaire te permet :
• d'éditer les couleurs (fond, bordures, texte et lien). Mais pour cela, il faudra indiquer les couleurs hexadecimales de celles-ci. Tu peux utliser ce site.
• de modifier les zones de textes et liens ;
• d'indiquer l'url de la page html contenant ton widget (s'aider de ce tutoriel).

Tout au long de ton édition, tu peux visualiser le rendu de tes modification en cliquant sur "prévisualiser : oui" (en activant ou non la prévisualisation, tu ne perdras pas tes modifications ; seul le rafraîchissement de la page supprimera tout).

Une fois que tu as terminé, il te suffit de cliquer sur :
générer la CSS et de copier/coller le code dans la CSS de ton forum ;
générer le HTML et de suivre ce tutoriel pour installer ta PA.

De plus, tu as la possibilité de réutiliser ce formulaire pour mettre à jour la CSS de cette mise en page. Une fois tes modifications faites et avant de fermer la page , clique sur "sauvegarder le code CSS" et copie-colle le code du champ texte. Conserve-le sur ton pc ou sur ton forum (entre balise "code").
Dès que tu veux mettre à jour ta mise en page, reviens sur la page et sélectionne "ancien code : oui" et copie/colle ta sauvegarde. La CSS du message se mettra à jour et tu pourras l'éditer de nouveau et récupérer le code & ta sauvegarde.

Si tu te débrouilles en codage...

... voilà le code de base à modifier comme bon te semble. Smile

La CSS :
Code:
/*** ----- EN TETE ----- ***/
  #wrapper-entete{
    background: #0A0A0A url('https://i.servimg.com/u/f25/18/99/59/08/3a7e6110.jpg') repeat center center;
    margin: 20px auto;
    padding: 10px 0;
  }

  #wrapper-entete .d-flex{
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }

  /* Scrollbar (uniquement pour chrome & firefox) */
  ::-webkit-scrollbar {
    width: 4px;
  }

  ::-webkit-scrollbar-track {
    background: #969393;
  }
 
  ::-webkit-scrollbar-thumb {
    background: #3c3737;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }

  /* Liens */
  #wrapper-entete a{
    color: #ececec;
    text-decoration: none;
  }

  #wrapper-entete a:hover{
    color: #ececec;
    text-decoration: underline;
  }

  /* Bloc de texte */
  #wrapper-entete .blk-txt{
    background: rgba(10, 10, 10, 0.6);
    border-radius: 20px;
    box-shadow: 3px 3px 3px #000;
    color: #969393;
    margin: 10px auto;
    overflow: hidden;
    padding: 10px;
    width: 90%;
  }

  #wrapper-entete .blk-txt > div{
    height: 80px;
    overflow: auto;
      padding-right: 10px;
      scrollbar-color: #3c3737 #969393;
      scrollbar-width: thin;
  }

  /* Blocs bouton */
  #wrapper-entete .btn-nav {
    margin: auto;
    width: 90%;
  }

  /*** Ligne du bas ***/
  #wrapper-entete #blk-bas{
    margin: auto;
    width: 90%;
  }

  #wrapper-entete .d-flex .blk-txt > div{
    height: 130px;
  }

  #wrapper-entete .d-flex .blk-txt{
    flex: 0 0 25%;
  }

  #wrapper-entete .d-flex #blk-middle{
    padding-top: 10px;
  }

  /* Bloc de mise en avant */
  #wrapper-entete .d-flex #mea{
    color: #969393;
    height: 120px;
    overflow: hidden;
    margin: 10px auto 0;
    width: 70%;
  }

  /* Dernier message */
  #wrapper-entete .d-flex #dernier-msg{
    flex: 0 0 200px;
  }

 

Le HTML :
Code:

    <div id="wrapper-entete">
      <div class="blk-txt">
        <div><div style="text-align: center;">Oyez oyez</div><br>Un monde ravagé par la guerre où de vieilles légendes refont surface. Venez participer à l'aventure et faites vivre le royaume de Sandragon ! Un univers interactif que vous pouvez modifier à tout moment et au background simple et rapide à assimiler qui n'attend que vous pour le faire vivre. Prenez part aux guerres, rebâtissez des cités, tournez-vous vers les Dieux et vénérez-les. Il se pourrait bien qu'ils vous accordent leurs faveurs...</div> 
      </div>
      <div class="btn-nav d-flex"><a href="http://tambouille-raleuses.forumactif.com/" target="_blank" title="Bouton">Bouton</a><br><a href="http://tambouille-raleuses.forumactif.com/" target="_blank" title="Bouton">Bouton</a><br><a href="http://tambouille-raleuses.forumactif.com/" target="_blank" title="Bouton">Bouton</a><br><a href="http://tambouille-raleuses.forumactif.com/" target="_blank" title="Bouton">Bouton</a></div>
      <div class="blk-txt">
        <div><div style="text-align: center;"><b>Un grand merci ♥</b><br></div><br><br>Un grand merci à Mäven et Miettes pour leur aide au codage du forum ! N'hésitez pas à visiter le sien, La tambouille des râleuses.</div>
      </div>
      <div class="d-flex" id="blk-bas">
        <div class="blk-txt">
          <div><div style="text-align: center;"><b>Annonces</b></div><br><br>✦ <b>02.07.19</b> - Lancement du forum prochaine<br>✦ <b>01.07.19</b> - Changement d'adresse du forum<br>✦ <b>01.07.19</b> - Recherche joueurs pour le groupe de la &nbsp;cour</div>
        </div>
        <div id="blk-middle">
          <div class="btn-nav d-flex"><a href="http://sandragon.forumactif.fr/"><img src="https://nsa40.casimages.com/img/2019/07/02/mini_190702054841980856.png"></a><br><a href="http://sandragon.forumactif.fr/"><img src="https://nsa40.casimages.com/img/2019/07/02/mini_190702054841980856.png"></a><br><a href="http://sandragon.forumactif.fr/"><img src="https://nsa40.casimages.com/img/2019/07/02/mini_190702054841980856.png"  =""></a><br><a href="http://sandragon.forumactif.fr/"><img src="https://nsa40.casimages.com/img/2019/07/02/mini_190702054841980856.png"></a><br><a href="http://sandragon.forumactif.fr/"><img src="https://nsa40.casimages.com/img/2019/07/02/mini_190702054841980856.png"></a></div>
          <div id="mea"><div style="text-align: center;">Année 1360</div><br><div style="text-align: center;">Saison : Été </div><br><div style="text-align: center;">Staff : Destiné</div></div>
        </div>
        <div id="dernier-msg" class="blk-txt"><iframe name="Sujets récents" data-ng-src="http://miettes.exprimetoi.net/h7-commande-tambouille-pa-sal-dernier-sujet" height="130px" width="100%" align="center" marginheight="0" frameborder="0" scrolling="no"></iframe></div>
      </div>
    </div>
      <style>.ls-ccp{color:#999;display:block;font-size:11px;font-style:italic;margin:auto;text-shadow:#fff 0 0 4px,#fff 0 0 4px,#fff 0 0 4px,#fff 0 0 4px;text-align:center;width:98%}.ls-ccp a{color:#000;text-decoration:none}.ls-ccp a:hover{color:#999;text-decoration:underline}</style><span class="ls-ccp">En-tête codée par ©<a href="http://tambouille-raleuses.forumactif.com/u1" target="_blank">Miettes</a></span>
 




Idea Que tu utilises le formulaire ou le code "brut", merci de ne pas supprimer le copyright Smile

En cas de souci avec ce LS, n'hésite pas à poser tes questions à la suite de ce message.



Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Le forum a ouvert ses portes le 30 mars 2019.

A l'époque, seules Miettes et Mäven y étaient présentes. A présent, il y a @membres_enregistres@ Tambouilleurs sur le forum. La dernière personne a nous avoir rejoint est @dernier_membre@.

D'ailleurs, les Tambouilleurs sont plutôt bavards. Eh oui, ils ont déjà posté @messages@ messages dont tutoriels et bidules en Libre-service.

Actuellement, il y a @enregistres@ membres connectés,
et @invites@ visiteurs sur La Tambouille

@@membres_connectes?Qui est là ?
@membres_connectes$, @.$Personne n'est en ligne.@@

@@derniers_membres_connectes?Tambouilleurs connectés au cours des 24 dernières heures : @derniers_membres_connectes$, @$Personne n'était là ces dernières heures.@@

  • ► Les groupes :
  • @groupes$
  • @