I'm trying to apply certain rules to specific pages on WordPress. I'm trying to target the page class/ID and applying the rules in one line instead of multiple separate pages rules. I'm separating the classes by comma, but it seems to not work, what am doing wrong/is it possible ?
.page-id-62, .page-id-63, .page-id-64 .absolute-footer.dark {
color: rgba(66, 66, 66, 0.52);
}
Just for knowledge when you select multiple selectors is the space required ?
Cheers to all.
Did you mean multiple selector .absolute-footer.dark element in page/post ID 62, 63, 64,... Here is working code:
.page-id-62 .absolute-footer.dark, .page-id-63 .absolute-footer.dark, .page-id-64 .absolute-footer.dark {
color: rgba(66, 66, 66, 0.52)!important; /* !important just in case */
}
Yes, it's possible. you need to add .absolute-footer.dark after each page id class
.page-id-62 .absolute-footer.dark,
.page-id-63 .absolute-footer.dark,
.page-id-64 .absolute-footer.dark
{
color: rgba(66, 66, 66, 0.52);
}
Related
I am working on an app that many different clients will use, but the "themes" can't be shared between clients because their color schemes are considered proprietary and confidential even though I'm aware that sounds absurd.
Right now, the colors are defined in the main App.vue component without the <style> instead of <style scoped>, and then downstream from there the components are all scoped.
The way it currently works is that I'm using CSS variables to define the colors and gradients.
I'm more or less looking for a solution that could do something like this pseudo-code:
const clientName = import.meta.env.CLIENT_NAME
if (clientName === 'abc') {
:root {
--background-color: #f3f3f3;
--default-font-color: #000000;
--primary: #8c4799;
--secondary: #d22630;
--gradient-primary: rgba(140, 71, 153, 0.2) 4.55%;
--gradient-secondary: rgba(210, 38, 48, 0.02) 105.67%;
--failure-color: #b94527;
--badge1: #419bbe;
--badge1text: #ffffff;
--c-white: #f2f2f2;
}
} else if (clientName === 'def') {
--background-color: #0c0c0c;
--default-font-color: #ffffff;
--primary: #c1fc3d;
--secondary: #d22630;
--gradient-primary: rgba(110, 71, 153, 0.2) 3%;
--gradient-secondary: rgba(190, 38, 48, 0.02) 50%;
--failure-color: #b94527;
--badge1: #419bbe;
--badge1text: #ffffff;
--c-white: #ffffff;
}
Keeping in mind that all of the downstream components use these variables and it's a pretty large app.
I'm using Vite for bundling if that makes a difference.
You can create one .css file exporting these css variables for every client. Then, on your main.js entry point, you can import the file corresponding to that client:
const clientName = import.meta.env.CLIENT_NAME
import `#/assets/themes/${clientName}.css`;
So i have a map of colors in sass which goes like
$form-option-colors: (
1: rgba(242,218,177,1),
2: rgba(222,186,133,1),
3: rgba(255,139,107,1),
4: rgba(237,116,83,1),
5: rgba(245,98,140,1),
6: rgba(148,61,112,1),
7: rgba(49,127,163,1),
8: rgba(39,101,130,1)
);
Now i wanna pass each one of these colors to a different div. I've tried to use a #for loop in sass but it keeps throwing me Compilation Errors.
This the #for loop code:
#for $i from 1 through 8 {
$color: map.get($form-option-colors, $i);
.option-#{$i} {
color: $color;
}
}
Keep in mind that i have 8 different .option containers which im iterating through
How can i make this work properly?
You are using the module-function map.get() without importing said module.
#use "sass:list";
#use "sass:map";
$form-option-colors: (
"1": rgb(242, 218, 177),
"2": rgb(222, 186, 133),
"3": rgb(255, 139, 107),
"4": rgb(237, 116, 83),
"5": rgb(245, 98, 140),
"6": rgb(148, 61, 112),
"7": rgb(49, 127, 163),
"8": rgb(39, 101, 130)
);
#for $i from 1 through list.length($form-option-colors) {
.option-#{$i} {
color: list.nth(map.values($form-option-colors), $i);
}
}
You can avoid having to import the module first by calling functions by their global name instead.
map.get() //module
map-get() //global
Though I'd discourage you from doing so, since Sass is going to deprecate the global functions in the future.
Also make sure you are running Dart-Sass.
Got it fixed by importing the module. Thanks!
I am trying out CSS variables and I would like to use RGB colours.
Here's my current CSS Variable:
--primary: rgb(112, 199, 255);
So this works absolutely fine when using the following code:
color: var(--primary)
But some paragraphs also use this primary colour and I would like to give them a slight transparency. Now I could replace that and create another CSS Variable like so:
--primary: rgb(112, 199, 255);
--primary-alpha: rgba(112, 199, 255, 0.7);
But that just feels messy and confusing having two primary colours and what If I use a few different transparencies. I could also use the following CSS Variable:
--primary: 112, 199, 255;
--alpha: 0.7;
and output it using the following code:
color: rgba(var(--white), var(--alpha));
This works as I want and I personally think is a nicer way of doing it but my colours don't preview in my code editor see image.
Look at the --dark variable, it won't show the colour using this code.
Ideally, I would like to use:
--primary: rgb(112, 199, 255);
and output it like so:
color: var(--white), var(--alpha);
But it won't work?
Assuming you're using atom-pigment. The color detection works within comments as well. So you could perhaps add the actual rgb value in the comments only for reference & use the variable as usual. Like so:
--dark: 18, 38, 51 /* this color is - rgb(18, 38, 51) */
I am attempting to use SASS for the first time on my next project (Pomodoro Clock). To get started I just wanted to declare my color variables and set a background color. When I try to apply the styling I get this error:
Invalid CSS after "...(35, 61, 77, 1)": expected expression (e.g. 1px,
bold), was ";"
My code is below.
/*All variables declared*/
$japaneseIndigo: rgba(35, 61, 77, 1);
$babyPowder: rgba(255, 255, 250, 1);
$princetonOrange: rgba(254, 127, 45, 1);
$yankeesBlue: rgba(28, 48, 65, 1);
$mediumSpringGreen: rgba(24, 242, 178, 1);
/*Apply styles*/
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: $yankeesBlue;
}
I know this is a super simple question that shouldn't need this forum to answer but I have sincerely Googled and asked for help elsewhere without any luck. Thank you for your help.
Are you using sass or scss ? I dont think you are allowed to use ';' in .sass files.
Got it from here : Sass Invalid CSS Error: "expected expression"
And double checked : http://sass-lang.com/guide
In Codepen, change your preprocessor from Sass to SCSS.
See this for more info on the difference between Sass and SCSS:
What's the difference between SCSS and Sass?
I'm currently using
::selection {
background: rgba(3, 35, 75, .7);
}
But that only changes the color/opacity when I've selected a text or something. It goes to the default color/opacity on blank spaces etc when I press CTRL+A.
How do I change this?
Example:
Example image
Note that the gray selection is blue, it just acts as I've tabbed out.
I don't know if it is good practice, but it will work with * selector.
*::selection {
background: rgba(3, 35, 75, .7);
}
try replacing all the numbers, the last one is the important one to replace.