Customizing the report

1. Customizing the report

Let's customize a report using colors and fonts to reflect a brand. First, we'll modify the styles directly in the report, then we'll discuss how to create a Cascading Style Sheet or CSS file to add the HTML element settings to any report.

2. Specifying element style

Outside of any code chunks, we surround the style specifications with less than style greater than and less than backslash style greater than. To add elements, we reference a particular section of the document with the specifications enclosed in curly braces, using specific indentation. Commonly used properties include color for the text, background hyphen color, font hyphen family, and font hyphen size. We can include the styles section anywhere in the document, outside of any code chunks. To keep the sections organized, we'll add it to the top of the document, below the YAML header.

3. Document style

Let's start with the overall document. Within the style indicators, we add body, curly braces, color, colon, and the color we want to use for the report text. We can add a color name, like red or blue, and a semicolon. We won't get an error if we forget to include a semicolon after a property, but the style will not update. Here, we specify red and see the red text in the knit file.

4. Using color hex codes

We can also use hex codes to specify colors, with a single hash and no spaces before the hex code. There are many references we can use to look up color hex codes. Here we're using 708090 or slate gray. We add a background color, modify the text font using font-family, for example, Calibri, and knit the report.

5. Code chunks

If we include code chunks, we can modify them using pre, curly braces, and specifying the text color and the background color.

6. The table of contents

The table of contents properties are specified using hash TOC. Within curly braces, we specify the text color and font. We can add a border color using border hyphen color and modify the font size using font hyphen size and specifying a number followed by px. We won't discuss px in detail. At a high level, it corresponds to the pixels and the way the text appears varies depending on the device being used to view the report. We knit the file, and see the updated table of contents.

7. The header

The header properties are specified with hash header. Here, we add color, background-color, font-family, and font-size. We can modify the background color transparency using opacity and a decimal. The default value is one, and here we've used zero point six. Notice that the header styles modify all aspects of the header, including the title, date, and author.

8. The title, author, and date

Alternatively, we can modify each header element individually, using h1-dot-title for title, h4-dot-author for author, and h4-dot-date for date.

9. CSS file

Instead of adding styles within the file, we can reference a CSS file that contains specific styles. This means we can reuse a CSS file for many different reports without needing to copy and paste the CSS code into each new Markdown file we create. We can use any text editor to create the style sheet by adding the information in the text editor, excluding the boundary style words, and saving the file using the extension dot css. Then, we add a css field to the YAML header and the name of the style sheet. Here, the style sheet is called styles-dot-css. When we knit the file, the specified styles will appear in the report.

10. Let's practice!

Let's practice!

Create Your Free Account

By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.