I'm trying to create a slideshow using rstudio's implementation of quarto, and I'd like to have a common icon in the top left of all non-title-slides in the show. (I'd also like it to be on the title slide, but that I've got figured out!)
On a single slide, I can use {background-image="logo.png" background-size=15% background-position="0% 0%"} and that works fine for that slide.
In the YAML,
data-background-image: ./logo.png
data-background-size: 15%
data-background-position: 0% 0%
does perfectly for the title slide. If I use
background-image: logo.png
background-size: 15%
background-position: 0% 0%
I get the right image on all slides, but it's taking up the entire slide, not respecting the size argument.
Any suggestions on how to handle this? Maybe the background isn't actually the right way to do this since it's just a logo, but this seemed like it might be easier than trying to change the properties of the "logo" in quarto, since I don't see any options to change the size of that either.
Update: I have written a quarto filter extension reveal-header to add a header logo in top-left corner of all slides with header-logo option in yaml, which is probably an easier option than the approach described below.
Old Answer
If you want to add a logo for all slides (including the title slide) you can do this more easily by adding a logo via logo YAML key and tweaking the CSS property for that logo image.
---
title: "Untitled"
format:
revealjs:
slide-number: true
logo: placeholder.png
css: logo.css
---
## Quarto
Quarto enables you to weave together content and executable code into a
finished presentation. To learn more about Quarto presentations see
<https://quarto.org/docs/presentations/>.
logo.css
.reveal .slide-logo {
display: block;
position: fixed;
bottom: unset !important;
right: unset !important;
top: 5px;
left: 12px;
height: 100px !important;
width: 100x !important;
max-width: unset !important;
max-height: unset !important;
}
change the height and width css property as you need.
Related
I want to create a Website with Quarto, using the Bootswach theme "Simplex".
The theme is simple but elegant. I like the mix of white, black gray and red colors.
However, I come across three challenges:
(1) Including a logo is pretty easy by adding "logo: "/img/logo.png" in the _quarto.yml file. However, the logo is displayed in the header very small. How can I increase the size of the logo in the header?
(2) The title of the Website is printed in "black" color as one can see here in the Simplex Theme template (it is the third navigation bar in white). How can I change the color of the title to the red of the link color?
(3) Finally, the color of the links in the body is red. But the color of the links in the menu is gray. I want to display the links as well as the active menu-item in the navbar in red (i.e., the link color). How can I change that?
I know, that I must change the .scss and/or .css files or add another .scss and/or .css file to the _quarto.yml . But I did not manage to solve this issue.
Can anyone give me some hints how to solve these problems?
Is this what you are looking for?
Concerning Q1 & Q2 (color):
styles.css
.navbar-dark .navbar-brand {
background: url('https://upload.wikimedia.org/wikipedia/commons/e/ef/Stack_Overflow_icon.svg');
background-size: contain;
padding-right: 5px !important;
padding-left: 75px !important;
background-repeat: no-repeat;
color: #d9230f;
}
Concerning Q3:
simplex-theme.scss
/*-- scss:defaults --*/
$navbar-hl: #d9230f;
_quarto.yml
project:
type: website
website:
title: "TEST Website"
navbar:
left:
- href: index.qmd
text: Home
- about.qmd
format:
html:
theme: [simplex, simplex-theme.scss]
css: styles.css
Result:
For Q1, try this in the style.css file:
.navbar-brand {
max-height: 90px;
margin: -8px;
}
.navbar-logo {
max-height: 90px;
max-width: 90px;
height: 89px;
width: 89px;
margin-top: -9px;
}
Just play around with values.
For Q2, the simplest approach might be to edit this in the _quarto.yml:
website:
title: "Website Title"
navbar:
background: "#______"
foreground: "#______"
And I don't know about Q3.
Setting link color is easy in the _quarto.yml under the section
format:
html:
theme:
linkcolor: "whatevs"
but I think you already knew that.
In my quarto reveal.js presentation, I added a logo bottom left in the slide template by placing this in the yaml:
format:
revealjs:
logo: mylogo.png
The logo is displayed very small. Anyone a suggestion on how to increase the size? Thanks!
logo image in the quarto revealjs has the class slide-logo. So to increase the size, you just need to apply the following CSS rules to this .slide-logo selector.
---
title: "Increasing Logo size"
format:
revealjs:
logo: image.png
css: logo.css
---
## Quarto
Quarto enables you to weave together content and executable code into a finished presentation. To learn more about Quarto presentations see <https://quarto.org/docs/presentations/>.
logo.css
.reveal .slide-logo {
height: 100px !important;
width: 100px!important;
max-width: unset !important;
max-height: unset !important;
}
Change the value of CSS properties height and width as you need and Do not forget the !important
I am new to using syntaxhighlighter. I am using there latest version 3.0.83. Can some one help how to customize the color of comments, header, etc ?
I am using < pre class="brush: c"> for coding style.
The easiest solution would be to override the CSS rules for comments, but they're marked as !important so you have to do a little extra work.
Open your shBrushCpp.js file. Down towards the bottom there's a set of regular expression rules paired with a css property. Those values correspond to class names in shThemeDefault.css (or whatever theme you're using).
Copy your theme file to something like shThemeCustom.css or whatever you want. Include this file on your page instead of the original theme. From here, you can change whatever you want. Just reference the CSS rules from the brush file against your custom theme to know what needs to be changed.
In case you don't have full control over the .css or .js files, as is my case (since I followed these instructions here and am using Alex Gorbatchev's hosted files instead), there is still a way to override the !important parameter.
You can customize any of the settings shown here (http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css), for example, as follows:
With the default theme, this HTML...
<pre class="brush:cpp" title="test code">
int myFunc()
{
//do something
return 1;
}
</pre>
...yields this result:
Looking here (http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css), I can see the parameters I am currently using. For example, it contains:
.syntaxhighlighter {
background-color: white !important;
}
.syntaxhighlighter .line.alt1 {
background-color: white !important;
}
.syntaxhighlighter .line.alt2 {
background-color: white !important;
}
...
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
color: #008200 !important;
}
In order from top to bottom, as shown just above, my header background color is white and my alternating code lines 1 and 2 are both white. Comments are green (#008200). Let's change all of that. Add the following code to your blogger template, at the very end of your header, just above </head>:
<style type='text/css'>
.syntaxhighlighter {
max-height: 550px;
background-color: #ff0000 !important;
overflow-y: auto !important;
overflow-x: auto !important;
}
.syntaxhighlighter .line.alt1 {
background-color: #99ff99 !important;
}
.syntaxhighlighter .line.alt2 {
background-color: #99ff99 !important;
}
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
color: #000082 !important;
font-weight: bold !important;
}
</style>
Now, I have set my max-heightto 550 pixels (make a really long code block and you'll see it constrained to this height now, with a vertical slider to see it all), my header background color is red (#ff0000), my code background color (both alternating lines) is light green (#99ff99), and my comments are blue (#000082) and bold. Follow this format to customize anything you see in your .css theme file--example, for me, here: http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css.
Here is my final result--very different from the default look above:
Note that the font-weight parameter I set is simply a CSS styling you can apply. Many other options exist. See here: http://www.w3schools.com/cssref/pr_font_weight.asp.
Is it possible to have a listview within jquery mobile with a filter search but instead of having the normal list we create a card view. So in other worlds we are still adding the <li></li> for the list but we are changing the list css to a class so that it shows like cards and not in its usual way.
Is that possible? do I need to disable some css or added a new class or something to that effect to ensure that the list looks different?
There is one implementation I was using: http://appcropolis.com/page-templates/list-of-cards/
I only hope it was updated to work with jQuery Mobile 1.3
Or you can eve do it by yourself if you know enough css. Only important thing is to change li width to lets say 50 % (pr less if you want margins), set it to float left and and full border around them. And that is that, you can do it on any listview implementation.
Working example: http://jsfiddle.net/Gajotres/NBv9B/
CSS:
.ui-listview li {
width: 44% !important;
margin: 2% !important;
float: left;
border: 1px solid #ccc !important;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
}
I think I have a reasonable understanding of how css sprites work, but I am baffled by how JQ Mobile is doing it. As a sample I put together a really basic version:
<style>
#id {
display: block-inline;
width: 16px;
height: 16px;
background-image: url("http://code.jquery.com/mobile/1.0b1/images/icons-18-white.png");
background-position: -576px 50%;
background-color: rgba(0,0,0,0.4);
}
</style>
<div style="border: 1 solid black; padding: 5px">
<span id="id"> </span>
</div>
Which is a stripped down of how jqm is doing it. What I don't get is that if you load that png file into an image editor it is completely white, and I can't see any of the images in there. I am also completely confused as to why the y for background position is 50%.
Can anyone help me understand?
The sprite you're talking about has many white icons on a transparent background. If you use lightweight free tool like IrfanView, you'd see it like this:
background-position: -576px 50%; means the background would be placed at the position of -576 from left and 50% from top, which I think is where the home icon is. Although perhaps the 50% bit won't matter in this case as the height is set to 16px but maybe it matters for some other weird mobile browsers.