La tambouille des râleuses
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
-20%
Le deal à ne pas rater :
-20% sur le Lot de 2 écrans PC GIGABYTE 27″ LED M27Q
429 € 539 €
Voir le deal

Aller en bas
Pêpêche
Pêpêche
Mascotte
Messages : 4428

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

Ven 29 Mar 2019 - 17:46

Débutant

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:

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




Si tu ne sais pas coder...

... 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.

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{
 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.




Dernière édition par Miettes le Lun 18 Nov 2019 - 9:22, édité 2 fois
Fleur'
Fleur'
Informations : J'essaie de passer une fois par semaine
Messages : 381
http://ecofriends.forumactif.com/

En-tête blocs texte, recrutement, news, partenaires Empty Re: En-tête blocs texte, recrutement, news, partenaires

Jeu 25 Avr 2019 - 12:57
J'adore! C'Est justement un peu ce que je recherche pour mon forum ^^
Pêpêche
Pêpêche
Mascotte
Messages : 4428

En-tête blocs texte, recrutement, news, partenaires Empty Re: En-tête blocs texte, recrutement, news, partenaires

Jeu 25 Avr 2019 - 14:05
Ravie de voir que ce LS est utile Smile Si tu as des soucis pour le mettre à jour n'hésite surtout pas Smile
Fleur'
Fleur'
Informations : J'essaie de passer une fois par semaine
Messages : 381
http://ecofriends.forumactif.com/

En-tête blocs texte, recrutement, news, partenaires Empty Re: En-tête blocs texte, recrutement, news, partenaires

Ven 26 Avr 2019 - 13:13
Il est pour une version particulière de forum? Car quand je fais le test, j'ai tout sur une seule colonne centrale, et non deux colonnes scratch Mais peut être que je fera mieux de passer commande Smile
Pêpêche
Pêpêche
Mascotte
Messages : 4428

En-tête blocs texte, recrutement, news, partenaires Empty Re: En-tête blocs texte, recrutement, news, partenaires

Ven 26 Avr 2019 - 14:03
Hello Smile

Logiquement, ça marche pour tout. Tu es passé par le formulaire ou tu as modifié le code directement ? Si tu veux, tu peux ouvrir un sujet de demande d'aide pour qu'on le fasse ensemble, du remplissage à l'installer sur ton forum Smile
Contenu sponsorisé

En-tête blocs texte, recrutement, news, partenaires Empty Re: En-tête blocs texte, recrutement, news, partenaires

Revenir en haut
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum
Les coups de ♥ des Râleuses

Post-It des Râleuses