Tudor: Customising the Blog Landing Page

The Tudor template has a blog landing page that features a customizable grid of thumbnail image tiles, each linking to a different blog post. This grid acts as visual navigation, allowing visitors to browse through all your posts in one place.

If you choose Date Style: Callout or Callout Circle, the date of the post will appear as a circle between the thumbnail image and the card below it. The text in the circle auto-adjusts to either black or white, depending on the color of the circle. There are few tweaks you can make to this landing page. First, if you don't want the date text to be white or black you can change it with some CSS: Add the following code to Custom CSS:

/* Tudor: Manually adjust colour of Tudor Date Callout Circle Text */
.tweak-blog-date-style-callout-circle.tweak-cards .entry-text time.date-callout .date-wrapper {
   /* Colour of text */
   color: red;
}

The colour of the circle can be changed in the Style Editor but if you need to change it in CSS, you can do so like this:

.tweak-blog-date-style-callout-circle.tweak-cards .entry-text time.date-callout, .tweak-blog-date-style-callout-circle.tweak-cards .thumbnail-title-wrapper time.date-callout {
  /* Circle colour */
  background-color: white;
}

Below the thumbnail image is a card where the title, date, author and category information usually appear. To change the cards to different colours according to the category of the blog post, add the following CSS:

.tweak-cards.view-list .blog-meta-item a, .tweak-cards.view-list .blog-meta-item a:visited {
  /* Category name font color */
  color: #444;
  font-size: 12pt;
}
/* category called Cat1 */
.category-cat1 .entry-text {
   background-color: #FAD772;
 }
.category-cat2 .entry-text {
   background-color: #8DA88A;
 }
.category-cat3 .entry-text {
   background-color: #F2839E;
 }
.category-cat4 .entry-text {
   background-color: #D5974D;
 }

This CSS assumes the categories are called cat1, cat2 and so on. 


If you're unsure what CSS is, how to add it or where to add it, read our CSS guide.