Le blog du thème Easy Bootstrap

La présentation de votre blog est généralement une liste de billets affichés les uns sous les autres tout au long de la page. Le thème Easy Boostrap propose une présentation moderne avec les articles en quinconce. Lire le billet de blog : Thème Easy [Bootstrap]: un nouveau thème responsive.

Si vous utilisez un thème responsive différent (Flat par exemple), vous pouvez avoir la même présentation que sur ce thème. Le code global est fournit ci-dessous mais des ajustements personnalisés sur les couleurs seront à prévoir.

Le code CSS de ce thème Easy Bootstrap (pour le blog)

Voici le code CSS pour avoir la même présentation que sur le blog du thème Easy Bootstrap :

Code css easyCode css easy (10.04 Ko) - Ce n'est pas un téléchargement, le code sera affiché dans une nouvelle fenêtre de votre navigateur internet. Le code est visible dans le spoiler ci-contre.

Ce code est à coller dans la partie Configuration, Zones éditables et dans la section CSS supplémentaire. Ainsi, il sera plus facile de personnaliser le reste des règles CSS de votre site depuis la partie Configuration, Apparence.

Spoiler:
{/*CONTENT THUMBNAILS*/ .view-blog > .items-container, .blog-items, .view-pages .widget-blog-bloc, .thumbnails-eco, .thumbnails-album, .view-album .thumbnails, .thumbnails-ecard{ margin:0 auto; width:100%;} @media (min-width: 1200px){ .thumbnails-eco > li.span4, .thumbnails-album > li.span4, .view-album .thumbnails > li.span4, .thumbnails-ecard > li.span4{ float:left !important; width:31% !important; margin:5px !important; clear:none !important;} #content-area.span6 .thumbnails-eco > li.span4, #content-area.span6 .thumbnails-album > li.span4, #content-area.span6 .view-album .thumbnails > li.span4, #content-area.span6 .thumbnails-ecard > li.span4{ width:48% !important;} .view-blog > .items-container .item-blog, .blog-items .item-blog, .view-pages .widget-blog-bloc .item-blog{ float:left !important; width:30% !important; margin:5px !important; clear:none !important; background-color: #666666!important;} #content-area.span6 .view-blog > .items-container .item-blog, #content-area.span6 .blog-items .item-blog, #content-area.span6 .view-pages .widget-blog-bloc .item-blog{ width:47% !important;} .view-blog > .items-container .item-blog .clearfix, .blog-items .item-blog .clearfix, .view-pages .widget-blog-bloc .item-blog .clearfix{ overflow:hidden;} #content-area.span12 .view-blog > .items-container .item-blog, #content-area.span12 .blog-items .item-blog, #content-area.span12 .view-pages .widget-blog-bloc .item-blog, #content-area.span12 .thumbnails-eco > li.span4, #content-area.span12 .thumbnails-album > li.span4, #content-area.span12 .view-album .thumbnails > li.span4, #content-area.span12 .thumbnails-ecard > li.span4{ width:23% !important;} } @media (min-width: 980px) and (max-width: 1199px){ .view-blog > .items-container .item-blog, .blog-items .item-blog, .view-pages .widget-blog-bloc .item-blog, .thumbnails-eco > li.span4, .thumbnails-album > li.span4, .view-album .thumbnails > li.span4, .thumbnails-ecard > li.span4{ float:left !important; margin:5px !important; clear:none !important;} #content-area.span6 .thumbnails-eco > li.span4, #content-area.span6 .thumbnails-album > li.span4, #content-area.span6 .view-album .thumbnails > li.span4, #content-area.span6 .thumbnails-ecard > li.span4{ width:47% !important;} #content-area.span6 .view-blog > .items-container .item-blog, #content-area.span6 .blog-items .item-blog, #content-area.span6 .view-pages .widget-blog-bloc .item-blog{ width:46% !important;} #content-area.span9 .view-blog > .items-container .item-blog, #content-area.span9 .blog-items .item-blog, #content-area.span9 .view-pages .widget-blog-bloc .item-blog, #content-area.span9 .thumbnails-eco > li.span4, #content-area.span9 .thumbnails-album > li.span4, #content-area.span9 .view-album .thumbnails > li.span4, #content-area.span9 .thumbnails-ecard > li.span4{ width:30% !important;} #content-area.span12 .thumbnails-eco > li.span4, #content-area.span12 .thumbnails-album > li.span4, #content-area.span12 .view-album .thumbnails > li.span4, #content-area.span12 .thumbnails-ecard > li.span4{ width:22% !important;} #content-area.span12 .view-blog > .items-container .item-blog, #content-area.span12 .blog-items .item-blog, #content-area.span12 .view-pages .widget-blog-bloc .item-blog{ width:23% !important;} } @media (max-width: 979px){ #content-area.span6 .view-blog > .items-container .item-blog, #content-area.span6 .blog-items .item-blog, #content-area.span6 .view-pages .widget-blog-bloc .item-blog, #content-area.span6 .thumbnails-eco > li.span4, #content-area.span6 .thumbnails-album > li.span4, #content-area.span6 .view-album .thumbnails > li.span4, #content-area.span6 .thumbnails-ecard > li.span4{ width:100% !important; margin-bottom:5px !important; margin-left:0 !important;} } @media (min-width: 768px) and (max-width: 979px){ #content-area.span9 .thumbnails-eco > li.span4, #content-area.span9 .thumbnails-album > li.span4, #content-area.span9 .view-album .thumbnails > li.span4, #content-area.span9 .thumbnails-ecard > li.span4{ width:48% !important; float:left !important; margin:5px !important; clear:none !important;} #content-area.span9 .view-blog > .items-container .item-blog, #content-area.span9 .blog-items .item-blog, #content-area.span9 .view-pages .widget-blog-bloc .item-blog{ width:47% !important; float:left !important; margin:5px !important; clear:none !important;} #content-area.span12 .view-blog > .items-container .item-blog, #content-area.span12 .blog-items .item-blog, #content-area.span12 .view-pages .widget-blog-bloc .item-blog, #content-area.span12 .thumbnails-eco > li.span4, #content-area.span12 .thumbnails-album > li.span4, #content-area.span12 .view-album .thumbnails > li.span4, #content-area.span12 .thumbnails-ecard > li.span4{ width:31% !important; float:left !important; margin:5px !important; clear:none !important;} } @media (min-width: 481px) and (max-width: 767px){ .thumbnails-eco > li.span4, .thumbnails-album > li.span4, .view-album .thumbnails > li.span4, .thumbnails-ecard > li.span4{ width:47% !important; float:left !important; margin:5px !important; clear:none !important;} .view-blog > .items-container .item-blog, .blog-items .item-blog, .view-pages .widget-blog-bloc .item-blog{ width:46% !important; float:left !important; margin:5px !important; clear:none !important;} } .thumbnail, .view-blog > .items-container .item-blog, .blog-items .item-blog, .view-pages .widget-blog-bloc .item-blog{ font-size:.9em; padding:0 !important; line-height:1.7em; color: #ffffff; background-color: #666666!important; border-top: 2px solid #f3f3f3 !important; border-right: 2px solid #f3f3f3 !important; border-bottom: 2px solid #f3f3f3 !important; border-left: 2px solid #f3f3f3 !important; border-radius: 5px 5px 5px 5px; } @media (max-width: 480px){ .thumbnail, .view-blog > .items-container .item-blog, .blog-items .item-blog, .view-pages .widget-blog-bloc .item-blog{ font-size:1em;} #content-area.span9 .view-blog > .items-container .item-blog, #content-area.span9 .thumbnails-eco > li.span4, #content-area.span9 .thumbnails-album > li.span4, #content-area.span9 .view-album .thumbnails > li.span4, #content-area.span9 .thumbnails-ecard > li.span4, #content-area.span9 .blog-items .item-blog, #content-area.span9 .view-pages .widget-blog-bloc .item-blog, #content-area.span12 .view-blog .items-container .item-blog, #content-area.span12 .blog-items .item-blog, #content-area.span12 .view-pages .widget-blog-bloc .item-blog, #content-area.span12 .thumbnails-eco > li.span4, #content-area.span12 .thumbnails-album > li.span4, #content-area.span12 .view-album .thumbnails > li.span4, #content-area.span12 .thumbnails-ecard > li.span4{ margin-bottom:5px !important; margin-left:0 !important; width:100% !important; } } .thumbnail:hover, .view-blog > .items-container .item-blog:hover, .blog-items .item-blog:hover, .view-pages .widget-blog-bloc .item-blog:hover{ background-color: #666666!important; border-top: 2px solid #e2e2e2 !important; border-right: 2px solid #e2e2e2 !important; border-bottom: 2px solid #e2e2e2 !important; border-left: 2px solid #e2e2e2 !important;} .thumbnail .badge, .view-blog > .items-container .item-blog .badge, .blog-items .item-blog .badge, .view-pages .widget-blog-bloc .item-blog .badge{ float: right; padding:0 5px; margin-top:10px; margin-right:10px;} .content .thumbnail-title, .view-blog > .items-container .item-blog .media-heading, .blog-items .item-blog .media-heading, .view-pages .widget-blog-bloc .item-blog .media-heading{ text-align: center; margin-bottom:0; font-family: ""Cabin", Arial, sans-serif", cursive; overflow:hidden; padding:10px;} .content .thumbnail-title, .view-blog > .items-container .item-blog .media-heading, .blog-items .item-blog .media-heading, .view-pages .widget-blog-bloc .item-blog .media-heading{ color: #ffffff;} .content .thumbnail-title a, .content .thumbnail-title a:visited, .view-blog > .items-container .item-blog .media-heading a, .view-blog > .items-container .item-blog .media-heading a:visited, .blog-items .item-blog .media-heading a, .blog-items .item-blog .media-heading a:visited, .view-pages .widget-blog-bloc .item-blog .media-heading a, .view-pages .widget-blog-bloc .item-blog .media-heading a:visited{ font-weight: normal; font-style: normal; text-decoration: underline; color: #ffffff;} .content .thumbnail-title a:hover, .view-blog > .items-container .item-blog .media-heading a:hover, .blog-items .item-blog .media-heading a:hover, .view-pages .widget-blog-bloc .item-blog .media-heading a:hover{ font-weight: normal; font-style: normal; text-decoration: none; color: #bd848b;} .content .thumbnail > a, .view-blog > .items-container .item-blog .media-heading > a, .blog-items .item-blog .media-heading > a, .view-pages .widget-blog-bloc .item-blog .media-heading > a{ display:block; width:100%; text-align:center;} .thumbnail-description{ padding:10px; overflow:hidden;} .thumbnail .clearfix, .view-blog .items-container .item-blog .clearfix, .blog-items .item-blog .clearfix, .view-pages .widget-blog-bloc .item-blog .clearfix{ padding:0 10px;} .content .thumbnail-description a, .view-blog > .items-container .item-blog .clearfix a, .blog-items .item-blog .clearfix a, .view-pages .widget-blog-bloc .item-blog .clearfix a{ color:#ffffff; text-decoration:underline;} .content .thumbnail-description a:hover, .view-blog > .items-container .item-blog .clearfix a:hover, .blog-items .item-blog .clearfix a:hover, .view-pages .widget-blog-bloc .item-blog .clearfix a:hover{ color:#ffffff; text-decoration:none; } }

Les personnalisations de ce code CSS

Il y a 5 couleurs à modifier :

  • Le fond (#666666)
  • Le texte (#ffffff)
  • Les liens (#dedede)
  • Les liens survolés (#bd848b)
  • La couleur de la bordure (#f3f3f3)

Voici comment procéder avec le logiciel gratuit Notepad++ :

Ouvrez le code dans Notepad++ puis cliquez sur Recherche puis Remplacer (raccourci Ctrl + h). Dans le champ "Recherche" indiquez le code de la couleur de fond #666666 puis dans le champ "Remplacer par", indiquez la couleur de fond de votre choix.

Cliquez ensuite sur le bouton "Remplacer tout".

Réalisez cette opération pour toutes les couleurs à modifier. Sélectionnez ensuite tout le code (Ctrl + a) puis collez-le dans Configuration, Zones éditables et dans la section CSS supplémentaire.

Voici une page d'aide pour trouver le code hexadécimal d'une couleur.

Remarques et questions

Si vous avez des remarques sur cette astuce CSS, merci de m'en faire part.

Si vous avez des difficultés pour mettre en place cette astuce CSS pour site responsive créé sur e-monsite, n'hésitez pas à m'envoyer un message en précisant l'url de votre site et les difficultés rencontrées. Je vous répondrai dès avoir pris connaissance de votre message.

Ajouter un commentaire