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
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.
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.
I have various Select2 dropdowns. I have a issues where when the input is narrow and the drop down is also very small and hard to read.
I have tired:
.select2-dropdown.select2-dropdown--below {
min-width: 300px !important;
}
Which works great:
I am wondering if there is a way to have Select2 automatically adjust the width?
I figured this out as I was drafting the question - Its a combo of CSS and Select2 configuration:
Select2:
width: 'auto'
dropdownAutoWidth : true
CSS:
.select2-results__option {
white-space: nowrap;
}
.select2.select2-container {
width: 100% !important;
}
The nowrap was the key. That forces the option to be full width and then the Select2 config. My added 100% width was to keep the actual input select full width in the table I have these nested in.
Does someone know where I can go in my Volusion template to set an exact size for products to be displayed on the category pages? I have some images that have a width of 300px and some with a width of 280px so I would like to have the parameter set to 280px by 260px for all pictures.
As far as I know it, you can set the product image size for homepage, product page, and big image once you upload it, and you can save that option to reflect on future items. On past items there is no other way but to manually reupload their respective images and make their size designated to your preferences
Since we have thousands of legacy product photos of varying sizes, I wrap the photo with a div so I can have the same height and width (padded) across all photos.
For the product detail page (similar on category page):
JS:
jQuery().ready(function() {
jQuery('#product_photo').wrap('<div class="product_photo_container"></div>');
});
CSS:
.product_photo_container {
border: 1px dotted #999;
height: 250px;
line-height: 250px;
overflow: hidden;
width: 250px;
}
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.