CSS for changing background color surrounding avatar

css

#1

Whats the css class to use to change the background color for the section under/around the user avatar (red section below).

The stuff I tried all either colored only the brown section as in the image above, or colored the section marked but also colored some additional space to the right that’s white in the screenshot above.

Thanks.


(Mittineague) #2

Using background linear-gradient on row and background white on topic-body may do what you want. eg. a quick mock (disregard the red outlines)


(Kris) #3

The class that wraps the avatar here is .topic-avatar, but by default it’s only as tall as the avatar. Here’s a red background to illustrate:

@Mittineague’s workaround posted above is simple and clever, and doesn’t require changing the existing layout. You’d do something like this:

.boxed .row {
    background: linear-gradient(to right, rgba(255,0,0,1) 0%,rgba(255,255,255,0) 40%);
}

.topic-body {
    background: red;
}

Alternatively, you could try making .topic-avatar stretch the full height of the post by adding

.boxed .row {
    display: flex
}

.topic-avatar {
    background: red;
}

I haven’t tested this alternative thoroughly, and it will possibly cause some alignment issues with posts… so if you go this route make sure to keep an eye out. The result that would produce looks like this: