How to reverse the position of the avatar to be in front of the topic text?

Support
2

Hello and welcome to Discourse!

This is a deceivingly hard thing to do: it uses a table element and it’s not straightforward to change the order without changing the actual HTML structure. And changing the structure would essentially mean replacing the component with your own template, which I don’t recommend trying at all.

I gave this a quick go, and it is somewhat possible with pure CSS, but it’s not a very robust implementation.

In case you want to try:

.topic-list-item {
    position:relative;
}

.topic-list .posters {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    max-width: 150px;
    overflow: hidden;
    display: block;
    box-sizing: border-box;
    height: auto !important;
}

.topic-list .topic-list-data:first-of-type {
    padding-inline-start: 150px;
}

I suggest you scope it to desktop!

1 Like