Pub - 2 colonnes, stats & blocs libres

    Coucou

   La Tambouille des Râleuses te met à disposition sa fiche de publicité actuelle en libre-service. Celle-ci contient :
   • une colonne de gauche qui rassemble les statistiques et des liens rapides ;
   • une colonne de droite qui contient la présentation du forum ainsi que des blocs personnalisables.
   
   Voici le visuel :
   

Spoiler:

    Ce qui est modifiable :
   • Les couleurs,
   • les images,
   • Les textes & liens.

   
   Voici la CSS complète pour cette publicité :

   

Code:

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Poppins:wght@400;600;800&display=swap');

div.pub-tamb {
 --typo__title: 'Anton', sans-serif;
 --typo__main: 'Poppins', sans-serif;
 --text__color: #051c2b;
 --link__color: #3e82b9;
 --link__hover: #1f5f8d;

 --bkg: #fcc566;
 --border__color: #603813;
 --pattern: url('https://pvereecken.fr/tambouille/design-ete/summer-pattern.jpg');

 --deco1: url('https://pvereecken.fr/tambouille/design-ete/deco-cate1.png');
 --deco1_height: 50px;
 --deco1_width: 50px;

 --header__bkg: var(--bkg);
 --blk__bkg: #fcd483;

 background: var(--bkg);
 color: var(--text__color) !important;
 font-family: var(--typo__main);
 font-size: 12px !important;
 line-height: 1.2 !important;
 margin: 0 auto;
 max-width: 700px;
 padding-bottom: 20px;
 width: 100%;
}

div.pub-tamb * {
 box-sizing: border-box;
}

div.pub-tamb p,
div.pub-tamb ul,
div.pub-tamb li {
 margin: 0;
}

div.pub-tamb .tamb-d-flex {
 display: flex;
}

div.pub-tamb .tamb-mt-5 {
 margin-top: 5px;
}

div.pub-tamb a {
 color: var(--link__color) !important;
 font-weight: bold;
 text-decoration: none;
}

div.pub-tamb a:hover {
 color: var(--link__hover) !important;
 text-decoration: underline;
}

div.pub-tamb .tamb-ul {
 margin: 0;
 padding: 0;
}

div.pub-tamb .tamb-ul li {
 list-style: none;
 margin-bottom: 10px;
}

div.pub-tamb .tamb-ul li.tamb-stats {
 margin-bottom: 4px;
}

div.pub-tamb .tamb-ul li:before {
 content: '• ';
 display: inline-block;
 margin-right: 4px;
}

div.pub-tamb .tamb-header {
 background: var(--header__bkg);
}

div.pub-tamb .tamb-header + .tamb-d-flex {
 background: var(--bkg);
}

div.pub-tamb .tamb-sidebar {
 flex: 0 0 180px;
 padding: 0 0 0 15px;
}

div.pub-tamb .tamb-sidebar .tamb-wrapper-sidebar .tamb-titre {
 color: var(--border__color);
 font-family: var(--typo__title);
 font-size: 16px;
 font-weight: bold;
 margin: 15px 0 10px;
 text-align: center;
}

div.pub-tamb .tamb-sidebar .tamb-wrapper-sidebar .blk-link {
 border-top: 1px solid var(--link__color);
 margin: 10px 0;
 text-align: center;
}

div.pub-tamb .tamb-sidebar .tamb-wrapper-sidebar .blk-link .tamb-titre {
 margin-top: 5px;
}

div.pub-tamb .tamb-wrapper {
 background: var(--bkg);
 margin: 10px auto;
 padding: 10px;
 flex: 1 1 auto;
}

div.pub-tamb .tamb-wrapper .tamb-blk {
 border: 1px solid var(--border__color);
 background: var(--blk__bkg);
 margin: 10px auto 20px;
 width: 96%;
}

div.pub-tamb .tamb-wrapper .tamb-blk .tamb-titre {
 align-items: center;
 background: transparent var(--pattern) repeat center 0;
 color: var(--border__color);
 display: flex;
 font-family: var(--typo__title);
 font-size: 16px;
 font-weight: bold;
 height: 40px;
 padding: 0 15px;
 position: relative;
 z-index: 0;
}

div.pub-tamb .tamb-wrapper .tamb-blk .tamb-titre:before,
div.pub-tamb .tamb-wrapper .tamb-blk .tamb-titre:after {
 content: '';
 display: block;
 position: absolute;
}

div.pub-tamb .tamb-wrapper .tamb-blk .tamb-titre:before {
 background: var(--blk__bkg);
 opacity: 0.6;
 z-index: -1;

 bottom: 0;
 top: 0;
 left: 0;
 right: 0;
}

div.pub-tamb .tamb-wrapper .tamb-blk .tamb-titre:after {
 background: transparent var(--deco1) no-repeat 0 0;
 background-size: contain;
 height: var(--deco1_height);
 top: -10px;
 right: -12px;
 width: var(--deco1_width);
}

div.pub-tamb .tamb-wrapper .tamb-blk .tamb-content {
 padding: 10px;
}

div.pub-tamb
 .tamb-wrapper
 .tamb-blk[data-tamb-info-blk='stats-tuto-ls']
 .tamb-content
 .tamb-ul {
 flex: 1 1 auto;
}

div.pub-tamb
 .tamb-wrapper
 .tamb-blk[data-tamb-info-blk='stats-tuto-ls']
 .tamb-content
 .tamb-ul:first-child {
 flex: 0 0 200px;
}

div.pub-tamb .tamb-copy{
 font-size: 11px;
 margin-top: 30px;
 text-align: center;
}


    Pense à la personnaliser en lisant la suite du message.

   
   Pas besoin d'éditer toute la CSS pour changer les deux typos de cette publicité (une pour les titres et une pour les textes). Il te suffit d'aller sur Google fonts, de choisir les typos qui te plaisent puis  :

   1. de remplacer le lien d'import dans la CSS par le tien :
   

Code:

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Poppins:wght@400;600;800&display=swap');

   2. de changer les noms de font-family dans les variables par les tiennes :
   

Code:


    --typo__title: 'Anton', sans-serif;
 --typo__main: 'Poppins', sans-serif;
    

   Ici, on changera donc 'Anton', sans-serif et 'Poppins', sans-serif.

    Si tu ne sais pas comment utiliser Google Fonts, je t'invite à jeter un oeil à ce tutoriel.

   
   Tout comme pour les polices, il n'est pas nécessaires d'aller mettre les mains dans toutes la CSS pour modifier les couleurs de la publicité. Il suffit de changer les différentes variables :

   

Code:

--text__color: #051c2b;
 --link__color: #3e82b9;
 --link__hover: #1f5f8d;

 --bkg: #fcc566;
 --border__color: #603813;
 --pattern: url('https://pvereecken.fr/tambouille/design-ete/summer-pattern.jpg');

 --deco1: url('https://pvereecken.fr/tambouille/design-ete/deco-cate1.png');
 --deco1_height: 50px;
 --deco1_width: 50px;

 --header__bkg: var(--bkg);
 --blk__bkg: #fcd483;

   Les noms sont logiquement assez parlant, mais je vais tout de même les présenter un peu :

   • --text__color = la couleur du texte
   • --link__color = la couleur des liens
   • --link__hover = la couleur des liens survolés
   • --bkg = la couleur de fond de la publicité
   • --border__color = la couleur des bordures
   • --pattern = l'image de fond des titres
   • --deco1 = l'image décoratif des blocs (ici, c'est un coquillage)
   • --deco1_height = la hauteur de l'image décorative
   • --deco1_width = la largeur de l'image décorative
   • --header__bkg = la couleur de fond du header de la pub (l'image tout en haut) Ici, nous avons utilisé la même couleur que le fond et nous avons directement appelé la variable var(--bkg), cependant, tu peux sans souci utilisé une couleur hexadécimale, ce qui donnerait --header__bkg: #e26e26;
   • --blk__bkg = la couleur de fond des blocs

   
   Pour que ce soit plus simple, je te conseille de suivre ce tutoriel pour héberger ta CSS sur dropbox et ainsi alléger ta fiche de publicité

   Il te suffira ensuite de l'appeler dans le HTML en remplaçant ceci
   

Code:

https://dl.dropboxusercontent.com/s/3c2xmoss6q7dfox/style-pub.css

   par le code que tu auras récupéré sur Dropbox.

   
Voici le code de la pub :

Code:

<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/3c2xmoss6q7dfox/style-pub.css"/><div class="wrapper-pub"><!--
    --><div class="pub-tamb"><!--
          --><div class="tamb-header"><!--
        --><div class="tamb-wrapper-header"><!--
            --><a href="https://tambouille-raleuses.forumactif.com/" target="_blank"><!--
                --><img src="https://pvereecken.fr/tambouille/design-ete/tr-bann-pub.png" alt="La Tambouille des Râleuses"><!--
            --></a><!--
        --></div><!--
    --></div><!--
    --><div class="tamb-d-flex"><!--
      --><div class="tamb-sidebar"><!--
          --><div class="tamb-wrapper-sidebar"><!--
              --><div class="tamb-blk"><!--
                  --><div class="tamb-titre">Quelques chiffres</div><!--
                  --><div class="tamb-content"><!--
                      --><ul class="tamb-ul"><!--
                          --><li class="tamb-stats">Ouverture <strong>30 mars 2019</strong></li><!--
                          --><li class="tamb-stats"><strong class="">104</strong> membres</li><!--
                          --><li class="tamb-stats"><strong class="">13841</strong> messages</li><!--
                      --></ul><!--
                  --></div><!--
              --></div><!--
      
              --><div class="blk-link"><div class="tamb-titre">Accès rapide</div><!--

              --><div align="left"><!--
              -->► <a href="#">Lien</a>
              ► <a href="#">Lien</a>
              ► <a href="#">Lien</a>
              ► <a href="#">Lien</a><!--
              --></div></div><!--

              --><div class="blk-link"><div class="tamb-titre">Rejoins-nous !</div><!--

              --><a href="https://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="https://2img.net/h/pvereecken.fr/tambouille/50x50-logo.png" alt="Logo 50x50 - La Tambouille des Râleuses"></a>  <a href="https://discord.gg/pdFK8sN" target="_blank" title="Rejoins-nous sur le discord !"><img src="https://i.servimg.com/u/f71/20/05/19/39/discor11.png" alt="Logo 50x50 - Discord"></a></div><!--
          --></div><!--
      --></div><!--    

      --><div class="tamb-wrapper"><!--
        --><div>Présentation du forum - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga officia beatae hic harum laborum consequatur neque labore aperiam minima aliquam sint, a, consectetur maiores tempora quis perspiciatis iure praesentium nemo!</div><!--

        --><div><div class="tamb-blk"><div class="tamb-titre">Titre du bloc</div><!--
        --><div class="tamb-content"><!--
        -->Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias dolorum laboriosam quam ipsam vitae nobis officia consectetur tempore repudiandae ipsa, quo aspernatur eaque dolore consequuntur quasi perferendis veniam autem in?
        Consequuntur laborum, laudantium repellendus beatae dignissimos maiores facere tenetur nihil commodi odio, dicta reprehenderit ipsam incidunt aut minima unde aperiam dolorum fugiat iste. Pariatur sunt temporibus dignissimos consequatur incidunt? Deleniti!<!--
        --></div></div></div><!--
        
        --><div><div class="tamb-blk"><div class="tamb-titre">Titre du bloc</div><!--
        --><div class="tamb-content"><!--
        -->Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias dolorum laboriosam quam ipsam vitae nobis officia consectetur tempore repudiandae ipsa, quo aspernatur eaque dolore consequuntur quasi perferendis veniam autem in?
        Consequuntur laborum, laudantium repellendus beatae dignissimos maiores facere tenetur nihil commodi odio, dicta reprehenderit ipsam incidunt aut minima unde aperiam dolorum fugiat iste. Pariatur sunt temporibus dignissimos consequatur incidunt? Deleniti!<!--
        --></div></div></div><!--
          

        --><div><div style="text-align: center"><!--<br />  --><p><a href="https://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations.">https://tambouille-raleuses.forumactif.com</a></p><!--<br />--></div></div><!--

      --></div><!--
  --></div><!--
  --> <p class="tamb-copy">©Fiche réalisée par <a href="https://tambouille-raleuses.forumactif.com" target="_blank">La Tambouille des Râleuses</a></p><!--
--></div>
  </div>

Ici, tu as quelques éléments à changer. Voyons les un à un.

Etant donné que ton code va être posté sur un forum, tu peux sans aucun problème utiliser le bbcode


Il s'agit de ce code

Code:

<a href="https://tambouille-raleuses.forumactif.com/" target="_blank"><!--
                --><img src="https://pvereecken.fr/tambouille/design-ete/tr-bann-pub.png" alt="La Tambouille des Râleuses"><!--
            --></a>

   Tu as 3 éléments à remplacer :
• le lien du forum (href)
• le lien de l'image (src)
• le alt reprenant le nom de ton forum


Il s'agit de cette partie :

Code:

<ul class="tamb-ul"><!--
                          --><li class="tamb-stats">Ouverture <strong>30 mars 2019</strong></li><!--
                          --><li class="tamb-stats"><strong class="">104</strong> Tambouilleurs</li><!--
                          --><li class="tamb-stats"><strong class="">13841</strong> messages</li><!--
                      --></ul>

Je ne pense pas que tu aies besoin de plus d'explication


Pense à les remplacer pour mettre en avant des zones de ton forum.
href = l'url de ton lien

Si tu dois ajouter un lien, voici le code à utiliser :

Code:

► <a href="#">Lien</a>

Il s'agit de cette partie :

Code:

<a href="https://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="https://2img.net/h/pvereecken.fr/tambouille/50x50-logo.png" alt="Logo 50x50 - La Tambouille des Râleuses"></a> &nbsp;<a href="https://discord.gg/pdFK8sN" target="_blank" title="Rejoins-nous sur le discord !"><img src="https://i.servimg.com/u/f71/20/05/19/39/discor11.png" alt="Logo 50x50 - Discord"></a>

Le principe est le même que pour la bannière :
• href = le lien
• title = le nom du site / forum sur lequel le lien renvoie
• src = le lien de l'image
• alt = le texte qui s'affichera si ton image se charge mal

Si tu veux supprimer une des images, tu dois supprimer la balise "a" et tout ce qu'elle contient. Par exemple :

Code:

<a href="https://discord.gg/pdFK8sN" target="_blank" title="Rejoins-nous sur le discord !"><img src="https://i.servimg.com/u/f71/20/05/19/39/discor11.png" alt="Logo 50x50 - Discord"></a>

C'est de ce texte dont il s'agit

Code:

Présentation du forum - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga officia beatae hic harum laborum consequatur neque labore aperiam minima aliquam sint, a, consectetur maiores tempora quis perspiciatis iure praesentium nemo!

Voila la structure d'un bloc libre :

Code:

--><div><div class="tamb-blk"><div class="tamb-titre">Titre du bloc</div><!--
        --><div class="tamb-content"><!--
        -->Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias dolorum laboriosam quam ipsam vitae nobis officia consectetur tempore repudiandae ipsa, quo aspernatur eaque dolore consequuntur quasi perferendis veniam autem in?
        Consequuntur laborum, laudantium repellendus beatae dignissimos maiores facere tenetur nihil commodi odio, dicta reprehenderit ipsam incidunt aut minima unde aperiam dolorum fugiat iste. Pariatur sunt temporibus dignissimos consequatur incidunt? Deleniti!<!--
        --></div></div></div><!--

Ici aussi, je ne suis pas certaine qu'il y ait besoin de plus d'explications


   Le code HTML fourni possède de nombreux commentaires (<-- -->). Il ne faut surtout pas les supprimer. Ils permettent d'aérer le code en ajoutant des retours à la ligne qui ne seront pas pris en compte dans le rendu visuel de la publicité (plus d'infos à ce sujet par ici).

   

---

    Merci de ne pas supprimer le copyright

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