Pour accéder plus rapidement au sommaire correspondant à cet article, cliquez sur le lien :
Je voulais placer mon module Articles Récents en colonne principale, mais mon design est élastique, ce qui rendait l'opération compliquée (ajustement sous les différentes résolutions d'écran).

Ci-dessous les News :



Vous devez être en mode avancé pour réaliser cette astuce : Configurer - Mode avancé - Passez en mode avancé

1ère étape
dans Configurer - onglet Accueil - Petit marteau en haut à droite de l'article

  1. Vous ne mettez aucune étiquette : ni date, ni communauté, ni commentaires, ni recommander
  2. Vous sélectionnez le nombre d'articles voulu
  3. Vous demandez un affichage du plus récent au plus ancien
  4. Vous cochez Résumés d'Articles
  5. Nombre de caractères par résumé : 0
2ème étape : vous allez dans le CSS Accueil : Design - Mode avancé - Accueil

Ces lignes sont à compléter ou à créer

Je diminue l'espacement entre les titres des articles. Jouez avec le nombre de px

.extraitArticle {margin-bottom: -10px;}

J'encadre et je mets un fond dans ce pavé

.articles {border: 5px double #000033; background:url(adresse du fond);}

Il se peut que la 1ère image des articles apparaissent

.articles img {display:none;}

Pour faire disparaître la ligne entre les articles

.hrExtrait {display:none;}

Vous pouvez vouloir distinguer les lignes

Pour les lignes impairs

.article_summary_even .titreExtrait {color:#000033;background-color:#f5f5dc;}

pour les lignes pairs

.article_summary_odd .titreExtrait {color:#f5f5dc;background-color:#000033;}

Vous souhaitez mettre en titre de ce pavé "News" ou Nouveauté
Vous créez une image avec fond transparent :



#extraitArticle1 {background:url(adresse de cette image); background-repeat:no-repeat;background-position:center top; padding-top:30px;}

padding-top correspond à la hauteur de cette image

Vous souhaitez mettre une ligne de séparation entre ce titre et le 1er article
#extraitArticle1 .infoExtrait {border-top:3px double #000033;padding-top:10px;}

A ce niveau-là, votre pavé des nouveautés devrait déjà avoir de l'allure.
Voir les 4 commentaires - Ecrire un commentaire
Recommander
Retour à l'accueil

Présentation

: Les ficelles d Anna K.
: 26/06/2006
annak : Aide et astuces pour créer et personnaliser un blog. Toutes les étapes pour créer un blog sur Over-Blog : les premiers pas, la gestion quotidienne (écrire des articles, placer des photos...), les modifications de CSS (changer les fonds, les couleurs de police...), des idées de design...et le personnaliser quelle que soit la plateforme : mettre en valeur les images et les textes, créer des menus, installer de la musique, des gadgets, des compteurs, des astuces de référencement...

Recherche Rapide Sur le Site

Commentaires

Publicité

Contact - C.G.U. - Rémunération en droits d'auteur - Signaler un abus