Fixed-width Discourse theme with background color not possible anymore?

(Lowell Heddings) #1

So my Discourse instance went from this (slightly old screenshot), which matched my regular site with a fixed-width design and the darker background color on the side…

To this, which looks kinda silly, and doesn’t match the main site anymore.

I’m sure I can fix the logo to center properly in the display, but the white background on the topic list that extends to the side of the page is just a big difference.

Is it even possible to make it look the way it was? I don’t need the width to be set to a specific pixel count, I just prefer having borders on the side.

No more max-width?
(James Milligan) #2

To me it looks like your theme has been disabled, and just the header remains. Might be worth double checking that what should be active is active?

(Lowell Heddings) #3

The original screenshot was from an older version of Discourse, I just didn’t have a nice recent screenshot of the forum to show. So some of the changes between the two screenshots are just a result of formatting changes since Discourse launched.

The point I was making was the fixed-width design disappeared.

(Jeff Atwood) #4

Discourse itself is no longer a fixed width design; you can see this in action by rotating your iPad or similar tablet while viewing it.

(Lowell Heddings) #5

And there is no way to theme it with borders on the sides?

It doesn’t have to actually be fixed width for that to happen… Just needs a container div.

(Lowell Heddings) #6

I wish I had access to the old Dev forum, because my original requirement list for what I needed to be willing to switch to Discourse really boiled down to one particular item: being able to make the theme blend into my regular site so that it was a (somewhat) seamless transition going between the main site and the forum, so they would appear to be the same site.

And now, (without any notice to me whatsoever), Discourse suddenly doesn’t support this and the theme dramatically changed (and looks awful so I disabled the custom header for now). I would have expected some notification or something.

You don’t need to support actual fixed-width pixel design to be able to make the margins use a different background color once the window is resized larger than a certain size.

(Jeff Atwood) #7

All I changed a few days ago was to literally go through and delete all the custom widths from the css customizations on HTG, because the custom width (and it was only 100px different) caused so many visual regressions over time. That is literally, exactly what I did. Search for the string width: and remove it where I saw it.

I did not change anything else, so I guess you are referring to other changes that happened weeks or months ago?

I have no idea if what you are describing is possible or not possible at this time, it is 2am Sunday morning.

(Lowell Heddings) #8

After looking into this further…

By removing the #main {width:1100px} rule (or whatever it was set to), the design ended up changing to white on the sides. And of course the header went berserk at the same time, as pointed out by others on my forum.

It appears that adding a max-width rule for #main would have the same effect without breaking as many things, so I’ll just add that rule. And I will try to fix the header later since I don’t have the time right now.

In any case, it was an annoying problem to wake up to on Thanksgiving morning when I didn’t have time to deal with it.

(Jeff Atwood) #9

Sorry, I almost never browse with unnecessarily wide browser windows, so I didn’t notice the sides had changed color, nor did the side colors changing register as a mission critical issue to me. Zero issue on iPad or mobile as well. So this is exclusively a cosmetic color issue that affects only wide browser windows. Can it be handled differently without forcing a fixed width design? Not sure, @awesomerobot would have to chime in.

While we are looking at this, and speaking of design consistency, I think it would be good to dupe the navbar part of the HTG design on the discussion side rather than the giant HTG logo proper. Sort of how Boing Boing is?

(Lowell Heddings) #10

You already have max-width rules on the actual lower-level container so all the rule is doing is tweaking the wrapper element to also have a max width. Shouldn’t matter at all, and it’s not really fixed width.


We used max-width on our forum as well but it causes a couple of problems. First the user-card pop-up when viewing the topic list is way out on the right-hand side of the page rather than over the mouse-click.

Secondly, when clicking the admin tool icon at the bottom right of the thread, the menu again pops up way out to the right:

Do you find the same problems and is there any way around it? You can manually define the width of the user-card popup but I haven’t been able to find a customisation for any other element(s).

(Sebastian) #12

Sorry to be digging this up, but now what’s the best practise to re-enable a fixed with scenario in current discourse? which are the key CSS knobs to turn?