Welcome

Halloween Autres

Barre latérale

Halloween, LS codage Forumactif Templates & Eléments Autres Barre latérale

PHPBB2

Optimisé Un index complet ainsi qu'un footer sont disponibles. Le pseudo du membre du mois apparait au survol de l'image.

Retour

Codage barre latérale Halloween Forumactif

CSS

/********************************************************************** BARRE LATERALE **********************************************************************/
.barre_laterale {
        background: url(https://i.imgur.com/vZgIGGM.jpg);
        bottom: 0;
        box-sizing: border-box;
        left: 0;
        padding: 2% 0;
        position: fixed;
        text-align: center;
        top: 0;
        width: 15%;
        overflow: auto;
        overflow-x: hidden;
  	color: #d0cbc9
}

/* LOGO */
img.banniere_mini {
    	width: 95%;
}

/* TEXTE SAISON ET MOIS */
.barre_laterale h2 {
        font-weight: normal;
        font-family: 'Bangers', cursive;
        font-size: 13px;
        letter-spacing: 1px;
        margin: 15% 0;
  	color: #d0cbc9;
}

/* Couleur orange */
.barre_laterale h2 span {
    	color: #ad8245;
}

/* TITRES BARRE LATERALE */
.barre_laterale h3 {
        font-family: 'Bangers', cursive;
        font-size: 24px;
        font-weight: normal;
        margin: 0 0 2% 0;
}

.barre_laterale h3 span {
    	color: #ad8245;
}

/* MEMBRE DU MOIS */
.membre_mois {
        border: 1px solid #ad8245;
        border-radius: 100px;
        height: 150px;
        margin: auto;
        padding: 4px;
        position: relative;
        width: 150px;
}

.contenu_membre_mois {
        background: rgba(46,43,43,.8);
        border-radius: 100px;
        box-sizing: border-box;
        font-family: Bangers, cursive;
        font-size: 20px;
        height: 155px;
        padding: 40% 0 0;
        position: relative;
        width: 150px;
        z-index: 2;
}

.contenu_membre_mois:hover {
    	z-index: 3;
}

.contenu_membre_mois a {
        color: #d0cbc9 !important;
}

.contenu_membre_mois a:hover {
    	color: #ad8245 !important;
}

.membre_mois img {
        width: 150px;
        height: 150px;
        border-radius: 100px;
        object-fit: cover;
        position: absolute;
        top: 3%;
        left: 2.5%;
        z-index: 2;
}

.membre_mois img:hover {
    	z-index: 1;
}

/* COUP DE COEUR */
.bloc_coup_coeur {
    	margin: 18% 0;
}

/* RUMEURS */
.bloc_rumeurs {
        background: #2e2b2b;
        box-sizing: border-box;
        font-size: 11px;
        height: 120px;
        line-height: 1.5;
        margin: 0 auto 18% auto;
        padding: 3%;
        text-align: justify;
        width: 90%;
}

.bloc_rumeurs p {
        height: 80px;
        overflow: auto;
        padding: 0 5% 0 0;
}

/* STATISTIQUES */
.bloc_stats {
        font-family: Bangers, cursive;
        font-size: 16px;
        letter-spacing: 1px;
        width: 90%;
        margin: 20% auto;
}

.bloc_stats .heros, .qui_est_en_ligne .heros {color: #238acf;}
.bloc_stats .eleves, .qui_est_en_ligne .eleves {color: #cf6d2c;}
.bloc_stats .ligue_vilains, .qui_est_en_ligne .ligue_vilains {color: #b71516;}
.bloc_stats .vilains, .qui_est_en_ligne .vilains {color: #c163e6;}
.bloc_stats .civils, .qui_est_en_ligne .civils {color: #4c881c;}

/* BLOC DISCORD ET TOPS */
.footer_barre_laterale {
    width: 90%;
    margin: auto;
}

/* Discord */
a.discord {
    float: left;
    margin: 0 0 0 3%;
    width: 30%;
}

/* Bloc topsites */
.topsites {
    float: left;
    width: 65%;
    font-family: Bangers, cursive;
}

.topsites h4 {
    font-family: Bangers, cursive;
    font-size: 18px;
    font-weight: normal;
    margin: 4% 0 2% 0;
}

.topsites a {
    font-size: 35px;
    color: #ad8245;
    margin: 0 5%;
}

Overall_header

A insérer après la ligne 217 (fin du commentaire Hitskins) et avant le "BEGIN switch_login_popup".

<div class="barre_laterale">
  	<img src="https://i.imgur.com/dM8kolz.jpg" class="banniere_mini" alt="Logo Nom de votre forum" />
  	<h2>
          	Nous sommes actuellement en <span>été</span>, au mois d'<span>Août</span>
  	</h2>
  	
  	<div class="bloc_membre_mois">
        	<h3>
          		Membre du <span>Mois</span>
  		</h3>
  		<div class="membre_mois">
          		<div class="contenu_membre_mois">
                  		<a href="#">
                          		Pseudo
                  		</a>
          		</div>
          		<img src="https://redcdn.net/hpimg11/pics/513629raiekki1.gif" alt="Avatar membre du mois Nom de votre forum" />
  		</div>
  	</div>
  
  	<div class="bloc_coup_coeur">
  		<h3>
                  	Coup de <span>coeur</span>
  		</h3>
  		<a href="#">
          		<img src="https://i.imgur.com/CSZQlWU.jpg" alt="Coup de coeur Nom de votre forum" />
  		</a>
  	</div>
  
  	<h3>
                  Les dernières <span>rumeurs</span>
        </h3>
          
        <div class="bloc_rumeurs">
          	<p>
                  	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lorem lectus, auctor at gravida hendrerit, molestie at dolor. Duis suscipit lectus augue, at viverra ex cursus id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed facilisis elit non purus lobortis feugiat. Suspendisse sit amet ultricies mi, et iaculis eros. Nunc ac convallis quam. Nullam vulputate pulvinar ipsum quis hendrerit. Aenean eget luctus nisi. Vestibulum ac venenatis mi. Nam tempor turpis sed augue tristique, ut ullamcorper leo lobortis. Cras vulputate arcu sed ligula porta, fermentum tempus metus rhoncus.

Fusce lobortis a ante vel mattis. Etiam tincidunt dignissim convallis. Cras nulla augue, dapibus ac nisi ac, auctor dapibus dui. Integer lacinia tempor mauris, non gravida risus. Maecenas turpis lectus, dapibus vitae condimentum in, suscipit vel urna. Donec fermentum sodales lacus, sit amet vestibulum justo pretium et. Sed eget dictum urna. Nulla facilisi. Nunc libero augue, vehicula tristique neque non, bibendum posuere diam. Sed imperdiet tellus in nisl porta, non aliquam ante ultrices. Integer vitae lorem a dolor convallis mollis. Proin ut sollicitudin sapien. Nullam vel lectus nisl. Phasellus iaculis arcu lacus, a scelerisque nunc venenatis convallis.
          	</p>
  	</div>
  
  	<div class="bloc_stats">
          	XX <span class="heros">Heros</span> | 
          	XX <span class="eleves">Elèves</span> | 
          	XX <span class="ligue_vilains">Ligue des vilains</span> | 
          	XX <span class="vilains">Vilains</span> | 
          	XX <span class="civils">Civils</span>
  	</div>
  
  	<div class="footer_barre_laterale">
          	<a class="discord" target="_blank" href="#">
                  	<img src="https://i.imgur.com/AVMe88P.png" alt="Discord Nom de votre forum" />
          	</a>
          
          	<div class="topsites">
                  	<h4>
                          	Si tu nous aimes, vote !
                  	</h4>
                  	<a href="#" target="_blank">
                          	1
                  	</a>
                  
                  	<a href="#" target="_blank">
                          	2
                  	</a>
                  
                  	<a href="#" target="_blank">
                          	3
                  	</a>
          	</div>
          
          	<div class="clear">
          	</div>
  	</div>
</div>

Dernière modification : 25 April 2020 23 : 32.

#barrelaterale #autres #forumactif #codage #libreservice

Halloween