PapyClic - Design

PapyClic - Design

Personnalisation du bloc - Membres du blog

https://static.blog4ever.com/2012/06/704535/artfichier_704535_3534806_201403161807916.gif

 Le bloc "Membres" est comme tous les blocs du menu latéral, son style est géré par la CLASS .menu_bloc, voir les articles >> lien et lien ou je traite le style des autres blocs du menu latéral.

 

membres-1.jpg
Comme vous pouvez le voir sur la capture ci-contre, la personnalisation peut donner de l'importance à ce bloc, qui j'espère, attirera les visiteurs à s'inscrire.

Plusieurs parties de ce bloc peuvent être traitées en CSS, quelques règles suffiront pour lui donner un style particulier.

  1. le fond
  2. le titre
  3. le bloc avec les avatars
  4. le lien avec le nombre de membres
  5. l'invitation à s'incrire
  6. le bouton pour s'incrire

 

https://static.blog4ever.com/2012/06/704535/artfichier_431181_220581_201103130534713.gif

Les codes CSS sont valables pour toutes les versions et pour les navigteurs principaux dans leur dernière version. Pour les anciens navigateurs il ne faut pas mettre de coins arrondis et de bordures ombrées.


Si le système "Membres" est activé et l'option pour qu'il s'affiche dans le menu est cochée, ce bloc s'affiche selon si le visiteur est inscrit ou pas, et connecté, mais ça ne change rien au niveau du codage.

 

Les différentes étapes pour créer le style du bloc ci-dessus, vous aideront à voir où les différentes règles agissent.

 

► Pour commencer j'ai mis une image de fond de taille moyenne 95x45, pour la positionner en haut du bloc.

 

membres-4.jpg

 Le code :

 

#menu_blogmember_box {
background-image: url('https://static.blog4ever.com/2012/06/704535/groupe-membres.jpg');
background-position: 50% 10px;
background-repeat: no-repeat;
}

 

► Comme le titre couvre l'image, je mets une marge extérieure haute au titre.

 

membres-4b.jpg

Le code :

 

#menu_blogmember_box h2 {
margin-top: 30px;
}

 

► Dans le code il y a une marge intérieure à gauche et à droite, pour encadrer le carré d'avatars, je rajoute dans mon code une marge identique en haut et en bas, en mettant une couleur de fond. Ce bloc avatars ressort bien déjà, puis en ajoutant des coins arrondis et l'ombre, il est bien mis en valeur, je pense.

 

https://static.blog4ever.com/2012/06/704535/artfichier_704535_3113757_201311265116914.jpg

Le code :

 

.menu_blogmember_box_avatars {
background: #00517A;
padding-top: 10px;
padding-bottom: 10px;

/* coins arrondis */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;

/* bordures ombrées */
-webkit-box-shadow: 2px 4px 12px #666;
-moz-box-shadow: 2px 4px 12px #666;
box-shadow: 2px 4px 12px #666;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12);

 

► Je crée une bordure au lien du nombre de membres, pour le mettre en valeur. Ce lien ouvre la page la page liste des membres.

 

https://static.blog4ever.com/2012/06/704535/artfichier_704535_3113778_201311260843897.jpg

Le code :

 

.menu_blogmember_box_link {
width:60%;
margin-top: 20px !important;
margin-bottom: 10px;
padding: 3px 10px;
border: 2px outset #000000;
}

 

► Pour mettre en valeur l'invitation à s'inscrire, je lui mets un fond couleur.

 

membres-7.jpg

Le code :

 

.menu_blogmember_box_invite {
background-color: #D9E1EC;
padding: 10px;

/* coins arrondis */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}

 

► Pour terminer je change la couleur du bouton qui ouvre le formulaire d'inscription.

 

 https://static.blog4ever.com/2012/06/704535/artfichier_704535_3109219_20131126252438.jpg

 

.menu_blogmember_box_register {
background-color: #00517A !important;
padding: 3px 10px;
}

 

Si vous êtes connecté en tant que membre du blog que vous visitez, le bloc s'affichera sans les liens d'inscription.

 

blocmembresConnect.jpg

 

Les codes sont des exemples à vous de les modifier pour harmoniser le bloc "Membres" avec le design de votre blog.  L'essentiel est que ça vous montre les règles CSS spécifiques de ce bloc.

Si vous avez besoin d'explications supplémentaires, postez sur le forum que je puisse vous aider.

 

 

Merci de télécharger, dans votre boîte à fichiers, l'image de mon exemple et de changer l'adresse dans votre CSS :
background-image:url(' adresse image dans votre boîte à fichiers');

 

 Les codes ci-dessus sont à coller dans la zone de personnalisation du CSS de l'assistant du RapidDesign.

 

Espace de gestion → VOTRE BLOG → Design du blog → CSS/HTML → CSS personnalisé.

 

Exemple de code collé dans la zone

 

 

Si votre espace de gestion est ouvert, cliquez sur : lien

 

N'oubliez pas, après visualisation dans l'assistant de cliquer sur "Appliquer" en bas de la colonne.

 

 


Si cet article vous a été utile, un petit J'aime me fera plaisir.

N'hésitez pas un mettre un commentaire, si vous avez apprécié cet article, mais également si vous n'êtes pas pleinement satisfait. 
Pour plus d'explications poster sur le forum

 

 

HautPrécédente

 



27/11/2013

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 165 autres membres