Bloc annonce - 3 blocs.

MEMBRE DEPUIS LE : 21/04/2019

Vous trouverez ci-dessous un codage pour embellir et aménager votre bloc annonce qui se trouve sous le header. Merci de créditer le forum sur le votre !

Visuel d'exemple

Bloc annonce - 3 blocs. 210513053843293281

Code HTML : copiez et coller le dans le panneau administratif : GENERAL => Messages et Emails => Annonces

Code:: <div id="annonces">
<div id="annscenar"><div class="titre2">
TITRE 1 </div><br>
<infoimp>Nom du scénario</infoimp>, vous pouvez écrire ici une petite description pour ce scénario ou pv attendu<br><br> <a href="https://fantasmagorie.forumactif.com"><img src="https://2img.net/nsa40.casimages.com/img/2021/05/08/210508055854311606.png" class="imgScenar" /></a></div>

<div id="annvote"><div class="titre2"> TITRE 2 </div><br>Félicitation à <infoimp><strong>nom du membre</strong></infoimp> qui est la voteuse du mois de xxx. <br><br><center><a href="http://www.root-top.com" target="_blank"><img style="width:15px; height:15px;" src="https://zupimages.net/up/19/43/5yvn.png" /></a> <a href="http://www.root-top.com" target="_blank"><img style="width:15px; height:15px;" src="https://zupimages.net/up/19/43/5yvn.png" /></a> <a href="http://www.root-top.com" target="_blank"><img style="width:15px; height:15px;" src="https://zupimages.net/up/19/43/5yvn.png" /></a> <a href="http://www.root-top.com" target="_blank"><img style="width:15px; height:15px;" src="https://zupimages.net/up/19/43/5yvn.png" /></a><br>Votez pour nous !</center> </div>

<div id="annvote"><div class="titre2">TITRE 3</div><br>Vous pouvez écrire ici <infoimp>ce que vous voulez</infoimp> chaque bloc est personnalisable, avec couleurs modifiables. <br /></div>

</div>
</div>

Code CSS à copier dans votre css.

Code:: #annonces {
margin: 20px auto;
padding: 15px;
font-size: 13px;
background-color: #141414;
width: 900px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
color : #9B9B9B;
}

#annscenar a, #annvote a {
text-decoration: none;
  font-weight: 700;
color: #9B9B9B;
}

infoimp {
   color: #663e5a;
   font-family: oswald;
   font-size: 11px;
   letter-spacing: 1px;
   text-shadow: 0 0 1px!important;
   text-transform: uppercase;
}

#annscenar {
height: 90%;
width: 50%;
overflow: auto;
text-align: justify;
font-size: 12px;
line-height: 1.1em;
margin-right: 15px;
padding: 10px;
background-color:#1e1f21;
}

.imgScenar {
   filter: grayscale(100%);
  float: left;
  height: 150px;
  padding:2%;
  text-align: center;
  width: 30%;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  border: 1px solid #cfc1ab; -webkit-border-radius:50px;
  -moz-border-radius:50px;
  border-radius:50px;
  opacity: 0.8;
  background: #1E1E1E;
  margin-left:100px;
  margin-bottom:3px;
}

#annvote {
background-color: #1e1f21;
height: 90%;
width: 50%;
margin-right: 15px;
padding: 10px;
text-align: justify;
overflow: hidden;
font-size: 12px;
line-height: 1.1em;
}

#annonces__fa ac, #annonces__fa ef {
padding-bottom: 7px;
margin-bottom: 7px;
display: block;
border-bottom: var(--border);
text-align: center;
}

.annonces__liens {
height: 100%;
width: 35%;
}

.annonces__liens-1, .annonces__liens-2, .annonces__liens-topsites { width: 100%; }

.annonces__liens-1 { margin-right: 8px; }

#annonces__liens--list {
display: flex;
justify-content: center;
align-items: center;
}

#annonces__liens--list li, .annonces__liens-topsites {
width: 100%;
margin-bottom: 8px;
padding: 5px 0;
border-radius: 20px;
text-align: center;
font-family: var(--font-title);
font-size: 12px;
font-weight: 700;
transition: 0.3s all;
}

.titre2 {
   color: #70706e;
   font-family: oswald;
   font-size: 12px!important;
   letter-spacing: 2px;
   text-align: center;
   text-decoration: none;
   text-shadow: 0 0 1px!important;
   text-transform: uppercase;
}

#annonces__liens--list li {
background-color: var(--color1);
color: var(--white);
}

.annonces__liens-topsites {
display: block;
width: 100%;
background-color: transparent;
border: 1px solid var(--color1);
transition: 0.3s all;
margin-top: 4px;
}

.annonces__liens-topsites a { color: var(--color1); transition: 0.3s all; }

.annonces__liens-topsites:hover { border: 1px solid var(--color2); transition: 0.3s all; }
.annonces__liens-topsites a:hover { color: var(--color2); transition: 0.3s all; }

#annonces__liens--list a, .annonces__liens-topsites a { text-decoration: none; }

#annonces__liens--list li:hover {
background-color: var(--color2);
transition: 0.3s all;
}