Skip to content

Change Title and style

Candace Savonen edited this page Dec 17, 2021 · 9 revisions

Changing title and style

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"
---

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 jhudsl 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.
  2. Copy over all the files in the style-sets/<set-name>/copy-to-assets to the assets folder in the top of the repository.
  3. Create a pull request with these changes, and double check the rendered preview to make sure that the style is what you are looking for.

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 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 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:

  • 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 .
  • 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/https://raw.githubusercontent.com/jhudsl/OTTR_Template/main/resources/images/logo.png" for the project logo image link in line 11.

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 {-}

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 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.

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.
Clone this wiki locally