I am using RISE in a jupyter notebook with python and enjoying the chalkboard feature. But when using a dark theme the default blue color is hard to see.
I have been trying many (even weird) things and I only could change the color to black (that is even worse with dark themes) editing the Notebook Metadata this way:
"rise": {
"chalkboard": {
"color": "rgb(250, 250, 250)"
},
"enable_chalkboard": true
}
It does not matter what numbers you choose inside the rgb(), it always produces black. It behaves like reveal.js is trying to change the color, but looks like it is having issues while parsing.
Thanks in advance!
RISE is using v1.0.0 of reveal.js-chalkboard
This version has color option informed as an array of colors where the first color gives pen color and the second color gives board drawings color.
For example,
"rise": {
"chalkboard": {
"color": ["rgb(250, 250, 250)", "rgb(250, 250, 250)"]
},
"enable_chalkboard": true
}
Related
I've been trying to create multiple custom properties to use in my CSS files, after searching I discovered they should be prefixed with a double-dash and usually go inside of :root, like so:
:root {
--server-primary: #c38c00;
--server-secondary: #9d7100;
}
However doing this immediately gives me an error: javafx.css.CssParser parse WARNING: CSS Error parsing file:/[redacted]/ColorPalette.css: Expected RBRACE at [3,4].
I've tried finicking with this in every way I can imagine, but the only solution I have found is abandoning the use of these double-dash variables in place of the following:
.root {
-server-primary: #c38c00;
-server-secondary: #9d7100;
}
The reason I want to use the first one with double-dashes is to be able to reference these using var(--variable-name-here), which has the added benefit of actually displaying the color in my IDE, whereas just calling -variable-name-here does not show which color was used:
Using supported JavaFX CSS constructs
I don't think the : in var notation is supported for JavaFX CSS (I don't even know what it is, to be honest).
See the JavaFX CSS reference:
https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html.
The likely equivalent for JavaFX is:
named colors, looked up colors and color functions
Named Colors <named-color>
CSS supports a bunch of named constant colors. Named colors can be
specified with just their unquoted name for example:
.button {
-fx-background-color: red;
}
Looked-up Colors <looked-up-color>
With looked-up colors you can refer to any other color property that
is set on the current node or any of its parents. This is a very
powerful feature, as it allows a generic palette of colors to be
specified on the scene then used thoughout the application. If you
want to change one of those palette colors you can do so at any level
in the scene tree and it will affect that node and all its decendents.
Looked-up colors are not looked up until they are applied, so they are
live and react to any style changes that might occur, such as
replacing a palette color at runtime with the "style" property on a
node.
In the following example, all background color of all buttons uses the
looked up color "ABC".
.root { abc: #f00 }
.button { -fx-background-color: abc }
Color Functions <color-function>
JavaFX supports some color computation functions. These compute new
colors from input colors at the time the color style is applied. This
enables a color theme to be specified using a single base color and to
have variant colors computed from that base color. There are two color
functions: derive() and ladder().
<derive> | <ladder>
Derive
derive( <color> , <number>% )
The derive function takes a color and computes a brighter or darker
version of that color. The second parameter is the brightness offset,
representing how much brighter or darker the derived color should be.
Positive percentages indicate brighter colors and negative percentages
indicate darker colors. A value of -100% means completely black, 0%
means no change in brightness, and 100% means completely white.
Ladder
ladder(<color> , <color-stop> [, <color-stop>]+)
The ladder function interpolates between colors. The effect is as if a
gradient is created using the stops provided, and then the brightness
of the provided <color> is used to index a color value within that
gradient. At 0% brightness, the color at the 0.0 end of the gradient
is used; at 100% brightness, the color at the 1.0 end of the gradient
is used; and at 50% brightness, the color at 0.5, the midway point of
the gradient, is used. Note that no gradient is actually rendered.
This is merely an interpolation function that results in a single
color.
I suggest you use these supported and documented features of JavaFX instead.
There are many examples of their use in the modena.css file which can be found inside your JavaFX installation packages (in Idea search for the file modena.css in your project libraries).
On IDE support (specifically IntelliJ Idea)
With regard specifically to the support for displaying colors parsed from CSS in an IDE, it will of course vary by IDE.
For IntelliJ Idea, which I think you are using, I think support varies depending on the version used. I think the free community edition may have limited or no support for CSS parsing and color display for CSS files. The paid (called Ultimate) version does provide support for CSS parsing and color display for CSS files.
As of 2022.1 Ultimate Edition, for JavaFX CSS, it will accurately display direct assignments of named colors as well as RGB and HSB-defined colors and some of the JavaFX color derivation functions.
It will NOT display colors that are assigned via JavaFX looked-up colors or some of the JavaFX color derivation functions. It will display stops in gradients as long as they are not looked up, but won't display the gradients themselves. Enhancement requests for the IDE could be raised for the IDE to add color display support for the looked up and derived colors and additional support for displaying gradients.
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)
The links within the body change color once you hover and click on the link. Is there a way to have the color fix within the body of the mkdocs. I've been using some mkdocs documentation as an example, but so far I have this
css: `
body {
font-family: ${theme.typography.fontFamily};
--md-text-color: ${theme.palette.text.primary};
--md-text-link-color: #8CD7F7;
--md-code-fg-color: ${theme.palette.text.primary};
--md-code-bg-color: ${theme.palette.background.paper};
}
I would like the links to be the same when the user hovers and clicks on it. Whats the correct syntax for when the link is pressed or hovered over.
I've tried adding
.md-nav__link:hover { color: #8CD7F7; }
.md-nav__link--active { color: #8CD7F7; }
within the body, but that's not helping. I wonder if there's different syntax thats supposed to followed when inside the body
In my project I use, for example, two colors.
I created a folder in root called "stylesheets", where I created the extra.css file. That's what's inside of this file:
:root {
--md-primary-fg-color: #5f64a0;
--md-accent-fg-color: #5f64a0;
}
The first primary color is responsible for the upper bar (please, correct if I am using a wrong term) with the search to change the color.
The second accent color changes the color of the link if you hover. It won't change the color when the link is clicked.
If you keep the primary and accent colors the same, you will have the same color for links if you hover and the upper bar. If you comment the primary color, the upper bar will be purple by default and the links will be the accent color.
Also, if you specify primary and accent colors, you will get the same color when the link is clicked.
Don't forget to configure your mkdocs.yml:
extra_css:
- stylesheets/extra.css
theme:
palette:
primary: stylesheets/extra.css
name: material
logo: 'images/logo.png'
I am working with angularjs google chart API. I have multiple charts in my webpage. I want to make one of the charts h-axis labels to hide or make the labels font color to white so that it is not shown on the webpage. I went through the API but seems there is no such configuration options working right now.
Generated code:
Is there a option modifying the svg elements for that particular chart to hide the h-axis labels.
js code:
sample code tried but failed:
$scope.chart.options = {
timeline: {
showRowLabels: false,
},
hAxis: {title: 'Priority', titleTextStyle: {color: 'white',fontSize:'0'}},
};
I tried to change font size to 0 but even that didn't worked.
This is the selector i was able to craft. Hope it works for you.
If not please tell me.
#timeline div div div svg g:nth-child(3) {
display: none;
}
We have a website here: http://musegroupreno.com/
It is using the Zerif Pro Theme.
I have been able to change all the colors except for the ones in the Muse With Us section. They are the 4 colored circles with the number 100 inside of them. I have tried using firebug to find where the CSS code is to change this and have tried taking a color sample from them and changing any of those colors in the CSS file to the color we want. This worked for other sections on the site but not here. Can anyone tell me where the code is to change these colors?
The CSS is generated by a plugin called Knob which creates the canvas element and is not visible in developer tools CSS panel.
Go to this file: http://musegroupreno.com/wp-content/themes/zerif-pro/js/jquery.knob.min.js in your file server and edit the fgcolor values for each skill.
jQuery(".skill1").knob({
'max':100,
'width': 64,
'readOnly':true,
'inputColor':' #FFFFFF ',
'bgColor':' #222222 ',
'fgColor':' #e96656 ' /* Change this */
});