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.

Partager cet article
Repost0
15 janvier 2009 4 15 /01 /janvier /2009 00:32

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

Partager cet article
Repost0
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

Partager cet article
Repost0
15 janvier 2009 4 15 /01 /janvier /2009 00:19

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

Partager cet article
Repost0
15 janvier 2009 4 15 /01 /janvier /2009 00:16

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

Partager cet article
Repost0
15 janvier 2009 4 15 /01 /janvier /2009 00:12

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

Partager cet article
Repost0
15 janvier 2009 4 15 /01 /janvier /2009 00:12

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

Partager cet article
Repost0
15 janvier 2009 4 15 /01 /janvier /2009 00:10

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

Partager cet article
Repost0
15 janvier 2009 4 15 /01 /janvier /2009 00:03

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

Partager cet article
Repost0
15 janvier 2009 4 15 /01 /janvier /2009 00:03

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

Partager cet article
Repost0