Gestion des champs dynamiques

Dans la page d'accueil, vous avez la possibilité de présenter l'activité de votre site/blog sous forme de listes, alimentées par des champs dynamiques.
La liste de ces champs est en dessous de l'éditeur de la page d'accueil...

 - Vous avez 4 listes possibles : 5 derniers articles, les 5 derniers commentaires articles, les 5 articles les plus consultés, les 5 derniers commentaires photos, ainsi que les 5 derniers sujets du forum.

 - Le champ des 5 dernières photos se présente sous forme de diaporama.
 - Le champ des 5 photos les plus lourdes se présente sous forme de diaporama.
 - Le moteur de recherche pour les articles est un formulaire.
 - Le nombre total de visiteurs est uniquement un nombre.

Les listes dynamiques

Le code CSS à ajouter à votre feuille de style :     .dynamique ul {list-style-type : square;}

En version Siver ou Gold ,vous avez la possibilité de mettre ce code  dans la bordure gauche/droite, mais avec les balises HTML comme ci-dessous.

J'ai mis comme type de puce "square" soit un petit carré, mais vous pouvez mettre :
       "circle" soit un petit cercle
       "disc"   soit un cercle plein

Vous trouverez plus bas l'exemple de l'emploi de ces puces et même la possibilité de mettre des images, mais en changeant un peu le CSS :

      .dynamique ul {list-style-image : url( adresse image sur internet) ;}

Cependant dans ce cas vous devez prévoir un espace pour que l'image s'affiche dans la DIV créée par le système, la valeur de cet espace sera en fonction des dimensions de l'image.

.dynamique
{
padding-left:25px;
}
.dynamique ul
{
list-style-image:url(https://diztest.blog4ever.com/blog/url_artimage-205392-1212816-229.html);
}

Dans le composeur de la page d'accueil en mode texte, tapez le texte, titre de la liste, vous pouvez le centrer, comme dans mon exemple, en le sélectionnant et en cliquant sur le bouton d'alignement "Centré". Puis vous copiez/coller le code du champ. Même opération pour chaque champ que vous souhaitez insérer sur votre page d'accueil.
Voilà, c'est tout, le système fait le reste. 

et les autres :
                   #dynamique_top_articles
                   #dynamique_artcommentaires
                   #dynamique_imgcommentaires
                  
Ce qui va permettre de gèrer séparément les différentes listes, de variés leur présentation, à chacun de vous de créer son style en harmonie avec le design du blog.
Si vous êtes arrivés à ce stage c'est que vous avez déjà utilisé un maximum de propriétés du CSS et que vous connaissez l'action de chaque attribut, je ne vais pas détailler, mais pour vous aider je mets à votre disposition ci-dessous, les codes CSS et HTML que j'ai créé pour mes blogs et vous pourrez voir le résultat.
 

Pour DizTest, 3 listes seulement, ci_dessous le code CSS commenté :

Sur DizTest, le code HTML avec un plus car j'utilise du Javascript, accepté par le composeur de vos pages, j'ai écris un article sur ce code lien 

Les trois listes ont chacune une puce différente et vous pouvez également mettre des puces images ou icônes voir plus loin les 5 listes sur BRICABRAC,  5 images différentes. Vous trouverez sur Internet des sites proposant des images pour puces, un parmi d'autres lien.

Pour voir le résultat page d'accueil de DizTest

Gestion des champs dynamiques sur BRICABRAC, CSS des listes avec images sur fond transparent.

Code HTML des champs dynamiques sur BRICABRAC, les listes avec images sur fond transparent.

Pour voir le résultat de ce code sur BRICABRAC

Dans la page d'accueil vous pouvez également, insérer comme champs dynamiques :

         - un moteur de recherche

         - le nombre de visiteurs
         - le diaporama des 5 dernières photos de l'album

Champ dynamique "Recherche"

Si vous regardez bien dans le code HTML de ce champ, il est contenu dans une DIV, ayant comme identifiant, ID nommé "dynamique_recherche" et ayant une Classe nommée "dynamique".

Toutes les DIVs de la page ayant la classe "dynamique", sont gérée par la même règle de la feuille de style CSS  .dynamique, le champ recherche en fait partie.

Vous devez tenir compte de cette règle, pour une meilleur compréhension je reporte ci-dessous celle du CSS de DizTest. Comme il n'y a pas de liste(ul), ni de lien (a), il reste une seule règle avec des attributs pour les marges et les bordures. Si vous ne souhaitez pas conserver ces propriétés pour le champ "Recherche", vous devez créer une règle avec l'ID "dynamique-recherche" qui est réservé  à "Recherche" et unique dans toute la page.
Voir dans le deuxième cadre en-dessous, dans la règle #dynamique_recherche , les attributs avec les valeurs qui seront prises en compte. Je modifie uniquement les marges extérieures en mettant "auto" aux marges de gauche et de droite, ainsi la DIV sera centrée dans la partie qui la contient. Puis j'ajoute une couleur de fond, vous pouvez mettre une image de fond avec l'attribut, background-image : url(http:// adresse internet de l'image)

* Petit rappel au passage dans les attributs sous forme condensée, les valeurs  s'appliquent dans le sens des aiguilles d'une montre de la première valeur,  bord haut, bord droit, bord bas et bord gauche.

Code CSS de Recherche

Création des règles spécifiques à ce champ, les marges intérieures (padding) et la bordure reste la même que pour tous les champs classe  .dynamique. Pour l'exemple je rajoute une largeur et une hauteur pour redimensionner la DIV dynamique_recherche qui aura une couleur de fond et des bordures.
A l'intérieur de cette DIV, le formulaire contenant un label, un espace de saisie et un bouton. C'est 3 éléments composent le  fieldset(en vert),  là également pour l'exemple  je lui met une couleur et un cadre, se qui permet de le localiser pour bien comprendre la structure du formulaire.
L'espace de saisie en bleu et le bouton en rouge.Voir l'image plus bas, le label en jaune (Vous rechercher ?), l'espace de saisie du mot à rechercher Il y a un quatrième élément mais il n'est pas visible donc je n'ai rien paramétré.

Code HTML de recherche

<div id="dynamique_recherche" class="dynamique">
<form action="article-recherche-162365.html" method="post">
       <fieldset>
  Vous recherchez ? : <input type="text" name="mot" size="50"/>
    <input type="hidden" name="act" value="rechercher"/>
  <input type="submit" value="GO"/>
 </fieldset>
</form>
</div>

Capture: formulaire de recherche, en couleur pour bien localiser les divers élémments.

Champ dynamique "Diaporama photos"

Peu de chose à faire étant géré automatiquement par le système, juste un petit paramértrage que j'ai trouvé sympa, ajoutez cette règle à votre feuille de style.

Je diminue la marge du haut et je mets une bordure, voir le résultat sur mon blog BRICABRAC lien.

Champ dynamique "Nombre de visiteurs"

Ce champ est peu utilisé, étant donné que nous avons les statistiques et bien souvent nous ajoutons des compteurs de visites. Mais ce champ peut vous servir à remercier vos visiteurs d'être passé sur votre blog.

Voilà de quoi bien présenter tout le contenu dynamique de vos blogs pour intéresser et orienter vos visiteurs, à vos claviers et  créez de belles présentations comme vous en avez l'habitude.

Je rappelle que mes "Labs" sont des tests sur les nouvelles possibilités sur BLOG4EVER donc il est possible que certaines modifications seront faites en fonction des remarques apportées suite à vos essais personnels.

Je vous donnes rendez-vous sur le forum d'aide dans la catégorie CSS et DIZ PERSO.

Je précise également que les IDs ainsi que les diverses nouvelles DIVs, ne sont pas uniquement dans le modèle Diz Perso mais en principe dans les modèles graphiques.