Forum background is transparent

Support

AI-generated summary

Forum background is transparent: andrewlevi is experiencing an issue with the forum background being transparent despite setting the Secondary color value to white in the Neutral color palette. Johani suggests adding CSS code to set the background color to the Secondary color value, which resolves the issue. However, andrewlevi notes that this causes the footer to become white when choosing a category. Johani identifies the problem as the page content not filling the entire viewport and provides additional CSS code to fix the issue. andrewlevi confirms that the solution works, resolving the problem.

1

I have added a global background image but it seems that the forum is transparent and needs to be solid white. Im using the Default Theme and dont see a UI setting to make this solid or transparent. Im using the Neutral color pallate and the Secondary color value is set to white. I dont see any other way to set the whole forum background to white versus transparent. Perhaps this too can be set in CSS - I searched and didnt find an existing topic on this issue. Thanks for the help - new to Discourse but really like it so far.

Background1
Background11280×720 282 KB

2

Welcome to Meta @andrewlevi :wave:

Can you try this CSS in your theme

#main-outlet {
  background-color: var(--secondary);
}

and see if it solves the issue for you?

3

That worked - Thanks. Only problem I see is that when I choose a category the footer is now white. Do you have some magic for that? Thanks!!

Background Issue 071521
Background Issue 0715211280×720 88.3 KB

4

Its also messing with the admin footer - probably same issue. Appreciate the help!

Background Issue 071521C
Background Issue 071521C1280×720 277 KB

5

The issue is not that the footer is white. The issue is that the page content is not large enough to fill the entire viewport.

Still, you can also fix this with CSS. Try adding these as well.

#main > div:first-child {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#main-outlet {
  flex: 1 0 auto;
  max-width: calc(100% - 20px);
  width: $large-width;
}
6

Like magic - Thanks for your help Joe!