I've uploaded a custom background image, I need to make the text stand out

g_campbell

Hello everyone,

I'm working on customizing my nodebb page. I uploaded a background image to match the rest of my site. I would like to know how to create a block around all of the nodebb data that is white to help it stand out from the background and better flow with the rest of my page. I'm sure I can accomplish this via the custom CSS tab, I just don't what the labels for the blocks. I've shown what something might look like on my site below.

Any help is appreciative.

Grant

yariplus

I'm working on a similar theme, and there's not really any consistent formula I can find. Pages have a main div with a class equal to the page route. .category, .popular, .recent, but these also contain the breadcrumbs and tools, which I like to have separated. What's worse is some pages use these classes differently, for example, popular and recent use .category, but it only surrounds the topic list. You might want to look at Lavender, which surrounds most of its list items in a white background, and that works for most of the pages when adding a background image, but some elements still need some help.

but of course, If you just want to wrap all of the content and don't care about surrounding elements individually, you can do like

#content > div {
  padding: 15px;
  background-color: rgba(255,255,255, 0.5);
}

If you use widgets you'll have to use #content > .row > .col-lg-9 > div

g_campbell

@yariplus said:

#content > div {
padding: 15px;
background-color: rgba(255,255,255, 0.5);
}

That helped, It shaded some areas. However not even the main ones. Like all of the categories under the categories section are still not covered with a white background.

yariplus

You might want just

#content {
  ...
}

That will always surround everything.

g_campbell

@yariplus much better!!

Thanks all