I´m working on a website with a CMS tool. I want to change the background of an image preview, which is in css code this:
.mfp-container {
background: rgb(222, 222, 222);
}
So it's a really basic code, I just want to adjust the color. My CMS Tool works with css variables and I never worked with those and really have no idea how to get a variable out of this.
Does someone know how to get one out of this basic code? Or is there any formula to "convert" it?
https://www.w3schools.com/colors/colors_rgb.asp
It's RGB colour code, so you just enter wanted amount of red 0-255, green 0-255, blue 0-255 separated by commas
To use this color as variable you would declare it like this:
--variable-name:rgb(222,222,222)
And then use it later in CSS like this
background:var(--variable-name)
Related
For example, I have the CSS code where I use the white colour a lot.
:root {
--color-white: #fff;
}
My question is whether it worths to declare colours like 'black' and 'white' as variables or I shall use default white and black CSS colour names? Which way is more efficient?
I doubt if efficiency is the driving force behind the use of CSS variables in the way suggested.
There is no need, and indeed it could cause confusion, to rename existing CSS colors.
CSS variables though make it easier to change things. For example, if you are trying out a theme with text in black on white and if there are several places in your CSS where you need to set color or background-color you could define --col: black and --bg: white and then use var(--col) etc in the relevant places in the style sheet.
If you then want to change them, all you have to do is redefine --col and --bg.
I have a small question that can cause me a problem, I have a project where I set a variable to a color using SASS, here is here is my SASS file __colors.scss :
$wild-watermelon: #f55463;
When I use this color, I do something like this :
.container {
background-color: $wild-watermelon;
}
But I have something with I need to use the color but a little bit transparent, to do so, I have to use rgba(number, number, number, 0.75).
But I don't find this solution a propper one because if I want to change my theme coloring, I have to make changes in multiple files manually, not just one by changing my global variable.
I readed once a proposition, a solution let's say, suggesting that I use var function and I do something like this :
.container {
background-color: rgba(var($wild-watermelon),0.75);
}
It did not work of course, that is why I am here.
Any help would be much appreciated.
Try:
$wild-watermelon: #f55463;
.container {
background-color: rgba($wild-watermelon, 0.75 );
}
If you want to change the color, just change the hex code of the variable.
I would suggest to pick a more generic name though (e.g. $color-primary), just in case you do change the color scheme of your project in the future, so you don't have to change the variable name also. This way is more maintainable.
I'm searching for the correct style to configure CopySourceAsHtml to change my Selenitic style to default Visual Studio style when I copy and paste it to e.g. an e-mail. Does anybody know what CSS style(s) I need to use to set it up correctly?
When I copy & paste source code an e-mail I get a dark background. If I set it to white it will show all text in light colours which are hard to read. So I need to change the complete style.
How does your plugin expect the CSS to look like? If you open the theme I referred to in the comments above in a text editor you'll see a lot of lines like this:
<Item Name="outlining.collapsehintadornment" Foreground="0x00E8DDD7" Background="0x00FAF7F6" BoldFont="No"/>
Now since I don't know how exactly your plugin is expecting the CSS I will go ahead and give an example of what this might look like in CSS:
.outlining-collapsehintadornment
{
color: #D7DDE8;
background-color: #F6F7FA;
}
Or:
<Item Name="String" Foreground="0x001515A3" Background="0x02000000" BoldFont="No"/>
Becomes
.String
{
color: #A31515;
background-color: #000000;
}
How did I get this?
Visual Studio settings file save color codes as "code hex" values. And they use BGR instead of RGB. This means that you can convert this VS color hexes very simple to HTML color hexes. And since HTML uses RGB don't forget to invert the code. So for example:
0x00E8DDD7. Replace the 0x00 (sometimes this may be 0x02) with a #. And then swap the first 2 and the last 2 characters (BGR to RGB). So you get #E8DDD7 = #D7DDE8. And of course "Foreground" is text-color and "Background" is background-color...If your plugin supports it you might even consider to write font-size: bold if you see BoldFont="Yes" in your XML.
Summarized: Open the VSSettings file I referred to in my comment above in a texteditor. Then convert everything to CSS. Write a simple program to do this, or do it by hand, whatever you prefer. Just remember that this is just an example of what it might look like. I don't know what "CopySourceAsHtml" is expecting your CSS to look like.
I'd like to additively build backgrounds in SASS/Compass, ignorant of the existing background string. I am able to accomplish by writing to a global var, but it seems sloppy.
Pseudo:
=mixin-add-icon
// add a background icon
=mixin-add-gradient-from-color($color: blue !default)
// add a background gradient
=mixin-add-texture-bg
// add a bg texture
a
background: blue
+mixin-add-texture-bg
// this should take the existing bg and add texture to it
&.selected
+mixin-add-gradient-from-color()
+mixin-add-icon
// these two should take the existing bgs strings from <a> and add to them
Am I missing something obvious? Thanks in advance.
There isn't currently a way to access an object's properties via Sass, but Sass is an open project so you can always go and ask the developpers if such a feature would be possible on their Github repo.
In my css, I have a table with zebra striping. e.g. white and light-blue.
Lets say I have three columns... what I'd like to do is be able to make maintain the zebra striping, and within css (no javascript) add shading/make the blues darker for each column.
Is that possible? Something like getting the "current" background color #AABBCC and then Adding #000011 to the current color to give me #AABBDD...
No idea if this is even possible, so just wondering. I'm just being lazy, as I don't want to have to redefine my zebra striping for every column/column group I may have.
Thanks
No, this is not supported with CSS, unless you were to use something like CSS expressions (which rely on Javascript).
However, if you're willing to use a preprocessor for your style sheets, you can use a library like LESS to introduce variables and perform addition like that. This example in particular uses Javascript as well, so that doesn't really fit the criteria either.
Haha, in pure CSS, no way. There are several "css-like" languages though that can do this: scss, less, stylus, etc. The gist is that you write code that gets compiled down to "real" CSS.
In stylus:
stripe( color )
&
background color
&:nth-child(odd)
background color + #000011
td.foo
stripe( teal )
generates...
td.foo {
background: #008080;
}
td.foo:nth-child(odd) {
background: #008091;
}