Graceful Theme

[icaria36]

Is it possible to define a specific color for the background container without affecting the Dark mode background color?

We have selected Disable the background image and tiling settings above from the Graceful theme settings and we have added this CSS:

// Background color instead of Graceful background image
.background-container {
  background-color: #FAF0FC;
}

This light violet looks great in the default color palette, but it also appears in the Dark one instead of the dark gray, which is not good.

The original CSS mentions a variable but I don’t know how to use it in a way that provides different colors for light or dark:

background-color: var(--gf-primary-very-low-or-primary-low, #f8f8f8);

Important detail, we just want to change the color of the main background, not the background of the areas with text. This is why we can’t use the Color Palette values directly (unless I have missed something).

[icaria36]

Still trying to change the background for the default (light) mode while keeping the dark background for dark mode.

Even if we want a plain color for the light background, anything we have tried with CSS adds the same color to the background in dark mode.

This is why we are trying with an image instead. When the background image is set to default, the stock Graceful image background is used for light, but for dark mode there is a dark background. It would be great if we could add a custom image that would be used only the light mode as well, but when we try, the same image is used in dark mode. Because the background image is bright and fitting for the light mode, it ruins dark mode.

Can someone help me figure out this, please?

[piffy]

A quick temporary workaround is to use a bg with like 20-50% opacity so it picks up the background colour on both light and dark

[icaria36]

@piffy Thank you very much. This is a decent workaround indeed.

I got lost in the math of calculating a SVG number that with a 20% opacity will, result in #FAF0FC but this gets close enough to my eyes, and dark mode is dark. Phew!

// Background color instead of Graceful background image
.background-container {
  background: rgb(200 190 192 / 20%);
}

[awesomerobot (Kris)]

Thanks for reporting it, this update will fix it

UX: fix powered by discourse location, delete button color

[Joffrey_Persia]

In the theme option, if you click on “edit the parameters”
You can change the json for this :

[
	{
		"setting": "background_image",
		"value": "false"
	},
	{
		"setting": "tile_background",
		"value": false
	},
	{
		"setting": "no_background_image",
		"value": false
	}
]

And it removes the background svg

[GoldenSound]

Has anyone found a way to properly adjust the width of the forum with this theme?

My CSS changes do not seem to be having an effect, and Canapin’s custom width component works fine on the default theme but seems to have no effect on Graceful.

By default the forum is really narrow and it would be great to be able to change this

[Arkshine]

The Canapin’s TC works for me on this theme.
This TC sets --d-max-width and --topic-body-width CSS variables.
You might have another TC or customizations that overwrites these values.

You can try manually, for example:

body {
    --d-max-width: 1500px;
    --topic-body-width: 1500px;
}

[GoldenSound]

This worked thank you!

[GoldenSound]

Width issue is solved for desktop, though I’m now running into three issues:

1. I cannot seem to change the color of user titles with CSS.

using:

.user-title{
background: #F55;
border-radius: 3px;
color: #FFF !important;
font-size: 12px!important;
padding-left: 7px;
}

as an example, the change to padding, background etc are applied correctly, but the actual text color itself is ignored and remains the default yellow. Is there a different thing I should be addressing to change that? The yellow is extremely hard to read against a white background by default.

2. On Mobile, the width of the forum is now slightly more than the screen should be, is there a way to have it stay at max 100% width on mobile and not go over, but without undoing the width increase for desktop users?

3. I’m having the same issue @Solari was above in that the color bars on mobile are not present. I tried using the CSS code suggested in response but that didn’t seem to resolve the issue, did anyone figure out how to get category color bars back on mobile?

[GoldenSound]

It seems like the reason for issue 1 is that the theme already has an !important tag on the user title color

Given as we aren’t able to edit the HTML/CSS for this theme is there any way to change or override this?

[danvanmoll]

Hello!

Vertical color bars are still not showing up on my forum’s mobile version. Am I missing sth?

Two Geeks One Cup

Thx!
Dan

[Heliosurge (Dan DeMontmorency)]

Can you provide a pic detailing where these vertical bars would be?

Nice forum btw

[danvanmoll]

Thanks!

I’ve attached a screenshot from another forum that actually has these bars.

Basically the same bars that show on the desktop version.

[Heliosurge (Dan DeMontmorency)]

You’re very welcome.

Okay was taking a look here on Meta with Graceful theme selected. On mobile for some reason there are no colored bars like in desktop. I myself am not sure why.

Though on desktop in the sidebar switch it to mobile view and should be able to use inspect element. I would also check on desktop mode and see how the CSS differs. If needed can likely create a custom component with overrides in Mobile to get the colored bars working as expected.

[danvanmoll]

Thanks! I appreciate it. Since other users had already reported the issue earlier in this thread, I was hoping for a more permanent fix that would hold even after future updates to Grace.

[Heliosurge (Dan DeMontmorency)]

Most ghr be an idea to post this as a Bug using tag ux & graceful-theme

As that may help with visibility.

Alternatively this theme component adds a nice category view. It is used in the Air Theme.

GitHub - discourse/discourse-minimal-category-boxes

[danvanmoll]

Thanks!! I will def. have a look!