I'm using the revealjs library in R to build a set of slides. I would like to:
customise font color
put a dotted border line that separates headers and footers
I've managed to set the colour of text that appears on a slide by adding the following into the CSS file:
#mycustom {
color: blue;
}
Then in the markdown document, I would use it loke so:
## Slide 2 {#mycustom}
XYZ
- a
- b
- c
This changes the colour of everything except for "Slide 2". I'd like to control the headers as well, and ideally I'd like to be able to set these colours in the CSS once.
As for my second issue, I've added the following to the CSS file:
.reveal .header {
padding: 1px;
border: 1px dashed orange;
}
Then I modified the revealjs template that can be found under <R_DIR/library/revealjs/rmarkdown/templates/revealjs_presentation/resources/default.html> and added <div class="header"></div> under <div class="slides"> but the result looks disappointing: I'm getting a small double dashed line as shown in the attached image.
If you have a suggestion on how to improve this, please let me know.
Many thanks!
As for your first problem, why not just use
<style>
#myCustom > h1, #myCustom > h2 {
color: #FF0000;
}
/* or if you want to change all h1: */
h1 {
color: #00FF00 !important;
}
</style>
Related
I am currently using variables keeping track of colors for both light and dark themes (e.g. --light-background-color, --dark-background-color). This isn't too hard with two themes but seems a bit manual and if faced with more themes it becomes impractical.
I have seen things like night shift that apply CSS filters which invert the colors on a webpage. How do these filters work? and how would I go about implementing them?
One way to go about this is to have a set of general theme color variables, rather than specific color variables for specific themes like you're trying to do here.
You can define these variables in the body element and override them with the class or a custom attribute of the body.
Use these variables as you would normally for your other HTML elements, and just change the attribute of the body element to apply a different theme.
The important part here is to make sure your theme color variables have corresponding contrasting color variables as well, so that things like white text on a dark background can swap to dark text on a white background.
Here's an example, where primary and secondary theme and contrast colors are defined in the body element, and are overridden when the body has the "dark" class applied to it:
document.querySelector("button").addEventListener("click", () => document.body.classList.toggle("dark"));
body {
--color-primary: #b4e9ce;
--color-primary-contrast: #000000;
--color-secondary: #308d43;
--color-secondary-contrast: #ffffff;
/* Other theme colors... */
}
body.dark {
--color-primary: #202d26;
--color-primary-contrast: #ffffff;
--color-secondary: #8f8f8f;
--color-secondary-contrast: #000000;
/* Other theme colors... */
}
button {
padding: 10px;
margin-bottom: 20px;
}
.wrapper {
padding: 20px;
background-color: var(--color-primary);
border: solid var(--color-secondary) 10px;
}
.wrapper h1 {
font-family: sans-serif;
text-align: center;
color: var(--color-primary-contrast);
}
<body>
<button>Toggle Theme</button>
<div class="wrapper">
<h1>Hello World</h1>
</div>
</body>
Single Line CSS will change Light Theme to Dark:
<style>
body
{
filter: invert(1);
}
</style>
I'd like to style niqqud characters inside html differently than the letter.
Suppose I'd like to have Hebrew letter Bet black while Dagesh in it green.
How can this be made in html+css?
This doesn't do the task:
<div style = "font-size: 500%">
<span style = "color: black">ב</span><span style = "color: red">ּ</span>
</div>
It results in : http://jsfiddle.net/nv7ja459
(link with bigger font: http://jsfiddle.net/nv7ja459/1/)
So the dagesh is no more inside the letter.
Link to screenshot https://drive.google.com/file/d/0B4SYIrNV4hXYZ0ZyWXZnZWg4OGc/view?usp=sharing
The main issue here is that when you wrap the dagesh, niqqud or other diacritic in a span (to style it) - the browser no longer knows which consonant it was attached to.
Because of this, it cannot position it correctly. For example, vav is much narrower than shin. Let's say the browser positions qamats 5px to the right when attached to a vav and 10px to the right when attached to a shin. When you wrap qamats in a span the browser does not know which consonant it is attached to and therefore does not know how far to move it to the right. So it just gives up and doesn't move it to the right at all. Hence, why, when you wrap vowels, etc in a span the position is messed up.
You can color different letters differently without messing up positioning as long as each consonant is inside the same span as any any attached vowels / diacritics. You can also color the first letter (including its vowel) differently using the ::first-letter CSS selector.
Finally, you can use a layering approach as discussed in Jukka's answer when a consonant and its attached diacritics need to be colored differently. I have added a more thorough example to my code snippet.
I tried with SVGs to see if they offered a better solution. But SVG's suffer from the exact same problem.
PS Can you spot the deliberate spelling mistake in shalom? :D (AKA I cannot be bothered to fix it)
.example-one {
font-size: 100px;
}
.example-one .one {
color: red;
}
.example-one .two {
color: green;
}
.example-one .three {
color: pink;
}
.example-one .four {
color: blue;
}
.example-two {
font-size: 100px;
}
.example-two::first-letter {
color: orange;
}
.example-three-a, .example-three-b {
font-size: 100px;
position: absolute;
right: 0;
}
.example-three-a {
color: red;
z-index: 1;
}
.example-three-b {
color: green;
}
<div class="example-one" dir="rtl">
<span class="one">שָׁ</span><span class="two">ל</span><span class="three">וּ</span><span class="four">ם</span>
</div>
<div class="example-two" dir="rtl">שָׁלוּם</div>
<div class="example-three-a" dir="rtl">שלום</div>
<div class="example-three-b" dir="rtl">שָׁלוּם</div>
The example is displayed in different ways in different browsers, depending on many things including the font(s) used. For example, in my test on Win 7, Firefox shows a bet with dagesh in all black, whereas Chrome and IE show a black bet with a red dagesh that is badly or very badly displaced.
There is no reason why your approach would not work. Neither is there any specification requiring that it should work. Browsers (and other rendering software) can display the combination using a single precomposed glyph, in which case the glyph will obviously be in one color. They can also display the base character and the diacritic mark separately; this could result in the desired rendering, but positioning a diacritic mark is a real challenge, and browsers often fail.
This means that you need a trick of some kind.
A relatively simple trick is to have content that has both the base character (bet in this case) and a combination of the base character and a diacritic mark (here dagesh), set different colors on them, and superimpose them so that the base character is topmost. The main objection is logical: the document then contains the base character appearing with no reason (except the visual rendering). Assuming this is acceptable, here’s how to do it:
[Code edited Dec 16, 2020, to make both of the inner elements absolutely positioned.]
<style>
.colcomb { position: relative }
.colcomb .base, .colcomb .combined { position: absolute; left: 0; top: 0; }
.colcomb .base { z-index: 200; }
.colcomb .combined { z-index: 100; }
.colcomb .combined { color: red; }
</style>
<div style = "font-size: 500%">
<span class="colcomb">
<span class="base">ב</span>
<span class="combined">בּ</span>
</span>
</div>
This will work:
<font color='green' size='12'>ּ</font><font color='black' size='12'>ב</font>
tested on chrome and firefox, if its red you want the dot instead of green just change the green to red
the font size is at 12 just to make it visible, you can remove that also
http://i.imgur.com/smkx3MN.png - Screenshot for how it looks for me
I'm trying to create a HTML widget:
HTML:
<div>
<h1 class="title" data-bind="title">Title</h1>
<div>
<h1 id = "dc1" class="dc">DC1</h1>
</div>
<div>
<h1 id = "dc2" class="dc">DC2</h1>
</div>
<p class="updated-at" data-bind="updatedAtMessage"></p>
</div>
And I need to be able to set the background color of the id="dc1" and id="dc2" elements dynamically in CoffeeScript. I plan to do this by adding a class with a background color setting:
SCSS:
&.up {
background-color: green;
}
&.down {
background-color: red;
}
.dc {
background-color: orange;
font-size: 30px;
float: left;
width: 50%;
}
So far I have managed to set the whole widget background but not the child elements mentioned above:
I have been using:
CoffeeScript:
$(#node).removeClass('up down')
$('#dc1').removeClass('up down')
$('#dc2').removeClass('up down')
$(#node).addClass('down')
$('#dc1').addClass('down')
$('#dc2').addClass('up')
Note ultimately I will add the classes depending on some data rather than hard coding them to 'up' or 'down' in the coffeescript.
But nothing happends.. Am I getting selecting the id="dc#" elements correctly?
If it helps with context I'm doing this for Dashing
Your SCSS doesn't make sense so I'd guess that your missing an error from the SCSS-to-CSS conversion. An & in SCSS is a reference to the parent selector:
& will be replaced with the parent selector as it appears in the CSS
so have &.up at the top level makes no sense and should generate an error. If we fix the SCSS so that .up and .down apply only to .dc:
.dc {
/* ... */
&.up {
background-color: green;
}
&.down {
background-color: red;
}
}
then everything seems to work just fine.
Demo: http://jsfiddle.net/ambiguous/9y9uywm9/
You can use Sassmeister (and other similar online tools) to see what SCSS thinks of your original SCSS.
I found out that html and body quote got basically a background:none.
How can i change that to apply a new background in one of my quote ?
For example, if you want a grey background for your body, put the following code :
body {
background-color: #CCCCCC !important;
}
The !important lets you override a property that has been defined in another CSS. In the case of Foundation, the background has probably been set before.
Hope that it will help you.
You have two background tags in both style sheets of Foundation 4:
Try to edit:
css/foudation.css
body {
background: white;
...
}
css/normalize.css
html{
background: #fff;
...
}
If using foundation with SASS add this to ./scss/app.scss :
body, html {
background-color: $white !important;
}
where $white - variable defined in ./scss/_settings.scss
I'm developing a website that will contain two pages for testimonials. The first two testimonials will be displayed on the home page, then the other three testimonials will be displayed on the original testimonial page.
The original testimonial page background-color is different from the home page. I want to change the text color of the testimonials page. I want to know if is it possible to change the style of the same div but in different page using the CSS attributes and selectors?
This is the class that I want to style differently not on home page but on original .testimonial page
.testimonial-author {
color: #14C2E7;
font-family: 'lobster_1.4regular';
font-size: 35pt;
height: auto;
line-height: 0;
position: absolute;
text-shadow: 1px 1px #000000;
width: 850px;
}
I've tried to use the below method:
.other-pages-background, .testimonial-author{
color: red !important;
}
but it changes on all the pages.
thank you
You'd probably be better off wrapping your testimonials on the homepage in another div, so you can use your CSS to target the testimonials on the homepage, without effecting the testimonials page itself.
For example;
on your homepage you could have
<div class="homepage-testimonials">
<div class="testimonials">
<div class="testimonial-author">John Doe</div>
</div>
</div>
Your CSS;
.homepage-testimonials .testimonial-author { color: red; }
Comma means both selectors get the same styling. Try it without the comma to combine them:
.other-pages-background .testimonial-author{
color: red !important;
}
UPDATE:
Since you are using Wordpress, you can use the following with the appropriate page id:
body.page-id-111 {
color: red !important;
}
There are different ways to achieve this.
Include a additional css file say homepage.css in your homepage along with testimonials.css which will contain css to override the default color.
.testimonial-author {
color: $HOMEPAGE_COLOR;
}
Add some class body tag of your Homepage and overwrite the css property like below.
HTML
<body class="homepage">
CSS
/* Will be applied in Testimonial page */
.testimonial-author {
color: #14C2E7;
font-family: 'lobster_1.4regular';
font-size: 35pt;
height: auto;
line-height: 0;
position: absolute;
text-shadow: 1px 1px #000000;
width: 850px;
}
/* Will be applied in Homepage */
.homepage .testimonial-author {
color: #14C2E7;
}
I prefer the later options.
When you load the page ask php to write in the head AFTER the css load
<script>
.testimonial-author {
color: #color;}
</script>