Master-Antonio un po' di CSS in administration/appearance/edit custom CSS, aspé che ti passo il sorgente possa mai servirti:
// tag
.TagTile.colored,
.Hero.DiscussionHero.DiscussionHero--colored,
.Hero.TagHero.TagHero--colored
{
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
// tag #generale
.TagTile.colored[style="background-color: rgb(187, 187, 187);"],
.Hero.DiscussionHero.DiscussionHero--colored[style$="background-color: rgb(187, 187, 187);"],
.Hero.TagHero.TagHero--colored[style$="background-color: rgb(187, 187, 187);"]
{
background-image: url(http://i.imgur.com/whVxPw1.png) !important;
background-blend-mode: multiply;
}
// tag #progetti
.TagTile.colored[style="background-color: rgb(0, 0, 170);"],
.Hero.DiscussionHero.DiscussionHero--colored[style$="background-color: rgb(0, 0, 170);"],
.Hero.TagHero.TagHero--colored[style$="background-color: rgb(0, 0, 170);"]
{
background-image: url(http://i.imgur.com/ev2zK1Z.png) !important;
}
// tag #notizie
.TagTile.colored[style="background-color: rgb(0, 136, 255);"],
.Hero.DiscussionHero.DiscussionHero--colored[style$="background-color: rgb(0, 136, 255);"],
.Hero.TagHero.TagHero--colored[style$="background-color: rgb(0, 136, 255);"]
{
background-image: url(http://i.imgur.com/eSAIr1I.png) !important;
}
// tag #codice
.TagTile.colored[style="background-color: rgb(221, 136, 85);"],
.Hero.DiscussionHero.DiscussionHero--colored[style$="background-color: rgb(221, 136, 85);"],
.Hero.TagHero.TagHero--colored[style$="background-color: rgb(221, 136, 85);"]
{
background-image: url(http://i.imgur.com/rDeByQ7.png) !important;
background-blend-mode: multiply;
}
// tag #design
.TagTile.colored[style="background-color: rgb(136, 221, 204);"],
.Hero.DiscussionHero.DiscussionHero--colored[style$="background-color: rgb(136, 221, 204);"],
.Hero.TagHero.TagHero--colored[style$="background-color: rgb(136, 221, 204);"]
{
background-image: url(http://i.imgur.com/drO6vvB.png) !important;
}
// tag #business
.TagTile.colored[style="background-color: rgb(51, 51, 51);"],
.Hero.DiscussionHero.DiscussionHero--colored[style$="background-color: rgb(51, 51, 51);"],
.Hero.TagHero.TagHero--colored[style$="background-color: rgb(51, 51, 51);"]
{
background-image: url(http://i.imgur.com/61V2WkN.png) !important;
}
// tag #grafica
.TagTile.colored[style="background-color: rgb(136, 0, 0);"],
.Hero.DiscussionHero.DiscussionHero--colored[style$="background-color: rgb(136, 0, 0);"],
.Hero.TagHero.TagHero--colored[style$="background-color: rgb(136, 0, 0);"]
{
background-image: url(http://i.imgur.com/mB5GsFZ.png) !important;
}
// tag #musica
.TagTile.colored[style="background-color: rgb(204, 204, 85);"],
.Hero.DiscussionHero.DiscussionHero--colored[style$="background-color: rgb(204, 204, 85);"],
.Hero.TagHero.TagHero--colored[style$="background-color: rgb(204, 204, 85);"]
{
background-image: url(http://i.imgur.com/a1MYPQj.png) !important;
background-blend-mode: multiply;
}
// tag #collaborazioni
.TagTile.colored[style="background-color: rgb(136, 221, 68);"],
.Hero.DiscussionHero.DiscussionHero--colored[style$="background-color: rgb(136, 221, 68);"],
.Hero.TagHero.TagHero--colored[style$="background-color: rgb(136, 221, 68);"]
{
background-image: url(http://i.imgur.com/FFQaUI9.png) !important;
background-blend-mode: multiply;
}
// tag #giochi
.TagTile.colored[style="background-color: rgb(204, 68, 204);"],
.Hero.DiscussionHero.DiscussionHero--colored[style$="background-color: rgb(204, 68, 204);"],
.Hero.TagHero.TagHero--colored[style$="background-color: rgb(204, 68, 204);"]
{
background-image: url(http://i.imgur.com/Vx6E0xz.png) !important;
}
// tag #eventi
.TagTile.colored[style="background-color: rgb(0, 204, 85);"],
.Hero.DiscussionHero.DiscussionHero--colored[style$="background-color: rgb(0, 204, 85);"],
.Hero.TagHero.TagHero--colored[style$="background-color: rgb(0, 204, 85);"]
{
background-image: url(http://i.imgur.com/k1GDAue.png) !important;
}
// tag #paccheri
.TagTile.colored[style="background-color: rgb(255, 119, 119);"],
.Hero.DiscussionHero.DiscussionHero--colored[style$="background-color: rgb(255, 119, 119);"],
.Hero.TagHero.TagHero--colored[style$="background-color: rgb(255, 119, 119);"]
{
background-image: url(http://i.imgur.com/OTgd8nf.png) !important;
}
// tag #test
.TagTile.colored[style="background-color: rgb(102, 68, 0);"],
.Hero.DiscussionHero.DiscussionHero--colored[style$="background-color: rgb(102, 68, 0);"],
.Hero.TagHero.TagHero--colored[style$="background-color: rgb(102, 68, 0);"]
{
background-image: url(http://i.imgur.com/BSIOp76.png) !important;
}
// tag #feedback
.TagTile.colored[style="background-color: rgb(119, 119, 119);"],
.Hero.DiscussionHero.DiscussionHero--colored[style$="background-color: rgb(119, 119, 119);"],
.Hero.TagHero.TagHero--colored[style$="background-color: rgb(119, 119, 119);"]
{
background-image: url(http://i.imgur.com/rrMkEmg.png) !important;
background-blend-mode: multiply;
}
In pratica ho creato degli sfondi delle tile in formato PNG, in bianco e nero e con trasparenza al 50%, e poi li ho impostati come sfondi nel CSS puntando al colore di base della tile per identificarla (quindi bisogna che in flarum il colore della tile sia impostato in quel modo specifico).
