clarkwinkelmann while you have some freedom with CSS, I think your target design will require an extension to alter the placement of the badges.
Actually, you can get quite far. The node tree is:
<header class="Post-header">
<ul>
<li class="item-user">
<div class="PostUser">
<h3>
<a href="/u/clarkwinkelmann">
<img class="Avatar PostUser-avatar" src="https://discuss.flarum.org/assets/avatars/sxjSoLE8bheLJUzW.png">
<span class="username">clarkwinkelmann</span>
</a>
</h3>
<ul class="PostUser-badges badges">
<li class="item-group9">
<span style="background-color: rgb(50, 115, 220);" class="Badge Badge--group--9 " title="" data-original-title="Contributor">
<i class="icon fas fa-heart Badge-icon"></i>
</span>
</li>
</ul>
</div>
</li>
<li class="item-meta">
<div class="Dropdown PostMeta">
<a class="Dropdown-toggle" data-toggle="dropdown">
<time pubdate="true" datetime="2018-10-20T21:42:13+02:00" title="Saturday, October 20, 2018 9:42 PM" data-humantime="true">a day ago</time>
</a>
<div class="Dropdown-menu dropdown-menu">...</div>
</div>
</li>
</ul>
</header>
So the sequence is <span class="username">
, <span class="Badge Badge--group--9" data-original-title="Contributor">
and <time>a day ago</time>
. To achieve your desired look, you need to move away the Badge-span via an absolute positioning or a float.
Then you have to add the data-original-title
as mentioned.
The whole thing could look like:
.PostUser-badges.badges {
position: relative;
float: right;
top: -15px;
}
.Badge[data-original-title] {
background-color: #fff !important;
box-shadow: none;
}
.Badge[data-original-title] i {
display: none;
}
.Badge[data-original-title]::after {
float: right;
content: attr(data-original-title);
color: red;
border: solid red 1px;
padding: 0 .4em;
}
As you can see, I've put the label floating to the right. You could also put it in a new line, but the disadvantage would be that you would have to provide the space for the labels even if a user doesn't have any of them resulting in a somewhat untidy look.
The next problem is the color of the label. In my example I've set this manually to red, I think you would have to hard code these colors for every badge group number like:
.Badge--group--9::after {
color: red;
}