New Template „split-it“

Please post the URLs to pages, where you've made a CMSimple template available for download

Moderator: mikey

AndyCH
Posts: 8
Joined: Sat Jan 18, 2020 4:55 pm

Re: New Template „split-it“

Post by AndyCH » Sun Feb 07, 2021 8:44 pm

Thanks for the explanation ;)
The tragedy of life is not that it ends so soon, but that we wait so long to begin it.

doczimut
Posts: 73
Joined: Thu Dec 25, 2008 1:10 pm

CSS Validator Template „split-it“

Post by doczimut » Sat Feb 27, 2021 5:54 am

Hello
With WC3 CSS Validator, an error message for 5 lines including:

Code: Select all

background-image: linear-gradient(to right, var(--link-main-color), rgba(172, 160, 224, 0));
The error message is:
Value error in ./templates/split-it/stylesheet.css: background-image too few values ​​for the property "linear-gradient, )"
Do you know why ?
Thanks, Doc.

lck
Posts: 2287
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: New Template „split-it“

Post by lck » Sat Feb 27, 2021 11:25 am

Known problem, see here.
The WC3 validator is also not God, but only as good as the development is maintained and updated.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

doczimut
Posts: 73
Joined: Thu Dec 25, 2008 1:10 pm

Re: New Template „split-it“

Post by doczimut » Sat Feb 27, 2021 1:14 pm

I do not know the CCS code.
I notice 2 calls for background-image:

Code: Select all

background-image: linear-gradient(to right, #9E9E9E, rgba(172, 160, 224, 0));
background-image: linear-gradient(to right, var(--link-main-color), rgba(172, 160, 224, 0));
I deleted (x5) what seems to me to be duplicate and cause concern:

Code: Select all

background-image: linear-gradient(to right, var(--link-main-color), rgba(172, 160, 224, 0));
I don't know if I did well, but the variable var(--link-main-color) = #9E9E9E
Maybe linear-gradient doesn't take a variable as an argument.
When do you think ?

lck
Posts: 2287
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: New Template „split-it“

Post by lck » Sun Feb 28, 2021 7:36 pm

doczimut wrote:
Sat Feb 27, 2021 1:14 pm
I don't know if I did well, but the variable var(--link-main-color) = #9E9E9E
Maybe linear-gradient doesn't take a variable as an argument.
When do you think ?
Yes, to please the CSS validator, that would be a possibility, but only for the sake of warnings. It works, only the validator nags because it hasn't learned it yet.

You could also create a variable for linear-gradient in :root {...} and use it accordingly.
So:

Code: Select all

--bg-linear: linear-gradient(to right, #9E9E9E, rgba(172, 160, 224, 0));
And in the appropriate places then:

Code: Select all

background-image: linear-gradient(to right, #9E9E9E, rgba(172, 160, 224, 0));
background-image: var(--bg-linear);
The first line is only a fallback for IE11, because it can't do custom properties. See also here in the template demo:

The custom properties (CSS variables) are meant to be able to quickly change the color of the template. A change is only one place necessary and not at tens of other places.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Post Reply