Tag Cloud as Pills (SCSS)
Restyles the Tag Cloud widget and block as a tidy row of rounded pills with equal font sizes, which reads better than a jumble of sizes.
Opens WPIDE on
Code
$accent: #2271b1;
.tagcloud,
.wp-block-tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 0.4em;
a {
display: inline-block;
padding: 0.3em 0.85em;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 999px;
font-size: 0.85rem !important;
line-height: 1.4;
text-decoration: none;
&:hover,
&:focus {
border-color: $accent;
background: $accent;
color: #fff;
}
}
}Notes
Font sizes set by the tag cloud are overridden on purpose.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.