Graceful Theme

Theme
,
140

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).

141

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?

142

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

1 Like
143

@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%);
}
144

Thanks for reporting it, this update will fix it

1 Like
145

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

2 Likes
146

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

148

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;
}
149

This worked thank you!

150

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.

  1. 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?

  2. 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?

1 Like
151

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

image
image1314Ɨ100 13.3 KB

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