generated from jhudsl/OTTR_Template_Website
-
Notifications
You must be signed in to change notification settings - Fork 1
/
customize-style.Rmd
107 lines (71 loc) · 5.94 KB
/
customize-style.Rmd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
---
title: "Customizing Style"
output:
html_document:
toc: true
toc_float: true
---
### Changing title
The title is specified on the `index.Rmd` page in the yml header. Modify the yaml header to change the title for your course.
```
---
title: "Title of Course"
---
```
Note that if one of the chapter Rmd files has a title in the yml that comes first alphabetically, it will be shown as the title of the course. Hence avoid having yml header titles for the chapter files.
## Customizing the Style
There are styles/brandings that are available in our library of style sets. However, there are also instructions to customize your own course style following these instructions in the next section.
### Using a style set
By default this course template will use the JHU Data Science Lab style. However, you can switch this to another style set by moving some files. Take a look at the `style-sets` for the other styles available.
For example, if you are creating an ITCR course, you will need the files in `style-sets/itcr` or if you are making a DataTrail course, the files in `style-sets/data-trail`. For these instructions,let's refer to `data-trail` or `itcr` as the `<set-name>`.
1. On a new branch, copy the `style-sets/<set-name>/index.Rmd` and `style-sets/<set-name>/_output.yml` to the top of the repository to overwrite the default `index.Rmd` and `_output.yml`.
1. Copy over all the files in the `style-sets/<set-name>/copy-to-assets` to the `assets` folder in the top of the repository.
1. [Create a pull request](https://github.com/jhudsl/OTTR_Template/wiki/About-pull-request-review) with these changes, and double check the rendered preview to make sure that the style is what you are looking for.
[Read here](https://bookdown.org/yihui/bookdown/output-formats.html) for more about how to customize your `_output.yml` file -- which is ultimately a part of how bookdown works.
<br>
## Creating your own style
Here are the instructions to change the aesthetic aspects about your course if you wish to create a new style for your course.
### Changing the favicon
Favicons are small icons that appear on your browser tab. To change the favicon, first take the image you would like to use to this [website](https://favicon.io/favicon-converter/) to convert it into a favicon. Then save this file in the `assets/` directory. On the `index.Rmd` file, make sure that the correct favicon is referenced to in the yaml header, so that the correct favicon will be used.
Here you can see that by default the Data Science Lab (dasl) favicon will be used.
```
---
title: "Course Name "
date: "`r format(Sys.time(), '%B, %Y')`"
site: bookdown::bookdown_site
documentclass: book
bibliography: [book.bib, packages.bib]
biblio-style: apalike
link-citations: yes
description: "Description about Course/Book."
favicon: assets/dasl_favicon.ico
---
```
If you are making an [ITN](https://www.itcrtraining.org/) course, then the favicon is already set up n the index-itcr.Rmd file. Just delete the existing `index.Rmd` file and rename the `index-itcr.Rmd` file to be `index.Rmd`. This is already part of the set up instructions.
### Adding logos
Logos for the table of contents are added with the `_output.yml` file. This adds an image above the table of contents when the content is rendered with `bookdown`.
If you are creating a general DaSL course:
- Please replace the URL in the line 13 of code for the `_output.yml` file with the URL for the GitHub repo for your course. This will allow people to more easily find how out how you created your course. Otherwise, they will be directed to this template.
If you are creating a DaSL course for a project other than [ITN](https://www.itcrtraining.org/):
- Delete the `_output.yml` file and rename the `_output-itcr.yml` to be `_output.yml`.
- Please modify the lines that link to the http://jhudatascience.org/ with your own website and logo if you are not part of the [jhuDaSL](http://jhudatascience.org/) .
- Please replace the URL in the line 13 of code with the URL for the GitHub repo for your course. This will allow people to more easily find how out how you created your course. Otherwise, they will be directed to this template.
- If you wish to create a different color scheme, the font colors can also be modified along with other aspects in the `assets/style.css` file. Take a look at the `assets/style_ITN.css` file to see what was changed for that color scheme from the `assets/style.css` file.
- You can replace the logo with the appropriate project logo by replacing `https://www.itcrtraining.org/` with the project website link and ` "https://raw.githubusercontent.com/jhudsl/OTTR_Template/main/resources/images/logo.png"` for the project logo image link in line 11.
<br>
## Adding sections that aren't numbered
You may notice that currently the References page and about pages are not numbered like the other chapters. If you want additional sections like this add an Rmd file and type the name of the page after a single hashtag `#` followed by this: `{-}`. This will exclude this page from being numbered.
Thus as example the reference page looks like this:
```
# References {-}
```
<br>
## Changing course text colors
To modify the colors used for the text, take a look at the `assets/style.css` code.
If you would like to change the current dark blue color to be a different color, search and replace for `#012d72`. You can find hex color codes at this [website](https://htmlcolorcodes.com/color-picker/) to use as a replacement.
If you would like to change the current light blue color to be a different color, do the same but search for `#68ace5`.
<br>
## Modifying the image at the top of the course
If you would like to change the image at the top of the Bookdown version of the course, you need to do the following steps:
* Add a new image file to the `assets` directory
* Modify the `assets/big-image.html` file on line 11. Change out `src = "assets/dasl_thin_main_image.png"` so that `dasl_thin_main_image.png` is replaced with the name of your image file.