Relative lack of themes - am I missing something?

Community
15

Yeah the border above posts is a good example… I believe the way the markup is structured is 5+ years old and might even be a remnant of a different default layout.

The border change doesn’t seem like something that would need a huge refactor, but we’d have to touch a fair amount of CSS and HTML to get there because the parent container of topic-avatar and topic-body isn’t the correct width for the border… and if we change the parent container width or introduce another container, that requires more changes, and those changes may require their own changes… and suddenly you’re refactoring the entire post container. Then once we make those changes we have to support our customers through the change and update the themes we’ve built… so it can be quite an arduous process.

While I’d like to be able to do something like this and be done with it:

.topic-post {
  border-top: 1px solid red;
}

…it would eat up a lot of time and break existing themes to get there. And comparatively, one extra selector isn’t nearly as difficult as refactoring the markup:

.topic-avatar,
.topic-body {
  border-top: 1px solid red;
}

Though of course, you start multiplying the number of times you have to do something like that and it can be frustrating. I work on Discourse themes every day, so I understand that!

All that said… we definitely want to update the topic list and topic page markup in the near future. We dropped IE11 support last year, so we can structure things in a simpler way that allows us to better utilize modern CSS layout features like Flexbox and Grid. This will also make it easier to make more dramatic layout changes.

We’ve also started using CSS custom properties more since dropping IE11, and that’s something that can streamline styling too along with bigger underlying changes. Instead of having two separate elements to style we can do something like:

.topic-post {
  --border-color: red;
  .topic-avatar,
  .topic-body {
    border: 1px solid var(--border-color);
  }
}

and then a theme could do:

.topic-post {
 --border-color: green;
}

tl;dr: we hear you! and we’re thinking about how we can reduce these barriers too!

24 Likes