Remove topic list top horizontal line

Support

AI-generated summary

The discussion is about removing the top horizontal line in a topic list when using topic tiles. Joshua_Kogan started the topic, and awesomerobot provided the solution to remove the line by adding CSS code:

.topic-list tbody {
  border-top: none;
}

This solution worked for Joshua_Kogan.

Later, bifterx asked how to change the color of the top bar and intermediate dividers. Johani provided the solution by adding the following CSS code:

.topic-list tbody {
  border-top-color: red; 
}
.topic-list tr {
  border-bottom-color: red; 
}

This solution was also successful, as confirmed by bifterx.

1

Hi. I plan on using topic tiles, which eliminates standard topic list column titling; however, it does not remove the horizontal line associated with those topics. See images below…

Light theme meta site:

image
image2732×439 127 KB

My in-progress site:

image
image2732×519 242 KB

How do I get rid of that line? Thank you in advance!

2

that border is on the <tbody> element, so to remove it with CSS:

.topic-list tbody {
  border-top: none;
}
3

Woo hoo! That worked like a charm. Thank you!

4

just as an extension to this question, if I wanted change the colour of the top bar and the colours of the intermediate dividers, would this be done in the same place?

thanks

5

If you’re referring to these

00001
000011328×1742 343 KB

then what you’d need is to add is

.topic-list tbody {
  border-top-color: red;  // change "red" to the desired border color
}

and that would create this effect

00002
000021274×757 102 KB

For the intermediate dividers you’d need to add

.topic-list tr {
  border-bottom-color: red; // change "red" to the desired border color
}

and that would create this effect

00004
000041284×1099 161 KB

So all of those put together would look like this

.topic-list {
  tbody {
    border-top-color: red;
    tr {
      border-bottom-color: red;
    }
  }
}
6

super job thanks very much!