Labs - Structure partie Contenu Liens du DizPerso 

 

   

ACCUEIL <<< DizPerso Labs <<<


 

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="contenu">
    <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é.

Ne soyez pas surpris, le liens de retour à la page de tous les articles est hors de la DIV.

 

Le code CSS créé pour mettre en couleur les diverses DIVs de cettepage

<p>&nbsp;</p>
<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.







16/02/2010
0 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 42 autres membres


Rechercher sur Diztest ? :

Recommander ce blog | Contact | Signaler un contenu | RSS | Espace de gestion

retour Accueil Page precedente Bas de page Plein ecran - Retour alt+F4 Haut de page Page suivante Envoyer un mail a PapyClic le webmaster de Test-DizPerso