With WordPress 5.3, a new theme was introduced: Twenty Twenty. I had been eyeballing this theme for quite a while as it’s an easy-to-use theme that looks great out of the box and is built on top of Chaplin. This latter theme was one of the first to fully embrace the block editor and has been immensely popular since it was released.
I have tweaked Twenty Twenty a little bit with some custom CSS (or rather Sass). The biggest tweaking has gone into my Photography category archive. On that page, I want the images to speak for themselves and in that regard, I prefer to not have a list of blog posts with excerpts, but a grid-style overview of some pics.
You could, of course, use the “Blog Posts” block on a separate page for that. However, I wanted it to apply to my full photography archive, so I decided to go the CSS route. Here’s what I used on the photography page.
Tweaks for all archives
First of all, there are quite a few things I want to apply to all archives:
- I don’t want to display the word “Category:” in front of the category name.
- The same goes for the categories of blog posts in the meta section of each individual post on these archive pages. It seems a bit redundant to display those categories since I’m already on the category archive; I know what their categories are.
- I also don’t wish to display the caption of images here.
- Finally, I want the description of the category to be a bit wider than is the case by default.
.archive h1 span,
.archive .entry-categories-inner,
.archive figcaption {
display: none;
}
.archive .archive-subtitle {
max-width: 80vw;
}Grids
Now, let’s set up some grids. Below it, I’m going to compile everything together. But before that, I’m going to break it up into smaller sections so I can elaborate a little bit on the separate parts.
First, I’m going to wrap this in a media query to only apply the grid approach if it’s viewed on tablets or desktops. I want to still have a list of single posts on smaller devices.
@media (min-width: 768px) {Second, I’m going to choose display: grid; for the photography archive. Since I want the columns to adjust their width equally depended on the width of the visible window, I’m using fr as the unit and since I need three of those columns, I’m defining grid-template-columns: 1fr 1fr 1fr;.
.category-photography main {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}While I want the featured images to show in a grid, I want the category title and description to show full-width. In order to do so, I need to bridge all the grids. For the .category-photography header, I’m going to indicate that this needs to start at grid-line 1 and finish at grid-line 4 through adding the attribute and value grid-column: 1 / 4;.
Protip: Firefox’s DevTools allows for helpful lines when reviewing the grid characteristics. More info can be found here.
.category-photography header {
grid-column: 1 / 4;
}
There’s a lot of space above the images, so I’ll reduce that by decreasing the padding-top. For simplicity’s sake, I’ve added an !important to also apply it to the first article. Ideally, try to avoid using this and add the most specific selector needed.
.category-photography article {
padding-top: 0px !important;
}Given that the archive is normally a list that includes a lot of text preview and meta-data, we also need to hide quite a bit.
.category-photography .entry-categories,
.category-photography .post-meta-wrapper,
.category-photography .post-inner,
.category-photography .post-meta,
.category-photography figcaption,
.category-photography .post-separator,
.category-photography .pagination-separator {
display: none;
}Post titles on archive
Finally, let’s do some tweaking of the blog post names. Below, the first section focuses on the position of the blog title through a grid. The second section tweaks the h2 element within that grid. Finally, the last section gives some attention to the navigation links at the bottom of the archive.
.category-photography .entry-header-inner {
padding: 0;
display: grid;
grid-template-columns:15% 3fr 1fr 10%;
position: relative;
width: 100%;
}
.category-photography h2 {
text-align: left;
grid-column: 2 / 3;
top: 100px;
position: absolute;
z-index: 100;
font-size: 1.5em;
text-shadow: 0 1px 1px grey;
}
.category-photography h2 a {
color: white;
}
.category-photography .pagination .nav-links {
font-size: 0.8em;
margin-top: 70%;
}Result
When we put that all together, we get the following CSS to make a grid template for the Twenty Twenty theme. You can review this result on the Photography archive of my website.
.archive h1 span,
.archive .entry-categories-inner,
.archive figcaption {
display: none;
}
.archive .archive-subtitle {
max-width: 80vw;
}
@media (min-width: 768px) {
.category-photography main {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.category-photography header {
grid-column: 1 / 4;
}
.category-photography article {
padding-top: 0px !important;
}
.category-photography .entry-categories,
.category-photography .post-meta-wrapper,
.category-photography .post-inner,
.category-photography .post-meta,
.category-photography figcaption,
.category-photography .post-separator,
.category-photography .pagination-separator {
display: none;
}
.category-photography .entry-header-inner {
padding: 0;
display: grid;
grid-template-columns:15% 3fr 1fr 10%;
position: relative;
width: 100%;
}
.category-photography h2 {
text-align: left;
grid-column: 2 / 3;
top: 100px;
position: absolute;
z-index: 100;
font-size: 1.5em;
text-shadow: 0 1px 1px grey;
}
.category-photography h2 a {
color: white;
}
.category-photography .pagination .nav-links {
font-size: 0.8em;
margin-top: 70%;
}
}Tutorials for learning grid
I’ve learnt grid the same way as I learnt flexbox: through gamification. Both Flexbox Froggy and Grid Garden are fun games to get started with these CSS tools. You’ll get the hang of it in no time.
Apart from that, I think both w3schools and CSS-Tricks are great reference sites. When I’m working with grid, I have both of these links open in a tab and refer them constantly.
Leave a Reply