Bloc de partenaires

---

Coucou :)

Dans ce LS, je te propose un bloc visible sur l'index du forum contenant tes différents partenaires.

Voici le visuel :

Spoiler:

Ce qui est modifiable :
• les couleurs,
• les textes,
• les partenaires (évidemment).

---

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, texte et lien). Mais pour cela, il faudra indiquer les couleurs hexadécimales de celles-ci. Tu peux utiliser ce site ;
• de modifier les textes et liens ;
• d'ajouter, éditer ou supprimer tes partenaires.

Tout au long de ton édition, tu peux visualiser le rendu de tes modifications 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 ton bloc.

De plus, tu as la possibilité de réutiliser ce formulaire pour mettre à jour tout le contenu de ce bloc. 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 mettre à jour ce bloc, 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. :)

• La CSS :

Code:

/***  --- Bloc partenaires --- ***/
     .lsm-wrapper-partenaires{
       background: #0f0e0e;
       bottom: auto;
       color: lightgrey;
       font: normal 12px/16px Georgia;
       left: auto;
       padding: 4px;
       position: fixed;
       text-align: center;
       top: 60px;
       right: 30px;
       width: 160px;
       z-index: 999;
     }

     .lsm-wrapper-partenaires .flex{
       display: flex;
       align-items: stretch;
       justify-content: space-between;
       flex-wrap: wrap;
     }

     .lsm-wrapper-partenaires h2,
     .lsm-wrapper-partenaires > a{
       color: #d97121;
       font-weight: bold;
       padding: 0;
       text-align: center;
       text-transform: uppercase;
     }

     .lsm-wrapper-partenaires h2{
       font-size: 18px;
       margin: 4px 0;
     }

     .lsm-wrapper-partenaires > a{
       font-size: 12px;
       display: inline-block;
       margin: 4px;
       text-decoration: none;
       transition: all 0.35s ease;
       -webkit-transition: all 0.35s ease;
     }

     .lsm-wrapper-partenaires > a:hover,
     .lsm-wrapper-partenaires .flex a:hover{
       color: lightgrey;
       filter: grayscale(1);
       -webkit-filter: grayscale(1);
       transition: all 0.35s ease;
       -webkit-transition: all 0.35s ease;
     }

     .lsm-wrapper-partenaires .flex a{
       background: #d97121;
       display: inline-block;
       margin: 2px 0;
       height: 35px;
       width: 35px;
       transition: all 0.35s ease;
       -webkit-transition: all 0.35s ease;
     }

     .lsm-wrapper-partenaires .flex a img{
       display: block;
       height: 35px;
       width: 35px;
     }

    /* Copyright */
     .lsm-ccp{
       color: lightgrey;
       display: block;
       font-size: 8px;
       font-style: italic;
       margin: auto;
       text-align: center;
       width: 98%;
     }

     .lsm-ccp a{
       color: lightgrey;
       text-decoration: none;
     }

     .lsm-ccp a:hover{
       color: #d97121;
       text-decoration: underline;
     }
       

• Le HTML :

Code:

<div class="lsm-wrapper-partenaires">
    <h2>Nos partners</h2>
    <div class="flex">
    <a href="http://tambouille-raleuses.forumactif.com" target="_blank"><img src="http://pvereecken.fr/tambouille/50x50-logo.png" alt="La Tambouille des Râleuses" /></a>
    <a href="#" target="_blank"></a>
    <a href="#" target="_blank"></a>
    <a href="#" target="_blank"></a>
    <a href="#" target="_blank"></a>
    <a href="#" target="_blank"></a>
    <a href="#" target="_blank"></a>
    <a href="#" target="_blank"></a>
    <a href="#" target="_blank"></a>
    <a href="#" target="_blank"></a>
    <a href="#" target="_blank"></a>
    <a href="#" target="_blank"></a>
    </div>
    <a href="http://tambouille-raleuses.forumactif.com/t142-parle-de-nous-autour-de-toi">Être Partners ?</a>
    <span class="lsm-ccp">Bloc par ©<a href="https://pub-o-saure.forumactif.com/" target="_blank">Miettes</a></span>
</div>