CSS: how to make the line (border) between messages bigger?

Product Support

AI-generated summary

Changing the line width between messages

The discussion revolves around increasing the line width between messages. Silvanus initially asked how to find the CSS to change this, and cpradio suggested a possible solution. However, Silvanus realized that the solution changed the line height instead of the line width.

After further clarification, Silvanus provided an image of the desired change: increasing the 1px solid gray line above each message to a 2px solid black line. zogstrip provided a CSS solution using border-top-width, but Silvanus encountered an issue with the avatar border not changing.

The working solution, as provided by Silvanus, is:

.topic-body, div.topic-avatar { border-top-width: 5px; border-top-color: black; }

Finding CSS classes and explanations

Silvanus also asked for a list of all CSS classes and their explanations. Falco suggested using Chrome’s developer tools by pressing CTRL+SHIFT+C and hovering over the desired element to find its CSS classes.

1

How can I find the CSS I’m supposed to change? I’m moderatery knowledgeable of CSS, but I can’t find any list of which to change…

Currently I want to change the line width of the line between messages.

2

I’m not sure if this is what you mean, but try

.cooked { line-height: 30px; }
3

So I put this into Customize > CSS? Not header?

Edit: I put it into CSS.

Result was a nice one, but not quite what I needed. I meant the solid 1px gray line that comes right before a message.

4

Okay, can you explain that a bit more, you want more spacing where? Can you mock it up?

5

Pic.png1376×806 70 KB

This. So basically that 1px solid gray line above each article into a 2x solid black line.

6

And just as a follow up: where do I find the list of all the css used (like, where do I find that there is a .cooked) and their explanations… Finding this general location will help out my customization enormously :slight_smile:

7

On Chrome just CTRL+SHIFT+C and hover over what you want to style.

8

Have you tried this?

.topic-body, .topic-avatar {
  border-top-width: 5px;
}
9

Quite close, thank you! One but: for some reason the border (sorry for confusing with line before!) above the avatar is not changing with that one!

10

With @zogstrip suggestion, it should work. Be sure you have that comma in there between .topic-body and .topic-avatar

You can then use border-color to change its color.

11

The working solution is:

.topic-body, div.topic-avatar { border-top-width: 5px; border-top-color: black; }

For some reason it doesn’t work with only .topic-avatar (i.e. without div). (Maybe a browser-based bug/feature?)

Thank you for the help!