Encadré type Widget à gauche/droite du header. BY step aside Bazzart

Bonjour Bazzart, *-*
Je vous propose un tutorial aujourd’hui qui permet de rajouter un petit encadré qui pourrait ressembler à des widget mais qui se manie complètement à notre guise et selon notre envie. Attention, il est conseillé de savoir manier un minimum le css et les templates avant de se lancer.

Voici un exemple de ce que ça donne.
Spoiler:

Soyez indulgent, c'est mon premier tuto :please: et si jamais cela ne fonctionne pas ou n'est pas concluant, n'hésitez pas à m'en faire part et je m'en excuse avant tout *-* :wof: : .


Avant de commencer, vérifiez que vous êtes bien connecté sur le compte fondateur de votre forum. Sans ça, vous ne pouvez accéder au templates.
Une fois fait, diriger vous vers vos templates en passant par le panneau d'administration > affichage > templates > général.
Cliquez ensuite sur overall_footer_end. C'est ce template que nous allons modifier.
votre template se termine normalement par ça :

Code:

});

$(document).ready( function() {
 $('a#logout').click( function() {
 FB.logout();
 } );
});
//]]>
</script>
<!-- END switch_facebook_logout_TMP -->

<script type="text/javascript">
//<![CDATA[
 fa_endpage();
//]]>
</script>

</body>
</html>

nous ne modifions rien mais allons juste rajouter à la fin, après le dernier code, cette partie :

Code:

<div style="position: absolute; top: XXpx; right: XXpx; "><span class="boxtoproundtitle">VOTRE TEXTE</span></div>

la position va gérer où vous voulez placer votre encadré, à vous de le positionner à votre guise.
de mon côté, j'avais mis les données suivantes :

Code:

<div style="position: absolute; top: 100px; right: 30px; ">

essayez de cette façon et modifiez après si vous le souhaitez.
Validez le template et appuyez sur le plus vert.

Passons maintenant au CSS.
dans votre feuille de CSS (panneau d'administration > affichage > couleurs > feuille de style CSS) vous allez placer ce code.

Code:

.boxtoproundtitle {
background-color: #FFFFFF; /*vous réglez la couleur du fond */
  border: #ffffff 1px solid; /*la taille et couleur de la bordure*/
  border-radius: 0px 0px / 100px 100px; /*l’arrondis du cadre*/
color:#000000; /*la couleur du texte*/
text-decoration:none;
  width: 200px; /*la taille du cadre*/
  letter-spacing:0px; /*l’espacement entre les lettres du texte*/
text-transform:lowercase; /*majuscule ou minuscule*/
font-size:11px; /*taille du texte*/
  font-family: verdana; /*police du texte*/
margin:0px 0px 5px 0px; /*la marge intérieure*/
padding: 3px 2px 3px 2px; /*la marge extérieure*/
display:block;
text-align : center; /*alignement du texte*/
 
}

celui-ci va gérer tout le style de votre encadré. J'ai mis quelques données que je vous invite à changer comme vous le souhaitez.
Validez ! Et le tour est joué !