A more "in-keeping" style for Flarum tags-theme page using only CSS

Wellwisher

See full image here: https://i.imgur.com/snMbedI.jpg

The <li>tags boxes hover color is set to rgba(0,0,0,.01))

It was an eye-opener seeing an RGBA transparent color to change the hover color state. Very cool CSS trick. This meant you only had to change the default color of the active link and not have to touch the hover color. Nice idea!

As I come from a more traditional forum layout aka simplemachines forum which has categories, sub-boards etc, this to me, felt more "relatable".

What ya'll think? 🙂

Wellwisher

Been tinkering around the "tags" page some more. 🙂
Here, I gave it a more "traditional forum" layout with "child boards":

Child boards contain font awesome folder icons
Inside the board description I have added images
I also got rid of the "fixed" height scroll on all tags box sizes so now, they expand based what's inside the tags boxes
All this is achieved using pure CSS

You can target each child board list item with a different image like so:

.TagTile:first-child>.TagTile-info::after {
background-size: contain;
width: 100%;
content: url("");
background-repeat: no-repeat;
display: block
background-image: url(https://myimage.com/cats.png);
height: 40px;}
;}

To target the 2nd board with a custom image use:

.TagTile:nth-child(2)>.TagTile-info::after

To target the 3rd board with a custom image use:

.TagTile:nth-child(3)>.TagTile-info::after
etc