Passing parameters into a css value

support
1

Hi,
I know it’s not really related to hugo but rather to chrome or whatever else, but does someone know why:

<div class="aside_half_width" style="background-color:rgba(#000219,0.8);
">
{{ .Inner | .Page.RenderString }}
</div>

doesn’t work ? To be precise, what fails to display is the color. Chrome in developper tool indicates “invalid property value”, but putting instead “background-color:red” works.
My theme has a shortcode which does pass value, but only to choose from a limited number of case, three, while I would like to get whatever color I pass as a parameter. So the simplest way seemed to stay within the shortcode, instead of messing with variables of which I don’t understand a damn thing.

2

Your CSS-Syntax is wrong. You can either use the rgba color specification for something like rgba(0,2,19,0.8) or a hex value like #000219cc to set the background-color property with an alpha channel. You’ve been mixing both in your example, which is not possible.

3

Then how come my scss are LITTERED with stuff like rgba(#00000a,.7), that work fine ? Why would chromium accepts in all cases but when encased in a “style” attribute ?
Instance: $menu-background: rgba(#00000a,.7);
The exact same property value I showed you, I copied it from elsewhere, in a style sheet. Which works.

4

Sass isn’t CSS.

1 Like
5

Ahhh… It makes sense now. So inside an html file I’m stuck with an inferior version of what I’m used to. Thanks for the information.

6

You might want to keep things simple at the beginning. So, maybe stick with CSS and understand that thoroughly before moving on to SASS. Also, use external CSS files instead of style attributes squeezed into HTML elements. They make the code difficult to read and a nightmare to maintain. In the code you posted, a simple

div.aside_half_width {
  background-color: rgba(0,2,19,0.8);
}

would do what you want for all div elements with a class aside_half_width. And using external CSS also makes it a lot (a lot!) easier to cater for dark vs. light mode.

1 Like
7

I agree wholeheartedly, although things like putting hexcodes or named colors into rgba is not complex, but should be the default behavior imho.
In any case, the real issue is to pass arbitrary parameters from the shortcode to the exterior stylesheet.
I don’t want to choose between a select few color classes, but to write background-color: rgba($paramter_from_shortcode, .4);, hence the title of this thread: “passing parameters into a css value” :grin:

8

Why not use CSS variables instead of front matter parameters? I don’t really understand what styling is doing in there.

9

ah, sorry my bad, I wasn’t clear. What I want is to use the shortcode {{<floating_frame COLOR>}} (color being in hexadecimal or a named color) generate the property
background-color: rgba(COLOR,.4)

10

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.