Bienvenue à vous mes louveteaux. Je vous invite à faire vos propositions et critiques sur ce forum.
 
AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

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

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Fenra
Admin
avatar

Messages : 74
Date d'inscription : 12/04/2015

MessageSujet: Encadré type Widget à gauche/droite du header. BY step aside Bazzart   Ven 2 Sep - 15:59

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é !
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://fenra.forumactif.org
 
Encadré type Widget à gauche/droite du header. BY step aside Bazzart
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Formule Excel: =NBCAR(); =gauche(); =droite()
» Grille d'Accord Main Gauche et Droite
» [Résolu]mon bureau (bis)
» Arrêt en gare suivant type de train
» Récupérer le type du lecteur sélèctionné .

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Chaîne de Fenra :: Amusez-vous! :: Bazar-
Sauter vers: