Overblog Suivre ce blog
Administration Créer mon blog
15 janvier 2009 4 15 /01 /janvier /2009 00:36

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

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.

Repost 0
Published by Anna K - dans Archives
commenter cet article
15 janvier 2009 4 15 /01 /janvier /2009 00:32

Cet article a été transféré sur les nouvelles Ficelles d'Anna K

Repost 0
Published by Anna K - dans Archives
commenter cet article
15 janvier 2009 4 15 /01 /janvier /2009 00:23

Vous allez dans le CSS et vous rajoutez ce qui est en rouge ou toute la ligne si elle n'existe pas.

#divRecommander h2 {background-image:URL(adresse de l'image);background-repeat:no-repeat;background-position:left;padding-top:55px; padding-left:50px;  }

padding-top:55px; padding-left:50px;  sont les marges du haut et de gauche. Il faudra jouer avec les pixels pour que votre image soit entière et ne mange pas le titre

Repost 0
Published by Anna K - dans Archives
commenter cet article
15 janvier 2009 4 15 /01 /janvier /2009 00:19

Cet article a été transféré sur les nouvelles ficelles d'Anna K

Repost 0
Published by Anna K - dans Archives
commenter cet article
15 janvier 2009 4 15 /01 /janvier /2009 00:16

cet article a été transféré sur les nouvelles ficelles d'anna k

Repost 0
Published by Anna K - dans Archives
commenter cet article
15 janvier 2009 4 15 /01 /janvier /2009 00:12

Cet article a été transféré sur les nouvelles ficelles d'Anna K

Repost 0
Published by Anna K - dans Archives
commenter cet article
15 janvier 2009 4 15 /01 /janvier /2009 00:12

Cet article a été transféré sur les nouvelles Ficelles d'Anna K

Repost 0
Published by AnnaK - dans Archives
commenter cet article
15 janvier 2009 4 15 /01 /janvier /2009 00:10

Cet article a été transféré sur les Nouvelles Ficelles d'anna K

Repost 0
Published by Anna K - dans Archives
commenter cet article
15 janvier 2009 4 15 /01 /janvier /2009 00:03

Cet article a été transféré sur les nouvelles ficelles d'Anna K

Repost 0
Published by Anna K - dans Archives
commenter cet article
15 janvier 2009 4 15 /01 /janvier /2009 00:03

Cet article a été transféré sur les nouvelles ficelles d'Anna K

Repost 0
Published by Anna K - dans Archives
commenter cet article