Tuto : Un blog Jimdo en colonnes (code CSS)

L'apparence de votre blog si vous avez un site internet sous Jimdo, est par définition verticale. C'est à dire que les articles (module > Affichage du blog), sont à la suite les uns en dessous des autres et prennent toute la largeur.

Pour ceux qui voulaient un affichage en colonne cela posaient problème.

Avec un petit texte (code CSS) à copier/coller l'effet est instantané et magique!

Comme chaque site obéi à des règles de mise en page différente il faut ajuster le texte au cas par cas.

Mais pour ceux qui veulent essayer sans ce prendre la tête, juste en dessous ce trouve un code à prendre tel quel.


Ce code ne convient pas à la nouvelle page 'blog' proposé par Jimdo, mais pour le module 'affichage du blog'.


Code à copier / coller

<style type="text/css"> /*<![CDATA[*/

 

div.blogselection { /* ensemble du blog */

display: block;

width: 100%; /* remplacez par la largeur de votre contenu */

}

div.n.clearover.j-blogarticle { /* chaque article */

width: 45%; /* la largeur des articles (délimite le nombre de colonne)*/

float: left; /* permet d'en avoir plusieurs par ligne et donc d'avoir des colonnes */

margin: 0  5px 20px 5px ;

}

 

/*]]>*/ </style>

Ou coller le code css?


1- On cible les balises à modifier


Par défaut un teaser (article) de blog, utilise toute la largeur de votre content (le bloc qui englobe votre contenu). Il faut donc réduire leur largeur, pour rendre plusieurs articles sur une même ligne possible.

  • On va donc appeler dans notre CSS le conteneur qui contient nos article (en teaser).

div.blogselection { }

  • Nous allons également appeler nos articles (en mode teaser) pour changer leurs caractéristiques.

n.clearover.j-blogarticle { }

2 - On lui attribue deux changements


  • Un foat: left (ou right) : Il s'agit ici de dire que chaque block "article" doit par défaut se mettre à gauche ou a droite du block "article" précédent.
  • Une largeur pour chaque article
Blog Jimdo en colonne

div.blogselection { /* ensemble du blog */

  display: block;
  width: 100%; /* remplacez par la largeur de votre contenu */ }

div.n.clearover.j-blogarticle { /* chaque article */
  width: 45%; /* la largeur des articles */
  float: left; /* permet d'en avoir plusieurs par ligne et donc d'avoir des colonnes */
  margin-left: 5px ;
  margin-right: 5px;
  margin-bottom: 20px;
  margin-top: 0px;}

3 - On peaufine ensuite : date, titre, tags et liens


La date

div.post clearover--> intègre la date le titre et les tags.

 

.post.clearover .datetime.dt-style9.dt-nodefault.dt-alignment-right .datetime-inner p.day-word

--> change l'ensemble de la date en mode article

 

.n.clearover.j-blogarticle .datetime.dt-style9.dt-nodefault.dt-alignment-right .datetime-inner p.day-word --> change l'ensemble de la date en mode teaser

 

div.datetime.dt-style9.dt-nodefault.dt-alignment-right--> le module de la date (ne permet pas de modifier le texte de la date, seulement le fond)

 

  • div.datetime-inner --> la date dans sont entier
  • p.day-word --> le jour  Mercredi
  • p.day --> le numéro du jour  21
  • p.mon --> le mois  Janvier
  • p.yr --> l'année  2013

 

Le titre

  • div.post--> mode article
  • div.blogselection--> mode teaser
  • h1.post-title--> le titre de l'article

 

div.blogselection h1 a,

div.post h1.post-title a --> le texte du titre de l'article + en mode teaser

 

div.blogselection h1,

div.post h1.post-title --> le fond du titre article + en mode teaser

 

div.blogselection h1 a,

div.post h1.post-title a {

text-decoration: none !important;}

 

Les tags et liens

  • p.postmeta --> les tags
  • div.n.clearover.j-blogarticle a.blogreadmore --> Lien "Lire la suite"
  • div.n.clearover.j-blogarticle span.comment a --> Lien "X commentaires"


comments powered by Disqus