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.
Related
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.
The Developer guide for Neo4j Browser User Interface says that I can run :style, export it, modify it and drag it back to change the style. I try changing the default border width, and adding two new properties for nodes: text-align and shape, as explained in Graph Stylesheets:
node {
diameter: 50px;
color: #A5ABB6;
border-color: #9AA1AC;
border-width: 10px;
text-color-internal: #FFFFFF;
font-size: 10px;
text-align: "below";
shape: regtangle;
}
But only the border width changes. Why does the rest not work?
text-align and shape don't seem to be properties supported by the Neo4j browser.
The styling guide in the browser manual lists eight properties.
And based on this list, only the colour of the text seems to be customisable.
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.
When I mouse over links that are highlighted, it seems it creates a sort of bar in the selection. Very weird. It's lower down than underlines would be so I don't think it's related to that.
I have moused over "consectetur" and "sapein interdum…". The bars stay there even after the mouse leaves. If there is on link on one extremity of a line and another on the other, hovering both makes the bar join and fill the whole line.
Two things make this problem go away:
Removing text shadows
Not changing the link colour on hover
Relevant CSS:
#content {
color: #444;
font-family: 'Armata', sans-serif;
text-shadow: 1px 1px 0 #fafafa;
line-height: 50px; // make it way too big just to make sure you can see it
}
a { text-decoration: none; color: #069; }
a:hover { color: #08c; }
Happens on Safari and Chrome (webkit), not sure about others.
n00b question alert, but I've been struggling for a few days with this one and have searched in vain for the solution in other posts!
I have a horizontal menu that has padding either side of the text such that the items appear separated. However upon replacing the text with sIFR, the padding doesn't appear, and thus the items all look like they are separated by only a space (and it looks like they are all within the same flash movie). I need to separate them!
The css is set as so:
#menu a {
height: 30px;
padding: 8px 38px;
letter-spacing: -1px;
text-decoration: none;
font-size: 22px;
color: #000000;
}
I've tried putting the same in the sifr.css at the bottom:
.sIFR-active #menu {
padding: 8px 38px;
visibility: hidden;
font-family: Verdana;
font-size: 19px;
text-decoration: none;
}
That doesn't work. I've tried putting this into the sIFR.replace function too, as well as a few other directives like tuneWidth... I haven't managed to get this working no matter what I try! Can anyone help?
If you want to have a look at an example page go here: http://www.ak40.co.uk/invitation.htm
Many thanks in advance.
Kev
Put some margin around the Flash movies instead.