Labs - Structure de la partie Contenu Accueil du DizPerso
La page d'accueil est unique et très spécifique, l'espace HTML est seulement la partie "Contenu", dans laquelle vous insérez vos textes, images, divers objets acceptés par le composeur et surtout les champsdynamiques, les 5 derniers articles, le top articles, etc...
Je vous propose donc de créer en HTML une DIV, ID "contenu_accueil" et une règle nommée "#contenu_accueil"en CSS pour gérer le style.
Dans votre gestion --> VOTRE BLOG --> Page d'accueil... en-dessous du composeur, cliquez sur "Mode source HTML",puis cochez la case pour passer en mode HTML. Ensuite copiez le code ci-dessous et collez le dans le composeur.
Maintenant vous pouvez décocher la case pour revenir en mode texte.
Espace pour composer votre page...
</div>
Dans le composeur s'affiche uniquement les quelques mots "Espace pour composer votre page...". Ce texteprovisoire permet de repérer où vous devez insérer votre texte ou image.
Espace pour composer votre page...
La structure HTML de la partie "Contenu" de la page d'accueil.
<div id="contenu_accueil">
</div>
</div>
Dans votre feuille de style, la règle #contenu gère toute cette page comme les pages articles.L'ID "contenu_accueil" permet de pouvoir aménager un style particulier pour la page d'accueil, qui seragéré par la création d'une règle CSS nommée #contenu_accueil.
La réalisation de la page actuelle, présentation d'une page d'accueil avec un cadre, uniquement paramétré en CSS.C'est le code ci-desssous qui est utilisé, tout d'abord quelques modifications de la règle #contenu, enparticulier, un fond image (texture) et la bordure. Puis la règle #contenu_accueil avec un fond image (texture)et également des bordures, l'astuce pour réaliser le cadre, consiste à placer le bloc "contenu_accueil" au centrede la partie "Contenu", en mettant des marges extérieures(margin). Le fond de la partie "Contenu" sera recouvertpar le fond du bloc "contenu_accueil", c'est donc le fond du contenu qui représentera le cadre et en utilisantles divers styles de bordure en CSS(outset, inset, groove, etc...) ainsi que la largeur, l'aspect sera différent.
Voir plus bas des exemples d'encadrements pour bien vous faire comprendre le système.
Code CSS spécifique à cette page.
#contenu
{
background : #;
background-image : url(https://diztest.blog4ever.com/blog/url_artimage-205392-2394229-2914.html);
background-repeat : repeat;
text-align : left;
border:3px inset #C9C9C9;
}
#contenu_accueil
{
background:#;
background-image : url(https://diztest.blog4ever.com/blog/url_artimage-205392-2394077-1514.html);
background-repeat : repeat;
margin-top : 20px;
margin-left : 20px;
margin-right : 20px;
margin-bottom : 20px;
padding-top : 5px;
padding-left : 5px;
padding-right : 5px;
padding-bottom : 5px;
color:#663300;
border:3px inset #C9C9C9;
}
</style>
Ce code CSS est à mettre en début de votre page d'accueil en mode HTML, avant la DIV id contenu_accueilet après un paragraphe vide, en code HTML <p> </p>
Totalité du code à insérer au debut de page en mode HTML.
#contenu
{
background : #;
background-image : url(https://diztest.blog4ever.com/blog/url_artimage-205392-2394229-2914.html);
background-repeat : repeat;
text-align : left;
border:3px inset #C9C9C9;
}
#contenu_accueil
{
background:#;
background-image : url(https://diztest.blog4ever.com/blog/url_artimage-205392-2394077-1514.html);
background-repeat : repeat;
margin-top : 20px;
margin-left : 20px;
margin-right : 20px;
margin-bottom : 20px;
padding-top : 5px;
padding-left : 5px;
padding-right : 5px;
padding-bottom : 5px;
color:#663300;
border:3px inset #C9C9C9;
}
</style>
<div id="contenu_accueil">
Espace pour composer votre page...
</div>
Quelques exemples d'encadrements.
Vous pouvez les utiliser sur votre page d'accueil mais également dans vos articles. Par contre si vous gardezles mêmes images, hébergez les dans votre boîte à images, je ne garantis pas la durée de mes adresses.
<div style="background:url(https://diztest.blog4ever.com/blog/url_artimage-205392-2394080-3832.html) repeat; margin:20px; border:3px ridge #FFCC00;">
<div style="background:url(https://diztest.blog4ever.com/blog/url_artimage-205392-2394226-4835.html) repeat; margin:10px; padding:5px; border:3px ridge #FFCC00;">
ICI le texte ou l'image à encadrer
</div></div>
<div style="background:url(https://diztest.blog4ever.com/blog/url_artimage-205392-2394079-3205.html) repeat; width:500px; margin:20px auto; border:3px groove #FFCC00;">
<div style="background:url(https://diztest.blog4ever.com/blog/url_artimage-205392-2394226-4835.html) repeat; margin:20px; padding:5px; border:3px groove #FFCC00; font-family: arial;">
ICI le texte ou l'image à encadrer
</div></div>
<div style="background:url(https://diztest.blog4ever.com/blog/url_artimage-205392-2394073-3422.html) repeat; margin:20px; border:3px outset #FFCC00;">
<div style="background:url(https://diztest.blog4ever.com/blog/url_artimage-205392-2394226-4835.html) repeat; margin:40px; padding:5px; border:3px inset #FFCC00;">
ICI le texte ou l'image à encadrer
</div></div>
Sur cette page d'accueil, vous avez la possibilité d'afficher du contenu dynamique :
- les 5 derniers articles
- le top articles
- etc...
Là également il y a des possibilités de gérer ces listes, à voir dans l'article sur le "Contenu dynamique" lien.
