Chapter 5 Fine tuning the look and feel

This chapter teaches you how to customize the look and feel of your website and how to personalize artistic elements including the website title, profile image, favicon, font style, font properties, and color choices.

Note: This chapter builds upon the website generated in chapter 4. All subsequent chapters will do the same. The final result can be viewed here - https://r4sites-anatole-custom.netlify.app/.

5.1 Prerequisites

Before you proceed, complete the following prerequisites:

  1. (optional) Discover your style
  2. Generate your website

5.2 How it works

This chapter will teach you how to use your own images in your website and how to edit aesthetic properties by modifying the website’s CSS (Cascading Style Sheet).

5.3 About CSS

If you are not familiar with CSS (Cascading Style Sheets), spend a moment looking over the CSS file that controls the appearance of the website generated in the previous chapter. While HTML defines the general layout of a webpage, CSS is used to control the appearance of an HTML webpage and its elements including font styles, colors, buttons, links, positioning of images, and so on. If you intend to alter the look and feel of your website, I recommend devoting attention to your website’s CSS.

To learn more about CSS, visit w3schools for tutorials and continue reading to learn about the Inspect tool in your browser.

5.4 About the Inspect tool

The “Inspect” tool in your browser is a powerful tool for experimenting with changes to CSS properties directly in the browser. Using the Inspect tool results in temporary changes to the CSS, and when the browser is refreshed the original CSS properties are restored.

Access this tool in the browser by right-clicking on any page element you want to edit (e.g. images, text, links, buttons) and click on “Inspect.” Image

To learn more about the Inspect tool, I recommend watching this short YouTube video.

5.5 Before you begin

After you generate a website and before you begin making edits to your website’s features, prepare your RStudio environment by serving the site locally and opening a few important files.

Serve the site locally

In the R console, run blogdown::serve_site() to render a live, local copy of the website in the “Viewer” pane. Any time you save an edit, your local copy will update in real-time and provide you with instant feedback on your edits.

Open important files in RStudio

Open the files listed below in RStudio to better prepare yourself for making edits.

  • config.yaml
  • config/_default/languages.toml
  • config/_default/params.toml
  • themes/anatole/assets/css/style.css

5.6 Update the base URL

Open config.yaml in the main directory and change the baseURL parameter from https://example.com to "/". The default example.com domain name is just a placeholder, and switching to "/" will instruct instruct Netlify to deploy your website behind your Netlify domain name. </> Code

This is a critical step to ensure your website and its dependencies are built and deployed properly.

5.7 Title, description, and author

  • Change the title “My Blog” on the Home page by opening config/_default/languages.toml and changing the title parameter. </> Code

  • Change the description “Call me Jane” on the Home page by opening config/_default/params.toml and editing the description parameter. </> Code

  • Change the author “Jane Doe” by opening config/_default/params.toml and editing the author parameter. Doing this will change the title of your website as it appears in the web browser tab. </> Code

5.8 Profile image

The profile image is the main image on the Home page. To use your own image, navigate to static/images/ and replace profile.jpg with your own image. If your image file is also named profile.jpg, then no additional edits are needed. If not, open config/_default/params.toml and update the profilePicture parameter with your image file name. </> Code

If you are unhappy with the image dimensions (e.g. too narrow or too wide), open themes/anatole/assets/css/style.css and edit the CSS properties. For this theme, you will need to edit the CSS properties for narrow screen devices (</> Code) and wide screen devices (</> Code).

5.9 Favicon

The favicon is the tiny image that appears in the web browser tab when you visit the website. Navigate to static/favicons/ and replace favicon.ico with your own favicon. If your favicon file is named favicon.ico, then no additional changes are needed. If not, open config/_default/params.toml and update the favicon parameter with your favicon file name.

To create a favicon from an image, visit https://favicon.io/favicon-converter/.

5.10 Font style

If you don’t like the default font, you can easily change it. I recommend selecting from Google Fonts. For this example, I will use the Noto Sans font.

The steps to import a Google Font include the following:

  1. Locate and select your chosen font from from Google Fonts.

  2. Look at all of the available styles (e.g. Regular, Bold, Italic, etc.) and decide which styles you would like to import into your website. I recommend importing all available styles. To import all available styles, select “+ Select this style” beside each style. Image

  3. Select the “@import” option under “Use on the web.” Copy the HTML code in between the style tags(Image) and paste it into the main CSS file located at themes/anatole/assets/css/style.css. (</> Code)

  4. Under “use on the web,” locate the CSS rule for specifying font-family (Image). In your main CSS file located at themes/anatole/assets/css/style.css, update all instances of font-family to change all font styles to your new font. Fortunately, the Anatole theme only specifies font-family in a single location. </> Code

5.11 Font sizes

In general, the Hugo Anatole theme uses rather small font sizes throughout the website. To change font sizes, locate the webpage element you want to modify using the Inspect tool in your browser. For the selected element, experiment with the font-size property (e.g. font-size: 20px). Once you are satisfied, edit the main CSS file located at themes/anatole/assets/css/style.css by adding the font-size property to the appropriate CSS class.

Consider the following edits:

  • Increase the font size of the p class, which will essentially increase the font size throughout the entire website. Change the font-size property from 14px to 16px or higher. </> Code

  • Increase the font size of the text in the navigation bar located at the top of the website when viewed on a wide screen. Change the font-size property of the .page-top .nav class from 12px to 16px or higher. </> Code

5.12 Colors

You can change the color of essentially any webpage attribute including text, backgrounds, borders, and so on. To change a color, locate the webpage element you want to modify using the Inspect tool in your browser and experiment with the color or background-color properties.

Consider the following edits:

  • Social media icons: These are visible beneath the website title on the Home page. Open the main CSS file located at themes/anatole/assets/css/style.css and edit the .sidebar .social-links i class by specifying a color attribute. Here I have chosen to use the HEX color #a4a4a4. </> Code Image

  • Post tags: These are visible on the Home page beneath post titles and summaries. Open the main CSS file located at themes/anatole/assets/css/style.css and edit the .post .post-footer .meta a class and editing thecolor attribute. Here I have chosen to use the HEX color #6a92c5. </> Code Image

5.13 Next steps

Proceed with configuring pages and features including contact forms and social media links.

Optionally, skip ahead and deploy your website to the internet. Though the steps to deploy your website are covered in a later chapter, readers are welcome to complete these steps at any point following the initial generation of the website.