En-tête blocs texte, recrutement, news, partenaires

Bonjour,

Dans ce LS, je te propose une en-tête composée de 4 blocs :
• un bloc texte pour présenter ton forum ;
• un bloc contenant les dernières nouvelles de ton forum (date + texte) ;
• un bloc contenant des logos à mettre en avant ;
• un bloc mettant en avant ton recrutement et un lien pour accéder à la zone pour postuler ou au message mettant en avant les postes.

Voici le visuel :

Spoiler:

Ce qui est modifiable :
• les couleurs ;
• la typo des titres ;
• les images ;
• le texte.

---

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

Voici à quoi il ressemble :

Spoiler:

Ce formulaire te permet :
• d'éditer les couleurs principales (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 images (image de fond de l'en-tête, image de fond des blocs, image de décoration, image de bienvenue) ;
• de changer les logos ;
• d'éditer le texte.

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 code html et de copier/coller le code dans une nouvelle page html en suivant ce tutoriel.

De plus, tu as la possibilité de réutiliser ce formulaire pour mettre à jour ton en-tête. Une fois tes modifications faites et avant de fermer la page , clique sur "sauvegarder le code" 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 modifier ton en-tête, reviens sur la page et sélectionne "ancien code : oui" et copie/colle ta sauvegarde. L'en-tête se mettra à jour et tu pourras l'éditer de nouveau et récupérer le code html & ta sauvegarde.


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

La CSS :

Code:

/*** ----- EN TETE ----- ***/
.wrapper-entete{
 font: normal 15px/20px Tahoma, sans-serif;
}

.wrapper-entete .flex{
  display: flex;
}

.wrapper-entete .typo{
  font-family: 'Kristi', cursive;
}

.wrapper-entete a{
  color: #620019;
  text-decoration: none;
}

.wrapper-entete a:hover{
  color: #24060e;
  cursor: pointer;
}

.wrapper-entete .txt-right{
  text-align: right;
}

.wrapper-entete #logo-et{
  display: inline-block;
  margin-left:  10%;
  position: relative;
  top: 19px;
}

.wrapper-entete #content-et{
  background: #c8c5be url("http://pvereecken.fr/zenpub/zp2017/img/bkg-et.jpg") repeat-y center center;
  background-size: 100% auto;
  padding: 2% 0;
  position: relative;
}

.wrapper-entete #content-et .ligne-et{
  justify-content: space-between;
  margin: 0 10% 1.2% 20%;
  width: 68%;
}

.wrapper-entete h2{
  color: #4e453e;
  font-size: 50px;
  font-weight: normal;
  margin: 0;
  padding:  0;
}

.wrapper-entete .blk-et > div{
  background: url("http://pvereecken.fr/zenpub/zp2017/img/bkg-visu.jpg") no-repeat center center;
  background-size: cover;
  border-bottom: 4px solid #aea9a6;
  border-top: 4px solid #aea9a6;
  box-sizing: border-box;
  margin-top: -5px;
  padding: 3% .8%;
}

.wrapper-entete .blk-et p,
.wrapper-entete .blk-et ul{
  line-height: 1;
}

.wrapper-entete #et-deco{
  background: transparent url('http://pvereecken.fr/zenpub/zp2017/img/deco-et.png') no-repeat 0 100%;
    background-size: contain;
    bottom: 0;
    height: 56%;
    left: 10%;
    position: absolute;
    width: 10%;
}

/* Concept & protégés */

.wrapper-entete #et-concept,
.wrapper-entete #et-proteges{
  width:  55%;
}

/* Nouveautés & recrutement */

.wrapper-entete #et-nouveautes,
.wrapper-entete #et-recrutement{
  width:  41%;
}

.wrapper-entete #et-nouveautes ul{
  list-style: none;
  margin: auto;
  padding: 0;
  width: 96%;
}

.wrapper-entete #et-nouveautes ul li{
  border-left: 2px solid #aea9a6;
  margin-bottom: 3.4%;
  padding-left: 2%;
}

.wrapper-entete #et-nouveautes ul li:first-child{
  border-left: 2px solid #c752d3;
}

 

Le html :

Code:

<link href="https://fonts.googleapis.com/css?family=Kristi" rel="stylesheet">
<div class="wrapper-entete">
 <img src="http://pvereecken.fr/zenpub/zp2017/img/et-bienvenue.png" alt="Bienvenue" id="logo-et">
 <section id="content-et">
 <div class="flex ligne-et">
 <section id="et-concept" class="blk-et">
 <h2 class="typo">Concept du forum</h2>
 <div>
 <p>Ce forum a pour but de <strong>promouvoir</strong> tes forums, sites et blogs très simplement. Tu pourras également bénéficier de <strong>services</strong> tels que des analyses, corrections, commandes graphiques ou de codage. Tu pourras aussi affronter les autres membres dans des <strong>jeux par équipe</strong> mais aussi profiter de leurs conseils & expérience pour améliorer tes pages web.</p>
 <p class="txt-right">Je te souhaite une excellente pub,<br /><em>Le Dhamma du Temple.</em></p>
 </div>
 </section><!-- /et-concept -->
 <section id="et-nouveautes" class="blk-et">
 <h2 class="typo">Nouveautés</h2>
 <div>
 <ul>
 <li><strong>13/11/2017</strong> | Un nouveau <a href="http://zen-pub.forumactif.com/t276-chiffre-mystere-05#2448">Chiffre Mystère</a> est à découvrir</li>
 <li><strong>07/11/2017</strong> | Découvre vite les <a href="http://zen-pub.forumactif.com/t270-top-forum-01#2323">Top Forum</a> de novembre</li>
 <li><strong>03/11/2017</strong> | Les inscriptions pour être le <a href="http://zen-pub.forumactif.com/t261-inscriptions-temple-a-la-une#2203">Temple à la une</a> de décembre sont ouvertes</li>
 </ul>
 </div>
 </section><!-- /et-nouveautes -->
 </div>
 <div class="flex ligne-et">
 <section id="et-proteges" class="blk-et">
 <h2 class="typo">Nos protégés</h2>
 <div class="txt-center">
 <a href="http://triangle-references.forumactif.com" target="_blank"> <img src="https://nsa40.casimages.com/img/2019/03/21/190321062500111933.png" alt="triangle Reference" /> </a>
 <a href="http://triangle-references.forumactif.com" target="_blank"> <img src="https://nsa40.casimages.com/img/2019/03/21/190321062500111933.png" alt="triangle Reference" /> </a>
 <a href="http://triangle-references.forumactif.com" target="_blank"> <img src="https://nsa40.casimages.com/img/2019/03/21/190321062500111933.png" alt="triangle Reference" /> </a>
 </div>
 </section><!-- /et-concept -->
 <section id="et-recrutement" class="blk-et">
 <h2 class="typo">Nous recrutons</h2>
 <div>
 <p>Nous recrutons : 2 gardiens et des conseillers.</p>
 <p><a href="/t6-comment-rejoindre-nos-orateurs">En savoir +</a></p>
 </div>
 </section><!-- /et-nouveautes -->
 </div>
 <div id="et-deco">&nbsp;</div>
 </section><!-- /content-et -->
</div>

 
 

---

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