PapyClic - Design

PapyClic - Design

Personnalisation du bloc - Articles à  découvrir

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

 

Les pages de votre blog sont composées de différents blocs HTML, chacun d'eux est également composé de blocs, c'est le cas de ce bloc "à découvrir". Il contient un bloc titre (h4), un bloc liste (ul) qui contient des blocs éléments(li), eux-mêmes contenant chacun un bloc lien (a).

De ce fait pour personnaliser cet ensemble de blocs, selon le résultat souhaité on peut créer plusieurs règles, une par bloc ou moins ce n'est pas une obligation. Chaque règle a son "Sélecteur" qui est composé de l'identifiant du bloc parent #articles_suggestions + la balise HTML. Ces sélecteurs sont indiqués dans les bulles de l'image ci-dessous et également plus bas dans un tableau.

Cette représentation graphique, détaille tous les blocs  Ainsi il sera plus facile de repérer où sera appliqué le style et en utilisant le générateur de code, vous comprendrez où agit chaque règle de CSS. Vous retrouverez les sélecteurs dans la liste de choix au début du générateur.

 

 

graph-suggestion_articles.png

 

 

En exemple ci-dessous le code CSS, qui gère le bloc "Suggestion d'articles", sur ce blog, sauf sur ici sur cet article, il sert de démonstration, pour voir l'action du code généré avec le générateur de code.

Vous remarquerez, ce code tout simple, ne contient que 2 règles.

 

#article_suggestions {
width: 90%;
margin:10px auto;
padding: 5px;
-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;
box-shadow: 2px 4px 12px #666;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa',Direction=135,Strength=12);
}
#article_suggestions a:hover{
background-color: #FFFFFF;
text-decoration: none;
padding: 0 5px;
}

 

En fin d'article, vous trouverez des exemples en image, ainsi que le code utilisé, qui a été réalisé avec le générateur >>> lien

 


 

Les blocs et les règles
BlocsSélecteursStyle géré
Bloc de l'ensemble #article_suggestions fond du bloc, les bordures, les marges, les coins, les ombres ...
exemple 01
Bloc du titre  #article_suggestions h4 texte du titre, le fond, les bordures, l'alignement, les marges ...
exemple 02
Bloc de la liste des liens #article_suggestions ul fond de la liste, les bordures, les marges ...
exemple 05
Bloc des éléments de la liste #article_suggestions li fond couleur ou image, les marges ...
exemple 05
Bloc des liens #article_suggestions a texte des liens, le fond, les marges ...
exemple 07
Bloc des liens au survol #article_suggestions a:hover texte, fond, décoration, ...
dans tous les exemples

 

 

Avant de commencer, je vous invite à regarder cette animation >>> video_32.png

 

Pour vous aider à créer les règles, cliquez sur le bouton ci-dessous.

Générateur des règles

 

 


Où insérer le CSS généré.

https://static.blog4ever.com/2012/06/704535/artfichier_431181_220581_201103130534713.gif Tous les codes indiqués ci-dessus ou que vous aurez modifiés sont à coller dans la zone de personnalisation du CSS de l'assistant du RapidDesign, cliquez sur l'icône informations ci-contre.

 


Page test

Pour ouvrir une page où vous pourrez mettre le code CSS généré en attente, et pouvoir créer un autre code, cliquez sur ce >>>lien
Vous pourrez même le modifier, si vous connaissez le CSS.

 


Modifier le titre du bloc

https://static.blog4ever.com/2012/06/704535/artfichier_431181_220581_201103130534713.gif Si votre blog est en version "Plus","Pro" ou "Business", vous avez accès aux bordures, vous pouvez insérer un script. Egalement ceux qui ont opté pour le système MasterDesign ou en version "Lite", vous pouvez un script dans la structure., cliquez sur l'icône informations ci-contre.

 


 Quelques exemples de présentation ...

 

En cliquant sur l'image, vous aurez accès au code, vous le copier pour le coller dans la page test >>> lien
Vous pourrez le modifier ou l'utiliser comme il est. Ce code vous aidera à voir ce que vous pouvez faire avec le Générateur.

 

Suggestion_articles-ExN°01.jpg
Cliquez sur l'image ci-dessus pour voir le code de cet exempleN°01.

 

 

Suggestion_articles-ExN02.jpg
Cliquez sur l'image ci-dessus pour voir le code de cet exemple N°02.

 

 

Suggestion_articles-ExN03.jpg
Cliquez sur l'image ci-dessus pour voir le code de cet exemple N°03.

 

 

Suggestion_articles-ExN04.jpg
Cliquez sur l'image ci-dessus pour voir le code de cet exemple N°04.

 

 

Suggestion_articles-ExN05.jpg
Cliquez sur l'image ci-dessus pour voir le code de cet exemple N°05.

 

 

Suggestion_articles-ExN06.jpg
Cliquez sur l'image ci-dessus pour voir le code de cet exemple N°06.

 

 

Suggestion_articles-ExN07.jpg
Cliquez sur l'image ci-dessus pour voir le code de cet exemple N°07.

 

 

Suggestion_articles-ExN08.jpg
Cliquez sur l'image ci-dessus pour voir le code de cet exemple N°08.

 

 

 

Suggestion_articles-ExN09.jpg
Cliquez sur l'image ci-dessus pour voir le code de cet exemple N°09.

 

 

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

 

Haut Précédente

 



17/10/2014
41 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 153 autres membres