CSS/Feature Help: Ordering Tags Below Topic

(Anna) #1

Hi everyone,

I’m utilizing tags to indicate to members when a fix is incoming or a reported bug/technical issue has been confirmed as being fixed (after the member marks the issue as solved – a bit redundant, but it works for our company’s needs).

I’d like for the “fixed” and “fix-incoming” tags to always be at the furthest left area in the tag space beneath the topic name. Currently, they just seem to go wherever:

Is there any CSS I could use to put that “fixed” tag at the front, always?


(Rafael dos Santos Silva) #2

Something like:

a.tag-fixed.discourse-tag.simple {
    float: left;

Would work. You will need to handle the comma, and some other things but is possible.

(Anna) #3

Awesome! That worked, however it now looks like the tag is a bit “dropped” compared to the others. Is there anything I can do about that? Perhaps some kind of padding?

(Rafael dos Santos Silva) #4

Yes, but I need to test it on your page. Is it public? Can you share an url?

(Anna) #5

Unfortunately not (yet); it’s for a private forum that’ll eventually become public. I’ll necro this thread or PM you privately after it goes public.

Thanks again for your help!

(Mittineague) #6

You may be able to solve it yourself using your browsers dev tools.

“float” removes an element from the document flow. So any CSS styles that had been previously applied to it - inherited in the cascade - will need to be applied to it in the new “float” rule.

It might not solve everything, but then again it just might.

(Anna) #7

Looks like I was able to solve it with the following (I’m sure there are more elegant ways… I’ll have to come back to it when I get better at CSS! :blush:):

.tag-fixed, .tag-fixed:visited, .tag-fixed:hover { background-color: #009900 !important; float: left; margin: -2px 8px 0px 0px; }