Rbrace errors in custom CSS

pbwpwork
(@pbwpwork)

6 years, 6 months ago
Hi

I copied the simple block of CSS from a CSS training site (so I know it the correct coding:
```
:root{--main-bg-color:coral;}

.page-id-29 #page > div {
  background-color: var(--main-bg-color);
  padding: 5px;  
}
```
(I have adapted it for my site so it works)

As I say it works, however I am still getting an RBRACE error on line 1 col 7:

--main-bg-color: coral;

If make it a single dash ( – ) the error goes but the script does not run.

Anyone know how to write this so that there is no error and the script works?

Thanks,

Paul

The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

catacaustic
(@catacaustic)

6 years, 5 months ago

What you’re using there is not CSS. I’m guessing that it’s part of an SCSS (or equivilent) file for a pre-prcessor to go through and turn into “proper” CSS. That won’t work if you use it directly in a CSS file.

Thread Starter pbwpwork
(@pbwpwork)

6 years, 5 months ago

OK thanks, so if I want to work with Define Variables, the code needs to be put it in a CSS file and upload it to the server?

Is it possible to use a CSS plugin? Just I’m using the :root feature to alter a header image and I’m trying to come up with a method that my customer can easily update (so that’s why I wrote it in the Customizer). If that is not possible then OK, I was just wondering.
catacaustic
(@catacaustic)

6 years, 5 months ago
It won’t work. What you are using is not CSS. You can’t add it to a stylesheet. It just won’t work if you do it that way.

Have a read up of SCSS and that will give you a better understanding of what you need to have that work on your site if that’s really what you want to do.

If you want normal CSS, you’d need something like this (you’ll need to change the colours to what you want):
```
.page-id-29 #page > div {
  background-color: #CC0000;
  padding: 5px;  
}
```
xdividr
(@xdividr)

6 years, 5 months ago

That should work just fine, in browsers that support CSS variables, otherwise known as custom properties.
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

In your CSS, you’re targeting <body class="page-id-29"> so when you go to that page, you’ll see that the background color is set to coral.

https://pb-tester.freesite.host/?page_id=29

The link you provided https://pb-tester.freesite.host/?page_id=45 doesn’t match that class name, so it won’t show the color you set :root{--main-bg-color:coral;}

Were you expecting something else? More info please.

xdividr
(@xdividr)

6 years, 5 months ago

Your RBRACE error is due to CSSlint not supporting CSS custom properties.

https://github.com/CSSLint/csslint/issues/682

xdividr
(@xdividr)

6 years, 5 months ago

If you’re wanting to add support for the Customizer, have a look at this tutorial:

https://code.tutsplus.com/series/a-guide-to-the-wordpress-theme-customizer–wp-33722

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Rbrace errors in custom CSS’ is closed to new replies.

Rbrace errors in custom CSS

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics