How can I stop Discourse from altering my Forum's design?

I made a thread about this a few weeks ago, but now I can’t find it. I don’t know if an Admin deleted it or what. Either way, my problem still stands: The design of my Forum keeps changing every week or so, and I would like to stop it.

The last time I didn’t have concrete proof, but now I do:

As you can see in the image above, the description of my categories are weirdly indented. This is new. For weeks this section was perfectly aligned with each other, but today I go to the forum and all of a sudden now it’s messed up.

As I said, this has happened before, and I have posted about it and not received proper help. Why is this happening? And how can I prevent it?

As you can imagine, it’s pretty annoying to spend hours of my time perfecting the design of my forum, only for it to keep altering itself and force me to have to catch these issues and keep fixing them. You can find my forum here.

Thanks!

I can’t say the specific reason why that happened, maybe some new discourse update (or some theme or plugin you use) changed the css. Are you using a custom theme?

What can help you (if you can change the css of your site) is removing (or changing) the margin applied to the logo (at .ember-view > a.category-title-link > div.category-logo.aspect-image in the html explorer for each category item):

.category-logo.aspect-image { 
    ...
    margin: 0.33em 2em 2em 0; # remove
}

The above css causes the descriptions to go to the right, if you remove and then apply a left margin and remove the left padding of the description to stay aligned it should fix your issue (I haven’t done expensive tests tough):

.categories-list .category .category-description {
    margin-left: 75px;
    padding: 0;
}

As to why that happened and if it will happen (something similar) in the future, maybe the discourse team can give a better explanation.

When your site is automatically updated it takes all the changes we have made between one deploy and another. If you only modify the CSS of the site it will hardly break (more likely a part could stop working because some element has been refactored/changed etc), if you modify the templates or use JS scripts it is easier that something can break when we change something.

While we always try to be as forward-thinking as possible when making major changes that can impact hosted and self-hosted sites by creating dedicated topics in the #feature:announcements category, minor changes are only listed on Github until the new beta is released.

You could fix your code easily as @lucasbasquerotto said, but we have no way to warn you in advance of any changes we make or to warn you before deploying to the site.

4 Likes

I’ve only modified the CSS of the site, as I’m not a developer and don’t know how to do anything else.

The theme I’m using for my forum is the Zeronoise theme that I found here on your website.

Thanks for your reply! However, it is not yet helping me understand what I’m doing wrong. If you can let me know what I’m doing wrong, then I can stop doing it. All the themes and theme-components that I install are from you guys. The CSS is the only thing I’m changing in those themes.

Is the way I’m loading the themes wrong? Please help me know what I’m missing because I really want to fix it so I don’t have to deal with random changes on my site’s design every few weeks.

Hey thank you for this! I’ll run some tests!

So you need only to report this issue on that topic and the creator of that theme will fix it properly. When it’s done you need only to update the theme

1 Like

It seems that there’s some key information I’m missing about the Discourse ecosystem that makes me unable to fully understand what you’re proposing. So if my theme “breaks”, I’ll have to contact the theme creator to fix that theme? Why does the theme break in the first place?

Do I just tell the theme creator something like “Hey, my text used to be here, but now it’s there. Can you fix it?” And then the theme creator will change some code in the theme, and then I’ll have to redownload that theme, reupload it to Discourse, paste in my CSS adjustments from the old version (so my design adjustments carry over), and then it will look as it should?

And I have to repeat this process every couple weeks or so as Discourse’s updates move my design around?

How do other users get around this issue? I’d assume most people do CSS adjustments to their themes, right?

The brittleness probably depends on how you’re writing your CSS. Can you give some examples of how you’re overriding styles in the areas that have broken recently? Also, is your forum public? It would be really helpful to see how your forum is styled differently from the default themes.

My forum can be viewed here.

The first issue had to do with the width of my wrapper:

A week or so after I had my look finalized, I visited the forum and noticed that the wrapper was considerably skinnier. Texts that use to take 2 lines to display were now taking 3 or 4.

The second issue is the one I’m reporting in this thread. Where my text broke out of alignment randomly.

I’m just worried because my 28 day trial isn’t even over yet and I’ve already ran into this twice.

There are official discourse themes (created by the discourse team, like the light and dark themes), and unofficial themes. If an official theme breaks, the discourse team should fix it, but if an unofficial theme breaks, you should ask the theme creator to fix, after all, it would be unviable for the discourse team to fix each and every theme that breaks (anyone can post a theme here in the forum, including you and me).

What broke the css is probably a change made by the discourse team that affected (unintentionally) the css of the theme, in which case the theme creator should fix, or you can fork their repository and fix the changes yourself. Or you can hire someone at the #marketplace. It might not be what you wanted, but there’s nothing much to do here for unofficial themes, unfortunately. The good thing is: the fix seems to be easy as I showed in my previous post.

That said, it seems that this theme is owned by discourse, because the repository is:

https://github.com/discourse/zeronoise

So maybe you can ask the discourse team, unless there’s something I’m overlooking.

You can see that the problem is really in the theme by accessing safe-mode at: ActionVFX Forum

Then, disable only the theme and press ok: the descriptions will be aligned.

2 Likes