+ - 0:00:00
Notes for current slide
Notes for next slide

Customizing Your Personal Website Using CSS Alternate CSS3 Logo (and some other stuff)


Sam Csik | Data Training Coordinator

National Center for Ecological Analysis & Synthesis


Masters of Environmental Data Science | Summer 2021

Slides & source code available on GitHub

1

Prerequisites

You should already have a {distill} website (or at least the bones of one) deployed using github pages. Importantly, this website should also have some content (e.g. text, headings, etc.) for us to customize.

If you first need to get your website up and running, follow along with these step-by-step instructions by Allison Horst before moving forward.

2

So you've created your personal website using {distill}...

{distill} gives us with an easy-to-use web publishing format to create our personal websites. A massive benefit is that these websites already look pretty slick right out of the box.

3

But without some additional modifications, it can be challenging to make your website stand out from the rest.



In order to make those changes, we need to dive a bit into the world of CSS. Some of you may have already heard of and/or used CSS -- that's great! We're going to spend a few minutes first learning about what makes a web page...look like a web page, then apply what we learn to our own {distill} sites.

4

HTML & CSS are the building blocks of web pages

HTML (Hypertext Markup Language) is a markup language1 that tells web browsers how to structure web pages. You can think of HTML as the skeleton of a web page. It gives authors the means to create elements like headings, text, tables, lists, add media, etc.

CSS (Cascading Style Sheets) is a programming language that allows you to control how HTML elements look on a web page. You can think of CSS as the outfit that is styling the skeleton. It allows authors to control aspects such as the colors, layout, and font style.

Source: Nicolas Karasiak, GitHub: nkaraskiak/Illustration


1 Markdown and R Markdown are both lightweight markup languages -- they're a bit easier for humans to write and read than HTML. HTML is more expressive and allows for customization that is difficult or impossible to do in Markdown.

5

Your browser has its own internal style sheet to render HTML

Your browser will style HTML documents using an internal style sheet, which ensures that headings are larger than normal text, links are highlighted, lists and tables are structured correctly, etc.

HTML

Browser default styling

6

CSS adds pizzazz to web page renderings

CSS allows website developers to add additional styling to web browser defaults. Otherwise, websites would be pretty boring to look at (and they'd all generally look the same).

Browser default styling

CSS styling

7

A light introduction to HTML - elements

HTML consists of a series of elements, comprised of opening tags and closing tags that render some form of content in a particular way.

The basic anatomy of an HTML element:


In R Markdown syntax: # Welcome to your first MEDS mini-workshop

Source: “Getting Started with HTML - Learn Web DEVELOPMENT: MDN.” Learn Web Development | MDN, developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started.

8

A light introduction to HTML - nested elements

You can also nest elements. Remember to close out tags from the inside-out to avoid unexpected renderings.


Nested HTML elements:


In R Markdown syntax: # Welcome to your first **MEDS** mini-workshop

Source: “Getting Started with HTML - Learn Web DEVELOPMENT: MDN.” Learn Web Development | MDN, developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started.

9

A light introduction to HTML - attributes

HTML elements can also have attributes which contain extra information about the element that will not be rendered as visual content1 on the web page. Attributes can be used in many powerful ways -- one way is to provide a class or ID as an identifier to be used for targeted styling with CSS. We will come back to this concept in a little bit.

The basic anatomy of an attribute:


1One example that you may already be familiar with is alt text. While you add alt text to the top of code chunks, knitting your .Rmd will actually add that text as an attribute on the visual content you generate (e.g. a ggplot) -- you cannot see it rendered on the screen, but screen readers can find it by searching for any content with the alt attribute to read aloud for visually impaired users.

Source: Getting Started with HTML, mdn web docs

10

Some commonly used html elements

  • <div></div>: group common elements
  • <img></img>: present an image
  • <h1></h1>: creates a first-level heading (largest)
  • <h6></h6>: creates a sixth-level (smallest)
  • <p></p>: begins a new paragraph
  • <br></br>: adds a line break
  • <strong></strong>: bolded text
  • <em></em>: italicized text
  • <a></a>: anchors (i.e. links) an HTML page to another page
    • e.g. <a href="https://ucsb-meds.github.io/">text_I_want_to_hyperlink</a>
  • <span></span>: an inline container used to markup part of a text or document
    • e.g. My favorite color is <span style="color:green">green</span>.
11

A light introduction to CSS

CSS is a rule-based language, meaning that it allows you to define groups of styles that should be applied to particular elements or groups of elements on a web page. For example, "I want all first-level (<h1>) headings to be large green text" could be coded as:

  • Selectors define a condition to match HTML elements (e.g. first-level headings, <h1>)
  • Declarations sit inside curly brackets, {}, and are made up of property and value pairs. Each pair specifies the property of the HTML element(s) you're selecting (e.g. the color property of the element <h1>), and a value you'd like to assign that property (e.g. green)
  • A property and its corresponding value are separated by a colon, :. Declarations end with a semicolon, ;


Source: “What Is CSS? - Learn Web Development: MDN.” Learn Web Development | MDN, developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/What_is_CSS.

12

"Inspect"ing web pages allows you to view and edit HTML & CSS source code

Don't worry -- any edits you make are only visible to you and will disappear when you refresh the web page! Using the "Inspect" tool is a great way to get a better sense of how CSS is used to modify particular HTML elements.

Navigate to any web page and right click on an element of interest (e.g. text, images, links, etc.) and choose Inspect to pull up the underlying HTML & CSS files. Here, I am going to inspect the dark blue banner along the top of my {distill} website.

13

An "Inspect" roadmap

14

Make some edits to a web page's style by altering declaration values

15

Check out your web page with its "edited" CSS!

Refreshing the web page will revert any changes you made.

16

Okay that was like...



But what's even more magical is how easy {distill} makes it to actually customize parts of your site's appearance using CSS.

17

Start by making sure you have a CSS file in your web page repo's root directory

If you do not already have a .css file, you can generate one by running the distill::create_theme() function in your console as follows:

# the `name` argument sets the name of the theme file, e.g. `theme.css`
# the `edit` argument opens an editor (in RStudio) for the theme file
distill::create_theme(name = "theme", edit = TRUE)
18

Start by making sure you have a CSS file in your web page repo's root directory

If you do not already have a .css file, you can generate one by running the distill::create_theme() function in your console as follows:

# the `name` argument sets the name of the theme file, e.g. `theme.css`
# the `edit` argument opens an editor (in RStudio) for the theme file
distill::create_theme(name = "theme", edit = TRUE)

This function creates a file named theme with the file extension .css. Here is where you will define CSS custom properties and/or edit existing default values. You'll notice that there are a series of CSS rules, that should look similar to the example shown earlier (slide 12). They take the format:

scope { # think of 'scope' as the 'selector'
  --some-property:       some-value; # e.g. --code-size:    50px;
  --another-property:    another-value; # e.g.  --title-color:   #333CFF;
}

This content has been adapted from the {distill} document on theming. This is a great resource for getting started on web page customization. You can find that document here.

18

The 'out-of-the-box' theme.css file

19

Apply your theme to your {distill} website

Add a theme key to the top-level of your _site.yaml configuration file along with the name of your .css file (e.g. mine is named theme.css). For example:

name: "samanthacsik.github.io"
title: "Samantha Csik"
theme: theme.css
description: |
  Samantha Csik
output_dir: "docs"
navbar:
  right:
    - text: "Home"
      href: index.html
    - text: "Publications"
      href: publications.html
    - text: "Posts"
      href: posts.html
    - text: "Projects"
      href: projects.html
    - text: "Teaching"
      href: teaching.html
    - text: "Curriculum Vitae"
      href: CV.html
output: distill::distill_article
20

So where do we start styling??

21

Import custom Google Fonts at the top of your theme.css file

Steps for applying custom Google fonts:

1. explore Google font styles here (there are many to choose from)

2. embed the font(s) at the top of your theme.css file using the @import method1 where prompted (i.e. before any rules are specified). Below, I'm importing the fonts, Caveat and Montserrat.

3. specify your imported font style as values on the appropriate property types (continued on next slide)

/* Optional: embed custom fonts here with `@import`          */
/* This must remain at the top of this file.                 */
@import url('https://fonts.googleapis.com/css2?family=Caveat');
@import url('https://fonts.googleapis.com/css2?family=Montserrat');

1The Google fonts website will generate the @import code for your chosen font. Choose a font family and select a particular style. Click on the Selected families icon in the upper right hand corner and choose the @import radio button under Use on the web. Copy and paste the code into your CSS file.

22

Change default font styles to any of your imported fonts

html {
  /*-- Main font sizes --*/
  --title-size:      50px;
  --body-size:       1.06rem;
  --code-size:       14px;
  --aside-size:      12px;
  --fig-cap-size:    13px;
  /*-- Main font colors --*/
  --title-color:     #000000; 
  --header-color:    rgba(0, 0, 0, 0.8);
  --body-color:      rgba(0, 0, 0, 0.8);
  --aside-color:     rgba(0, 0, 0, 0.6);
  --fig-cap-color:   rgba(0, 0, 0, 0.6);
  /*-- Specify custom fonts ~~~ must be imported above   --*/
   --heading-font:    Montserrat; /* default = sans-serif */
   --mono-font:       monospace;
   --body-font:       Caveat; /* default = sans-serif */
   --navbar-font:     sans-serif;  /* websites + blogs only */
}
23

Change default font colors by altering hex color codes1 or adjusting rbga() values2

html {
  /*-- Main font sizes --*/
  --title-size:      50px;
  --body-size:       1.06rem;
  --code-size:       14px;
  --aside-size:      12px;
  --fig-cap-size:    13px;
  /*-- Main font colors --*/
   --title-color:     #000000;
   --header-color:    rgba(0, 0, 0, 0.8);
   --body-color:      rgba(0, 0, 0, 0.8);
   --aside-color:     rgba(0, 0, 0, 0.6);
   --fig-cap-color:   rgba(0, 0, 0, 0.6);
  /*-- Specify custom fonts ~~~ must be imported above   --*/
  --heading-font:    sans-serif;
  --mono-font:       monospace;
  --body-font:       sans-serif;
  --navbar-font:     sans-serif;  /* websites + blogs only */
}


1Generate Hex color codes using the HTML color picker, or install the Colorpick Eyedropper Chrome Extention, which allows you to select color values directly from web pages.

2A note on rgba(red, green, blue, alpha): the red argument, for example, defines the intensity of red between 0-255 or a % value between 0-100%; the alpha argument defines opacity as a number between 0.0 (fully transparent) and 1.0 (fully opaque). You can convert any Hex color code to RBG values using an online converter.

24

Change default font sizes

html {
  /*-- Main font sizes --*/
   --title-size:      50px;
   --body-size:       1.06rem;
   --code-size:       14px;
   --aside-size:      12px;
   --fig-cap-size:    13px;
  /*-- Main font colors --*/
  --title-color:     #000000;}}
  --header-color:    rgba(0, 0, 0, 0.8);
  --body-color:      rgba(0, 0, 0, 0.8);
  --aside-color:     rgba(0, 0, 0, 0.6);
  --fig-cap-color:   rgba(0, 0, 0, 0.6);
  /*-- Specify custom fonts ~~~ must be imported above   --*/
  --heading-font:    sans-serif;
  --mono-font:       monospace;
  --body-font:       sans-serif;
  --navbar-font:     sans-serif;  /* websites + blogs only */
}

Pixels (px) are relative to screen size. For low-dpi (Dots Per Inch) devices, 1px is one device pixel of the display. For high resolution screens, 1px implies multiple device pixels.

25

Defining your own CSS rules may require some "Inspect"ing

Creating custom CSS rules for your web site requires some sleuthing (similar to what we did while "Inspecting" our web page) and an understanding of how to apply CSS selectors.

For example, say I want to change the color of the headings, Biography, Education, and Experience on my landing page to pink (hex code #C41A60). Inspecting these headings reveals that they are all <h3> elements.

26

Construct custom CSS rules that target groups of elements

Following the CSS selectors guide, we can construct a custom CSS rule that will color any <h3> element on our website pink:

/*-- Additional custom styles --*/
/* Add any additional CSS rules below */
h3 {
  color: #C41A60; 
}

27

"Cheat" code: you can use inline style directly in your .Rmd to alter the appearence of web page content

For example, you can use the <span> tag styled with CSS to update text in your .Rmd file.

MA in Ecology, Evolution & Marine Biology, <span style="color: #EC100D;">2020</span> will render as:

28

Get inspired by sites on the distillery and borrow open source code

One of the more challenging parts of creating custom CSS rules (for newbies like myself) is knowing what selectors to use and what is design patterns are even possible. Looking at (and borrowing) source code for other {distill} sites can help jump start your own custom CSS styling.

29

Let's try borrowing some code

I came across Jenna Eagleson's web site on the Distillery Showcase and loved the way her headings appear. You can check out all of her custom CSS rules at the bottom of her website's theme.css file.

30

Adapting custom CSS rules for your own website

I see a rule which styles any h1 - h6 heading elements with a particular font-weight, color, and spacing between letters.

h1, h2, h3, h4, h5, h6 {
  letter-spacing: 2px;
  font-weight: 300;
  color: #3D5A80;
}

I just want to apply the letter-spacing and font-weight styles to my headings, so I'll borrow those declarations and omit the color declaration. I'm also going to increase the letter-spacing style from 2px to 5px:

h1, h2, h3, h4, h5, h6 {
  letter-spacing: 5px;
  font-weight: 300;
}
31

Voila!


Without letter spacing</span?

With letter spacing

32

The "other stuff"

33

There are a variety of ways to add a footer (the section of content typically included at the bottom of web pages) to your web page. Ultimately, you'll need to add a _footer.html file to the root directory of your distill site repository. These are the steps I followed:

1. Choose New File -> R HTML
2. Delete all auto-filled content (lines 1-22)
3. Save and name _footer.html (a popup box will ask if you'd like to use the standard extension ".Rhtml" or ".html" -- choose "Use .html")
4. Add content using HTML markup, save, and knit
5. Build your site to see you footer!

One great example is the MEDS Website. The code used to generate that footer is as follows:

<p>
<a href="https://bren.ucsb.edu/"><img src="img/bren_white_logo.png" alt="Bren School logo" style="width:350px;" /></a>
</p>
<p>
  This website was made with <u><a href="https://rstudio.github.io/distill/">distill by RStudio</a></u>, and with inspiration from the <u><a href="https://ubc-mds.github.io/">UBC Master of Data Science website</a></u>.
</p>
34

Add your CV to your website

There are a few ways to include your resume/CV on your website (aside from translating all your CV content into your Rmd using R Markdown syntax).

1. Add a link for visitors to download your CV.pdf (e.g. [Download my CV here](file/path/to/my/cv.pdf) renders as Download my CV here)

2. Hyperlink your CV.pdf to a navbar tab in _site.yml -- when you click on that tab, it takes you directy to a pdf viewer 

navbar:
  right:
    - text: "Home"
      href: index.html
    - text: "CV"
      href: path/to/my/cv.pdf

3. Add a scrollable plugin to render your pdf directly on-screen using the function

knitr::include_graphics("file/path/to/my/cv.pdf")
35

Additional Resources

36

Now get to customizing!

Slides created via the R packages:

xaringan
gadenbuie/xaringanthemer

37

Prerequisites

You should already have a {distill} website (or at least the bones of one) deployed using github pages. Importantly, this website should also have some content (e.g. text, headings, etc.) for us to customize.

If you first need to get your website up and running, follow along with these step-by-step instructions by Allison Horst before moving forward.

2
Paused

Help

Keyboard shortcuts

↑, ←, Pg Up, k Go to previous slide
↓, →, Pg Dn, Space, j Go to next slide
Home Go to first slide
End Go to last slide
Number + Return Go to specific slide
b / m / f Toggle blackout / mirrored / fullscreen mode
c Clone slideshow
p Toggle presenter mode
t Restart the presentation timer
?, h Toggle this help
Esc Back to slideshow