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


#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.


(cpradio) #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.


(cpradio) #4

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


#5

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:


(Rafael dos Santos Silva) #7

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


(Régis Hanol) #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!


(cpradio) #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!


(Régis Hanol) #12