PapyClic - Design

PapyClic - Design

Style menu latéral

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

Dans ce menu vous pouvez modifier le titre des blocs le composants.

 

► En mettant par exemple une couleur de fond, une couleur en harmonie avec la couleur du fond.

 

.menu_bloc h2 {
  background: #BE9DA6;
  color: #AE6D5B;
  padding: 2px 5px;
}

 

 

► Vous pouvez mettre un fond texture, qui se répète.

 

 

.menu_bloc h2 {
  background-image: url(' adresse de votre image ');
  background-repeat: repeat;
  color: #990000;
  padding: 2px 5px;
}

 

 

► Insérer une petite image, avant le texte du titre.

 

 

.menu_bloc h2 {
  background-image:url(' adresse de votre image ');
  background-repeat: no-repeat;
  padding: 5px 2px 5px 50px;
  background-position: left center;
}

 

 

► Un autre élément, que vous pouvez modifier, le bloc liste,  ci-dessous j'ai mis des coins arrondis.

 

 

.menu_bloc ul {
  background: #FFFFFF;
  padding: 5px 2px;
  border: 2px ridge #F0F0F0;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  - khtml-border-radius: 10px;
  border-radius: 10px;
}

 

 

► Vous pouvez détacher les différents blocs composants ce menu, en mettant une marge externe (margin), mettre un fond texture ou couleur. Puis en mettant des bordures et des coins arrondis, la présentation est totalement différente.

 

 

 

.menu_bloc {
  background-image: url(' adresse de votre image ');
  background-repeat: repeat;
  margin: 20px 5px;
  border: 2px outset #F0F0F0;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
}

 

 

► Vous pouvez également pour donner de la profondeur, mettre de l'ombre en ajoutant à la règle précédente, le code suivant.

 

 

-webkit-box-shadow: 2px 4px 12px #666;
-moz-box-shadow: 2px 4px 12px #666;
box-shadow: 2px 4px 12px #666;

 

Les ombres et les coins arrondis ne sont pas reconnus par les versions antérieures à IE9, mais cela ne génère aucun problème.

 

 

 

 

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.

 

 

Problème que vous pouvez rencontrer dans cette présentation, le formulaire "Newsletter",  n'existe plus.

C'est le bloc "Membres" qui le remplace, voir l'article >>>lien

Le nouveau bloc "Membres" ne contient pas l'accès aux archives des Newsletters, il faut donc créer un bloc spécifique, voir l'article >>>lien

Pour mettre ce bloc dans le même style que les autres blocs du menu latéral, faut ajouter, la CLASS "menu_bloc" dans le code HTML que je propose dans l'article.

Le code modifié sera :

<div id="menu_archivesNL" class="menu_bloc">
<h2>Newsletters</h2>
<ul><li><a href="/newsletter/archives">Archives</a></li></ul>
</div>

 

 

► Egalement dans le bloc des statistiques, selon son contenu les éléments se mettent sur 2 lignes (capture 1), vous pouvez diminuer la taille de la police en ajoutant au CSS personnalisé le code ci-dessous, voir le résultat (capture 2).

 

div#menu_stats li {
  font-size: 11px;
}

Capture 1 Capture 2

 

 

 

► Autre problème, si vous avez des titres un peu longs, qui s'affichent sur 2 lignes. Vous pouvez réduire la taille de la police, en ajoutant à la règle → .menu_bloc h2
le code suivant : font-size: 13px;

Vous modifié la valeur en fonction du résultat obtenu.

 

► Un plus pour ceux, qui comme moi, affichent dans le menu, les derniers tweets. Pour que ce bloc s'incorpore à l'ensemble, dans 1 des règles indiquées plus haut  >>> .menu_bloc

il faut rajouter ce que j'ai mis en vert dans le code ci-dessous.

Puis créer une règle, pour mettre une marge en haut et en bas, 

>>> aside div.centre

 

.menu_bloc, aside div.centre {
  background: #F0F0EE;
  background-image: url(' adresse de votre image ');
  background-repeat; repeat;
  margin: 20px 5px;
  border: 2px outset #F0F0F0;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 2px 4px 12px #666;
  -moz-box-shadow: 2px 4px 12px #666;
  -html-box-shadow: 2px 4px 12px #666;
  box-shadow: 2px 4px 12px #666;
}
aside div.centre {
  padding-top: 20px;
  padding-bottom: 20px;
}

Le bloc Tweeter s'affichera presque comme les autres blocs du menu, sous réserve de modification de la part de Tweetter.

 

 


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

 

 



22/05/2013

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 165 autres membres