![https://static.blog4ever.com/2012/06/704535/artfichier_704535_3534793_201403160659507.gif]( "Apprendre pour aller plus loin.")
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.
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
| Blocs | Sélecteurs | Style 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]( "Cliquez sur l'image pour visualiser la vidéo.")
Pour vous aider à créer les règles, cliquez sur le bouton ci-dessous.
Générateur des règles
Cliquez pour lire, ce que vous devez savoir avant de commencer :
- Au survol de chaque zone vous avez une bulle qui s'affiche.
- Dans la colonne de gauche le texte indique l'action des propriétés de style, en cliquant dessus quelques explications s'affichent.
- Sur chaque ligne dans la deuxième colonne, vous avez une zone de saisie pour la valeur. Selon la propriété des listes de choix vous aident à trouver les bonnes valeurs.
- Après avoir fait votre choix, le code CSS s'affiche dans la colonne de droite, si ce n'est pas le cas, cliquez dans la zone. Un double-clic permet d'effacer le code proposé, si vous souhaitez mettre un code différent, cette action est réservée aux initiés.
Dans la liste ci-dessous vous retrouvez les sélecteurs, que j'indique dans l'article.
Vous pouvez également voir comment ce bloc se présente en bas de cet article >>> voir
Où insérer le CSS généré.
![https://static.blog4ever.com/2012/06/704535/artfichier_431181_220581_201103130534713.gif]( "Cliquez pour voir Quelques explications.")
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.
Rendez-vous dans l'espace de gestion → VOTRE BLOG → Design du blog → CSS/HTML → Personnalise :
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.
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 >>>lienVous 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]( "Cliquez pour voir.")
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.
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$('#article_suggestions h4').text("ici le nouveau titre");
});
// ]]></script>
Insertion du script
| "Plus" "Pro" "Business" | MasterDesign et "Lite" |
|---|
 |
 |
En gestion :
>>> VOTRE BLOG >>> Fonctions avancées
Si votre la gestion de votre blog est ouverte cliquez sur lelien suivant >>> lien |
En gestion :
>>> VOTRE BLOG >>> Design du blog
Si votre la gestion de votre blog est ouverte cliquez sur le lien suivant >>> lien |
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 pour voir le code.")
Cliquez sur l'image ci-dessus pour voir le code de cet exempleN°01.
#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;
}
![Suggestion_articles-ExN02.jpg]( "Cliquez pour voir le code.")
Cliquez sur l'image ci-dessus pour voir le code de cet exemple N°02.
#article_suggestions{
background-color : #E8FDFF;
width : 600px;
margin : 10px auto;
padding : 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
#article_suggestions h4{
background-color : #375394;
width : 250px;
color : #E3FDFF;
font-family : Georgia;
font-size : 16pt;
font-weight : bold;
text-align: center;
margin : 10px auto 20px auto;
margin : px px;
padding: 3px 5px 3px 5px;
border : 2px ridge #649FBD;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
![Suggestion_articles-ExN03.jpg]( "Cliquez pour voir le code.")
Cliquez sur l'image ci-dessus pour voir le code de cet exemple N°03.
#article_suggestions{
background-color : #E8FDFF;
width : 600px;
margin : 10px auto;
padding : 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
#article_suggestions h4{
background-color : #375394;
width : 250px;
color : #E3FDFF;
font-family : Georgia;
font-size : 16pt;
font-weight : bold;
text-align: center;
margin : 10px auto 20px auto;
margin : px px;
padding: 3px 5px 3px 5px;
border : 2px ridge #649FBD;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
#article_suggestions a{
color : #095282;
background-color : #FFFFFF;
margin : 5px;
padding : 3px;
}
#article_suggestions a:hover{
color : #FFFFFF;
background-color : #3C5985;
}
![Suggestion_articles-ExN04.jpg]( "Cliquez pour voir le code.")
Cliquez sur l'image ci-dessus pour voir le code de cet exemple N°04.
#article_suggestions h4{
background-image : url('https://static.blog4ever.com/2012/06/704535/oeil-icone-4735-32.png');
background-repeat : no-repeat;
background-position : left center;
color : #244C91;
font-family : Broadway;
font-size : 16pt;
font-weight : bold;
text-align : left;
padding: 5px 5px 5px 35px;
}
#article_suggestions ul{
background-color : #FFFFFF;
padding : 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
#article_suggestions li{
background-image : url('https://static.blog4ever.com/2012/06/704535/graphitoo-com-icones-document-couleur041.gif');
background-repeat : no-repeat;
background-position : left center;
color : #1A3D8F;
text-decoration : none;
padding: 5px 5px 5px 35px;
margin: 5px;
}
#article_suggestions a{
color : #173091;
background-color : #DFDFE6;
padding: 5px;
}
#article_suggestions a:hover{
color : #DFDFE6;
background-color : #173091;
}
![Suggestion_articles-ExN05.jpg]( "Cliquez pour voir le code.")
Cliquez sur l'image ci-dessus pour voir le code de cet exemple N°05.
#article_suggestions h4{
background-image : url('https://static.blog4ever.com/2012/06/704535/oeil-icone-4735-32.png');
background-repeat : no-repeat;
background-position : left center;
color : #244C91;
font-family : Broadway;
font-size : 16pt;
font-weight : bold;
text-align : left;
padding: 5px 5px 5px 35px;
}
#article_suggestions ul{
background-color : #E8FDFF;
padding : 10px;
border: 2px ridge #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
#article_suggestions li{
background-image : url('https://static.blog4ever.com/2012/06/704535/graphitoo-com-icones-document-couleur041.gif');
background-repeat : no-repeat;
background-position : left center;
color : #1A3D8F;
text-decoration : none;
padding: 5px 5px 5px 35px;
margin: 5px;
}
#article_suggestions a{
color : #173091;
background-color : #DFDFE6;
padding: 3px;
}
#article_suggestions a:hover{
color : #DFDFE6;
background-color : #173091;
}
![Suggestion_articles-ExN06.jpg]( "Cliquez pour voir le code.")
Cliquez sur l'image ci-dessus pour voir le code de cet exemple N°06.
#article_suggestions{
background-image : url('https://static.blog4ever.com/2012/06/704535/artfichier_704535_3634426_201404123945918.gif');
background-repeat : repeat;
width : 90%;
margin : 30px auto;
padding : 10px;
border : 2px inset #610F0F;
-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;
}
#article_suggestions h4{
color : #610F0F;
font-family : Georgia;
font-size : 25px;
font-weight : bold;
font-style : italic;
text-align : center;
}
![Suggestion_articles-ExN07.jpg]( "Cliquez pour voir le code.")
Cliquez sur l'image ci-dessus pour voir le code de cet exemple N°07.
#article_suggestions a{
background-image : url('https://static.blog4ever.com/2012/06/704535/artfichier_704535_3634420_201404123944582.jpg');
background-repeat : repeat-x;
background-position : 50% 50%;
padding : 10px;
}
#article_suggestions li{
margin : 20px 0px;
}
![Suggestion_articles-ExN08.jpg]( "Cliquez pour voir le code.")
Cliquez sur l'image ci-dessus pour voir le code de cet exemple N°08.
#article_suggestions{
background-color : #E1FAE8;
width : 80%;
margin : 20px auto;
padding : 10px;
border : 2px ridge #2648A6;
}
#article_suggestions h4{
width : 200px;
color : #DBFFF8;
background-color : #06594E;
font-family : Georgia;
font-size : 16px;
font-weight : bold;
font-style : italic;
text-align : center;
text-decoration : none;
margin : 20px auto;
padding : 3px;
border : 3px outset #CBF5E4;
-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;
}
#article_suggestions a:hover{
color : #DBFFEA;
background-color : #064F45;
padding: 0px 5px 0px 5px;
}
![Suggestion_articles-ExN09.jpg]( "Cliquez pour voir le code.")
Cliquez sur l'image ci-dessus pour voir le code de cet exemple N°09.
#article_suggestions li{
background-color : #9195FF;
margin : 20px;
padding: 3px 15px 3px 15px;
-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;
}
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
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.
