Labs - Structure partie Contenu Liens du DizPerso
Dans la partie "Contenu", sur cette page, en couleur orange , la dernière section :
- le bloc article_liens, en vert sur cette page
La structure HTML de lapartie "Contenu" les DIVs principales
<div id="article"></div>
<div id="article_commentaires" class="contenu_commentaires"></div>
<div id="article_liens"></div>
</div>
Capture de la structure HTML de la section "Liens"
Cette structure est composée d'une DIV principale : id nommée "article_liens"
Dans cette DIV le titre h3 géré par la règle #contenu h3 dans la feuille de style CSS, ainsi les 3 sections de la partie "Contenu" ont le même style. Mais il est possible de modifier cela et de faire les 3 titres avec un style différent, puisqu'ils sont dans 3 DIVs, dans ce cas il faut créer 3 règles en CSS :
- #article h3 { ici les propriétés attribut }
- #article_commentaires h3 { ici les propriétés attribut }
- #article_liens h3 { ici les propriétés attribut }
Je n'applique pas ici cette possibilité, je laisse à votre imagination de mettre éventuellement une image différente comme fond de chaque titre.
A part ce titre dans cette section, il y a des liens :
- ouverture de la page de la catégorie de l'article
- la page pour imprimer l'article, si vous avez paramétré cette fonction
- ouverture de la page de tous les articles
- les liens de partage, ouverture vers l'extérieur, Facebook, Twitter, etc...
Si vous ne souhaitez pas laisser ces liens de partage sur tous vos articles ou seulement sur certains, regardez mon astuce .
Donc dans cette section très peu de modifications, selon le design de votre Site/blog, vous pouvez avoir besoin de changer la couleur de fond, modifier la couleur des liens, mettre des marges et éventuellement une bordure. Vous pouvez voir ci-dessous les règles utilisées #article_lien, #article_liens a, #article_liens a:hover, ainsi que le résultat en bas de cet article.
Vous pouvez également modifier les liens de partage avec des règles #articles_lien_partage, mais je ne vous le conseille pas étant donné que c'est du code externe ajouté à Blog4ever. Pour l'exemple j'ai créé 3 règles que vous trouverez ci-dessous, c'est un essai très limité.
Le code CSS créé pour mettre en couleur les diverses DIVs de cettepage
<style type="text/css">
/* les liens */
#article_liens
{
background:#009900;
width : 95%;
margin : 20px auto;
padding : 10px;
color:#FFFF00;
border:3px ridge #FFCC00;
}
#article_liens a
{
background:#99FF99;
color:#000000;
}
#article_liens a:hover
{
background:#000000;
color:#99FF99;
}
/* liens partage */
#articles_lien_partage
{
background:#009900;
color:#000000;
margin-top:10px;
}
#articles_lien_partage a
{
background:#FFFFFF;
color:#000000;
}
#articles_lien_partage a:hover
{
background:#000000;
color:#FFFFFF;
}
</style>
Sides attributs sont oubliés dans ces règles, par héritage les règles des parties parents qui seront les paramètres retenus par le système.
Voilà la partie "Contenu" terminée, j'espère que mes explications vous servirons et que nous aurons l'occasion d'en discuter sur le forum de Blog4ever dans la catégorie CSS et DIZ PERSO.
