xaringan metropolis theme slide title font size - r-markdown

When using the metropolis theme in xaringan (RStudio 1.2.1070)
output:
xaringan::moon_reader:
css: [default, metropolis, metropolis-fonts]
I wish to have a smaller font for the title of each slide. If I use h1 for a slide title i.e.
---
# The title of this slide
content
it works as expected, but if I try to use h2 i.e.
---
## The title of this slide
content
the text appears in the body of the slide and not the banner.
Suggestions?
Update
Thanks for the prompt answer Martin. I modified your suggestion slightly.
Including:
.remark-slide-content.hljs-default {
border-top: 40px solid #23373B;
}
adds the border to the title slide (which I didn't want).
For me, just adding this works fine:
<style>
.remark-slide-content > h1 { font-size: 35px; margin-top: -88px; }
</style>
Nevertheless, I must say my original question about using ## was prompted by the entry on xaringan Presentations in R Markdown: The Definitive Guide https://bookdown.org/yihui/rmarkdown/xaringan-format.html where it states:
7.3.1 Slides and properties
Every new slide is created under a horizontal rule (---). The content
of the slide can be arbitrary, e.g., it does not have to have a slide
title, and if it does, the title can be of any level you prefer (#,
##, or ###).

Try the following:
---
title: Test
output:
xaringan::moon_reader:
css: [default, metropolis, metropolis-fonts]
---
<style>
.remark-slide-content.hljs-default {
border-top: 40px solid #23373B;
}
.remark-slide-content > h1 {
font-size: 20px;
margin-top: -55px;
}
</style>
---
# The title of this slide
content
I guess you have to play around with the settings to achieve exactly the layout you want.

Related

How to adjust title size or banner size of a single slide in xaringan

I have encountered an issue with the size of banner title as in the following picture.
It is two-line title, which does not fit into the banner.
Is there any way to make the banner size bigger (vertically increased) or to make font size of title smaller.
I would appreciate it if you could show me both ways. Thanks.
My code is
---
title: "Lecture"
subtitle: "subtitle"
author: "Instructor"
institute: "University"
output:
xaringan::moon_reader:
css: [default, metropolis, metropolis-fonts, "styles.css"]
lib_dir: libs
seal: false
nature:
highlightStyle: arta
highlightLines: true
countIncrementalSlides: false
titleSlideClass: [top, left]
---
class: title-slide, top, left, inverse
background-image: url(aaa.jpeg)
background-size: cover
# *`r rmarkdown::metadata$title`*
## *`r rmarkdown::metadata$subtitle`*
### `r rmarkdown::metadata$author`
### `r rmarkdown::metadata$institute`
### `r rmarkdown::metadata$date`
### `r Sys.Date()`
```{css, echo=FALSE}
<style>
.remark-slide-content.hljs-default {
border-top: 40px solid #23373B;
}
.remark-slide-content > h1 {
font-size: 35px;
margin-top: -85px;
}
</style>
```
```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
```
---
# Why people are constantly switching jobs, causing frictional unemployment?
---
The updated version of problematic page is written in the following way:
---
class: custom
```{css, echo=FALSE}
.remark-slide-content .hljs-default {
border-top: 40px solid #23373B;
}
.remark-slide-content > h1 {
font-size: 35px;
margin-top: -85px;
}
.custom h1 {
font-size: 24px;
}
```
# Causes of unemployment: Why people are constantly switching jobs, causing frictional unemployment?
### .my-style1[Sectoral shifts]
### .my-style1[Structural shifts]
### Seasonal changes
### Taste shocks
---
To define CSS rule for a specific slide (It might be to change the title font size of that specific slide or to do anything), define a class: your-class-name just after creating a new slide with the ---.
So to change the title font size of that single slide, we write class: custom just after --- and then define CSS rule in css chunk for .custom to reduce the font-size.
---
title: "Lecture"
subtitle: "subtitle"
author: "Instructor"
institute: "University"
output:
xaringan::moon_reader:
css: [default, metropolis, metropolis-fonts, "styles.css"]
lib_dir: libs
seal: false
nature:
highlightStyle: arta
highlightLines: true
countIncrementalSlides: false
---
class: title-slide, top, left, inverse
background-image: url(lights.jpg)
background-size: cover
# *`r rmarkdown::metadata$title`*
## *`r rmarkdown::metadata$subtitle`*
### `r rmarkdown::metadata$author`
### `r rmarkdown::metadata$institute`
### `r Sys.Date()`
```{css, echo=FALSE}
.remark-slide-content .hljs-default {
border-top: 40px solid #23373B;
}
.remark-slide-content > h1 {
font-size: 35px;
margin-top: -85px;
}
.custom h1 {
font-size: 24px;
}
```
---
class: custom
# Why people are constantly switching jobs, causing frictional unemployment?
---
# Heres another slide title

fonts to html output Rmarkdown

When I used \textsf{what} in the following document, "what" disappears in the output file. What should I do to prevent the problem while changing the font of "what"? Thanks!
title: "test"
author: test
date: 11/23/2020
link-citations: yes
output:
bookdown::html_document2: default
---
\textsf{what}
If you want to change the font when rendering to html output you colud use some inline CSS e.g.
<p style = "font-family: Times New Roman; color: red;">what</p>
will print "what" in red using Times New Roman.
I believe \textsf{what} is latex syntax, which is for PDF output. You are rendering to HTML in your example.
as the #stefan suggested inline CSS in your Rmarkdown it would look like this
---
title: "test"
author: test
date: 11/23/2020
link-citations: yes
output:
bookdown::html_document2: default
---
<style>
body, p {
background-color: lightgray;
color: black;
font-family: Arial Black;
}
</style>
what
I used Arial Black for the example to showcase the effects below.

orbit slideshow custom next prev buttons links left right arrows

I am using zurb foundation orbit slideshow. The next and the prev buttons or links on the left and right edge of the page is the default black triangle. Please have a look at this test page:
http://www.endsnore.com/_test1b/index.aspx
How do I customize the next and prev buttons or links? How do I add my own arrow code: ‹ and › OR add my own custom arrow images
like these orange left and right arrows here:
http://www.getaveo.com/index.aspx
Please provide exact code example. I would appreciate it. Thank you very much in advance!
Working with orbit I found a pretty nice solution: using the :before on the .orbit-prev span and .orbit-next span tag via CSS you can modify the navigation buttons.
I do not think you can add images as button without editing the js code of the slider, but this solution works nicely, and you can obviously tweak it for your needs
See the jsFiddle here: http://jsfiddle.net/endorama/5SHz5/3/
Basically you need to add this CSS, which remove the arrows ( are borders on the span element ) and replace them with a gliph ( see the content: "..." )
.orbit-container .orbit-prev span,
.orbit-container .orbit-next span {
color: red;
border: none;
font-size: 70px;
text-indent: 0;
margin-top: -32px;
}
.orbit-container .orbit-prev {
background-color: transparent;
}
.orbit-container .orbit-prev span:before {
content: "\2039";
}
.orbit-container .orbit-next {
background-color: transparent;
}
.orbit-container .orbit-next span:before {
content: "\203A";
}
Hope this helps, cheers :)
NOTE: Be aware that if stack_on_small is true you content will be stacked and the arrows hidden. I didn't tweak this behaviour because seems logical to me. just disable this option when you initialize Orbit to solve this problem.
My Dear friends! Please find complete solution for your troubles of ORBIT.
It takes 5 min to make custom buttons(image or chevron or font-"Font Awesome") as you navigation arrows.
In your js:
$(".next-slide").click(function() {
$("#ORBIT-ID").siblings(".orbit-next").click();
$("#ORBIT-ID").siblings(".orbit-timer").click(); // Remove this line to pause the orbit. (it pauses whenever you change slides by default)
});
$(".prev-slide").click(function() {
$("#ORBIT-ID").siblings(".orbit-prev").click();
$("#ORBIT-ID").siblings(".orbit-timer").click(); // Remove this line to pause the orbit. (it pauses whenever you change slides by default)
});
In your css:
.orbit-container .orbit-prev, .orbit-container .orbit-next {display: none;}
.next-slide {/* PUT YOUR STyLES HERE*/}
.prev-slide {/* PUT YOUR STyLES HERE*/}
If you are using font awesom:
same js as above
css:
.orbit-container .orbit-prev, .orbit-container .orbit-next {display: none;}
html:
<span class='prev-slide'><i class='icon-chevron-left'></i></span>
<span class='next-slide'><i class='icon-chevron-right'></i></span>
Thats it! Rank me if you like it!
I had success with stacey.mosier's answer and was able to change my arrows to an image using the CSS content property. Using Foundation v5.2.2
Approach #1
This is what working code for a single class looks like:
.orbit-next {
content: url("Homepage/Homepage_Banner_Arrow_Next_on_retina.png");
width: 16px !important;
height: 62px !important;
margin-right: 20px;
}
I set the width and height of the .orbit-next class to be equal to that of the image I'm adding.
And for the hover styling:
.orbit-container .orbit-next:hover {
content: url("Homepage/Homepage_Banner_Arrow_Next_off_retina.png";
background-color: transparent; //so there's no background effect
For .orbit-previous the rules are basically the same as above (except margin-right becomes margin-left and you use the prev arrow path instead of the next)
Approach #2
To stay DRY I instead implemented a "multiple selector" and now only need one arrow asset by rotating the current one via css transform
.orbit-next, orbit-prev { //All the above rules except the margin }
.orbit-next { margin-right: 20px; }
.orbit-prev { margin-left: 20px; transform:rotate(180deg); }
.orbit-container .orbit-next:hover, .orbit-container .orbit-prev:hover {
//the above hover rules
}
I anticipate the need to scale/hide the size of the arrows based on the column width currently active, something to consider, but beyond the scope of this question. Hope this helped!
Obrit comes with default classes. You can customize the classes:
<ul data-orbit data-options="next_class: my_next_class; prev_class: my_prev_class;">
...
</ul>
The default classes .next_class and .prev_class have a text-indent that is pushing the text out of the window.
If you are wanting to replace the content, use the css content: rule.
I think this is a little more straightforward:
For Foundation 5 - this is your jQuery:
$( "a.orbit-prev > span " ).replaceWith( "<img src='images/left_arrow.png' width='68' height='78' />" );
$( "a.orbit-next > span" ).replaceWith( "<img src='images/right_arrow.png' width='68' height='78' />" );
Replace the image URL with the URL of your own image, and the height/width of your own image height/width. To use a font icon, I would do something like this:
$( "a.orbit-prev > span " ).replaceWith( "<span><i class='icon-chevron-left'></i></span>" );
$( "a.orbit-next > span" ).replaceWith( "<span><i class='icon-chevron-right'></i></span>" );
You'll need to overwrite the default css styles too to use images:
.orbit-container .orbit-prev, .orbit-container .orbit-next {
text-indent: 0px !important;
line-height: 78px;
height: 78px;
width: 68px;
}
Keep the text indent at 0, and use your own heights/widths. For an icon font, I didn't try it but I think you should be able to use the existing CSS with no problem.
You'll probably want to remove the hover state as well, but maybe not:
.orbit-container .orbit-prev:hover, .orbit-container .orbit-next:hover {
background-color: transparent; }

Facebook “Like” button's comment box sizing

When the user clicks the like button a comment box pops up that has a width of 450px. This is too large for the space I have available. As far as I can tell, this comment box does not seem to respond to the "data-width" property I had set here:
<div class="fb-like" data-send="false" data-layout="button_count" data-width="290" data-show-faces="false">
...so I had been forcing it with my css to this size:
iframe.fb_ltr { max-width:290px !important;}
All was good until it seems something just changed and this is no longer viable because the width of 450px is now being set within the iframe with this new? class:
<div class="fbpf pluginLikeFlyout pluginLikeFlyoutFull pluginLikeFlyoutFullButton">
.pluginLikeFlyoutFull {
top: 24px;
width: 450px;
}
Bottom line, is there another way to set the width of the comment box so it doesn't default to 450px?
Thanks,
Matt
I added this to my css:
div.fb-like.fb_iframe_widget > span {
width: 100% !important;
}
div.fb-like.fb_iframe_widget{
width: 100%;
}

How can I do a text gradient with a drop shadow on a gradient background?

Here's what I need to pull off in CSS (it's terribly ugly, but it shows my problem well as an example):
We've got a gradient over text with a drop shadow on a background that has a slight gradient.
I've tried every method I could find.
This method won't work with a text-shadow.
The PNG overlay method won't work because I don't have a solid color background.
This method won't work because it requires me putting the text string in the CSS and my text will be dynamic.
So, I'm stumped.
It doesn't need to work in every browser (I'm fine with ignoring IE, if necessary). If it only works in Webkit browsers, that'd be fine as well.
That should be the answer:
HTML
<h1><span>Filthy</span></h1>
CSS
h1 {
position: relative;
font-size: 300px;
line-height: 300px;
text-shadow: -3px 0 4px #006;
}
h1 span {
position: absolute;
top: 0;
z-index: 2;
color: #d12;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
h1:after {
content: attr(cssFilthyHack);
color: #000;
text-shadow: 3px 3px 1px #600;
}
JS
$('h1').each(function(i, e){
var el = $(e);
el.attr('cssFilthyHack', el.find('span').html());
});
The important thing is to use content: attr(cssFilthyHack); to extract the text from the h1 text. You could add the text a second time in html like this
<h1 cssFilthyHack="Filthy"><span>Filthy</span></h1>
Or you use the js jQuery method to do this automatically.
UPDATE
Replaced the a tag with span, added js function.
See the example here in action: http://jsfiddle.net/alligator/Gwd3k/