With R blogdown package, it is easy to build a personal website. I like the style of the yihui/hugo-xmin theme for its simplicity. I built a site with the R blogdown package in my folder 'c:/test' on the Windows OS:
install.packages('blogdown')
setwd('c:/test')
blogdown::new_site(theme='yihui/hugo-xmin')
and I wrote the following text into a .md file in c:/test/content/post/ folder:
---
title: "Summer Holiday in Southern France (VIII): Return to Nice (Videos) 带着俩娃游南法 (第十天): 重返尼斯 (视频)"
author: dapeng
date: "2017-08-17 15:22:06"
slug: summer-holiday-in-southern-france-viii-return-to-nice-videos
categories: [cn]
tags:
- cn
---
my text.
Then I previewed the site:
blogdown::serve_site()
However, the post title looks like this:
I was wondering how to change the line height in the title, which is too small by default. I added a line-heightcommand in /themes/hugo-xmin/static/css/style.css like this:
.menu, .article-meta, footer { text-align: center; }
.title { font-size: 1.1em; }
footer a { text-decoration: none; }
hr {
border-style: dashed;
line-height: 5em;
color: #ddd;
}
But it did not work.
Thanks for help!
The title is not in the <hr> tag but <h1>. Add something like this to your CSS should increase the line-height:
h1 { line-height: 1.2em; }
I recommend you to learn to use the Developer Tools of your web browser.
Related
I'm attempting to make a CV using R Markdown and the {pagedown} package.
Is it possible to only include the grey aside bar on the first page?
I've tried playing with the page identifiers as described here.
#page :first {
.aside{
width: var(--sidebar-width);
padding: 0.6in var(--sidebar-horizontal-padding);
font-size: 0.8rem;
float: right;
position: absolute;
right: 0;
}
}
My hope was that defining the .aside inside :first would make the grey aside bar only appear on page one, but no luck. Any suggestions?
A minimal example is here: https://github.com/wjakethompson/cv-test
with an new package updates, this previous answer wont work, you need to add this code chunk inside the rmd section:
```{css, echo=FALSE}
.pagedjs_page:not(:first-of-type) {
--sidebar-width: 0rem;
--sidebar-background-color: #ffffff;
--main-width: calc(var(--content-width) - var(--sidebar-width));
--decorator-horizontal-margin: 0.2in;
}
```
This question got solved here.
This can be achieved by adding the following to the css file:
.pagedjs_page:not(:first-of-type) {
--sidebar-width: 0rem;
--sidebar-background-color: #ffffff;
--main-width: calc(var(--content-width) - var(--sidebar-width));
--decorator-horizontal-margin: 0.2in;
}
I'd like to increase the size of all body text (I don't know the right term, but text that is not in a special markdown category) in a dozen Jupyter notebooks. The notebooks are all stored in one repo, so they can share a css file. But I've no expertise in css.
The directory containing these notebooks has this custom.css file
h4 {
font-weight: normal;
text-align: justify;
}
#TOC, #book-cover {
width: 50%;
float: left;
}
#TOC {
font-size: 130%;
}
#main_content_wrap p, #main_content_wrap ol {
text-align: justify;
}
#main_content_wrap ul li {
list-style-type: none;
margin-bottom: 5px;
}
#main_content_wrap ul li a {
font-weight: bold;
}
#image-cc {
width: auto !important;
}
but I do not know if it is being used. The system (a Docker container) contains a .jupyter directory, but it contains no css files.
Ideally, I'd like a reference to a clear, fairly simple manual on using css for Jupyter notebooks. I'm aware of this good CSS reference, but it does not consider Jupyter notebooks. ("Give a man a fish ..., teach a man to fish ...")
Thanks, Arthur
If you set the body tag font size, it will change the text everywhere. This includes relative sized css like your #TOC id which is based in % and also will impact any relative size values like em.
body { font-size: 20px; }
I'm trying to create custom blocks for use in my book, written in bookdown. Unfortunately clicking Build Book in RStudio produces no output for the block. That is, the block does not appear in the output HTML but everything else in the book does.
I don't really know anything about CSS so decided to copy code from the bookdown book as a starting point. All the files below are located in the root folder of my book.
My style.css file looks like this:
.rmdcaution, .rmdimportant, .rmdnote, .rmdtip, .rmdwarning {
padding: 1em 1em 1em 4em;
margin-bottom: 10px;
background: #f5f5f5 5px center/3em no-repeat;
}
.boo {
padding: 1em 1em 1em 4em;
margin-bottom: 10px;
background: #f5f5f5;
position:relative;
}
div.boo:before {
content: "\f518";
font-family: FontAwesome;
left:10px;
position:absolute;
top:0px;
font-size: 45px;
}
p.caption {
color: #777;
margin-top: 10px;
}
p code {
white-space: inherit;
}
pre {
word-break: normal;
word-wrap: normal;
}
pre code {
white-space: inherit;
}
The first style block was copied from the bookdown book and the second was based on the SO example here.
Next, my _output.yml file looks like this:
bookdown::gitbook:
css: [style.css, fontawesome.min.css]
config:
toc:
before: |
<li>Surviving Statistics</li>
after: |
<li>Published with bookdown</li>
edit: https://github.com/rstudio/bookdown-demo/edit/master/%s
download: ["pdf", "epub"]
Finally, I call the blocks in my rmd file thus:
```{block, type='boo'}
Some text for this block. Some text for this block. Some text for this block. Some text for this block. Some text for this block. Some text for this block.
```
```{block2, type='rmdnote'}
If you are planning on printing your book to PDF, you will need a LaTeX distribution. We recommend that you install TinyTeX (which includes XeLaTeX): <https://yihui.name/tinytex/>.
```
As you can see, the first is a copy of the SO example above and the second is a copy of the bookdown book itself.
Any help much appreciated!
This is the markdown code effect of stackoverflow:
Code from stackoverflow
Nearly no extra space at the beginning
And this is the markdown code effect of gitbook:
The extra blanks at the beginning is confusing for me. So I decided to change it by myself.
I did:
cd /usr/local/lib/node_modules/gitbook/theme/stylesheets/base
vim markdown.less
In which there is a code block which looks like:
code {
padding: 0;
padding-top: 0.2em;
padding-bottom: 0.2em;
margin: 0;
font-size: 85%;
background-color: #f7f7f7;
border-radius: 3px;
}
I changed the font-size to 385% and border-radius to 0px. I used git serve . to restart my gitbook server, but the code effect didn't change.
I got these files which havs code keyword in the theme directory, which should I modify?
.//assets/app.js
.//assets/fonts/fontawesome/fontawesome-webfont.svg
.//assets/fonts/fontawesome/fontawesome-webfont.ttf
.//assets/fonts/fontawesome/FontAwesome.otf
.//assets/print.css
.//assets/style.css
.//javascript/utils/sharing.js
.//stylesheets/base/markdown.less
.//stylesheets/base/normalize.less
.//stylesheets/website/highlight/night.less
.//stylesheets/website/highlight/white.less
.//stylesheets/website/markdown.less
.//templates/book/includes/exercise.html
.//templates/ebook/includes/exercise.html
What else should I do?
This should be a comment, but you can't fiddle in comments.
As you can see below, the style information you've given doesn't include the styles you want to change, you've left out some important information from somewhere.
The code you've included is shown on the left, the problem you've described is on the right.
code {
padding: 0;
padding-top: 0.2em;
padding-bottom: 0.2em;
margin: 0;
font-size: 85%;
background-color: #f7f7f7;
border-radius: 3px;
}
.described {
padding: 20px;
}
<code>fprintf(...);</code>
<code class="described">fprintf(...);</code>
To over-ride the Gitbook default styles, create a file called 'styles/website.css` in the root of your gitbook project.
Edit the book.json file and add the following to define the source of your own custom styles
{
"styles": {
"website": "styles/website.css",
"ebook": "styles/ebook.css",
"pdf": "styles/pdf.css",
"mobi": "styles/mobi.css",
"epub": "styles/epub.css"
}
}
Anything in this file will over-ride the Gitbook styles (if you get the names right).
Then find out the names of the html elements you wish to apply or change styles to using your browser inspector. Open your Gitbook project in a browser and right click on a code block, this brings up a menu with Inspect or Inspect Element.
You will need to restart gitbook serve when changing styles as it only reads the styles/website.css file on startup.
The styles I defined to over-ride the Gitbook ones can be seen in this Github Gist
https://gist.github.com/jr0cket/9cc41eb9dd0b6c6d091831be43fa3e42
The results of these can styles can be seen at:
https://practicalli.github.io/clojure/basic-clojure/
Thank you
I have a style sheet that is used to display server status text and a colored bar (green = good, red = down, yellow = maintenance).
The way I have these set up are:
#status.Normal{
color: white;
text-align: left;
font-size:17px;
font-weight:700;
letter-spacing:1px;
background: url(images/greenbar.jpg) no-repeat;
}
#status.Down{
color: white;
text-align: left;
font-size:17px;
font-weight:700;
letter-spacing:1px;
background: url(images/red.jpg) no-repeat;
}
And the way they are used is just by declaring Normal or Down in my server list xml file.
For example, if the site status was normal for a site the xml would read:
<site name="template">
<title>Title</title>
<systemStatus>Normal</systemStatus>
<networkNotes>notes etc</networkNotes>
<maintenanceInformation>
information about maintenance etc.
</maintenanceInformation>
</site>
The HTML where this is used:
<td>
<tr><td id="status"></td></tr>
</td>
The HTML reads from the "status" in the XML and the site would get the "Normal" and the green bar and show those as the status for that server based on the CSS.
Is there a way, with my current setup, to declare a new property in the css (translating to French for French users currently) where I can make the new property (for "Down") as:
#status.EnPanne{
color: white;
text-align: left;
font-size:17px;
font-weight:700;
letter-spacing:1px;
background: url(images/red.jpg) no-repeat;
}
And have the text display on the red bar be En panne instead of EnPanne?
Basically I'm trying to add a custom text attribute to the EnPanne property so that it displays what I want it to while still using the right property.
Edit:
With the solution posted by jme, I was able to produce these results.
Below is an example of what the English "Down" status will display, above is what I need to do for French display. It appears that the follow-up text is cutting off the "redbar.jpg" and preventing the bar from extending to the other end of the page.
I would assume my two options here are somehow force the redbar over the following text or somehow remove that following text so the bar can fully stretch to the end of the page?
Edit 2:
Here is the portion of the script that connects the XML with the html and CSS - specifically for the system status:
<script> <!--Loads the Status_Pages.xml file-->
var root = null;
$(document).ready(function ()
{
$.get("Status_Page.xml",
function (xml)
{
...
var status=$(root).find("systemStatus").text();
$("td#status").html(status);
$("td#status").attr("class", status);
...
});
});
</script>
How I would do this is to simply set the class attribute and allow your css to add the content, versus adding the status text into the table cell in your ajax call. So, to do this you would remove this line: $("td#status").html(status);
Then in your css you could do this:
#status{
color: white;
text-align: left;
font-size:17px;
font-weight:700;
letter-spacing:1px;
}
#status.Normal{
background: url(images/greenbar.jpg) no-repeat;
}
#status.EnPanne, #status.Down {
background: url(images/red.jpg) no-repeat;
}
/*Now set your messages*/
#status.EnPanne:before {
content: "Le système est en panne";
}
#status.Normal:before {
content: "Operations Normal";
}
#status.Down:before {
content: "The system is currently down";
}
Here's a fiddle demo.
If you're against the idea of not adding the text into the table cell, here is an example that uses a technique to hide the table cell text while absolutely positioning the content: demo 2. If you want an explanation of this method, let me know.
What about escaping a space?
#status.En\ Panne {...}
And in your XML normally
<systemStatus>En Panne</systemStatus>