# VuePress Tutorial 9 - Styling the Homepage

By: J the Code Monkey

•Posted: Aug 31, 2022 •Updated: Apr 18, 2023

# Styling Files

The next step we'll be taking in developing the blog is learning how to override the palette.styl and index.styl files which will allow us to add our own global styling to the blog.

To do this we're going to first discuss what the index.styl and palette.styl files are used for. Then we'll take a look at the predefined styling files provided by the default theme (opens new window), and we'll discuss the overriding priority of the files. Finally, we'll implement what we leaned about by styling the homepage of the blog.

Make sure you start the local development server which should be running at http://localhost:8080/ (opens new window) to see the changes we'll be making to the site. If the changes aren't appearing after you save them, then try restarting your local development server.

# palette.styl

The palette.styl file is used to define global styling variables and override the predefined styling variables which in our case are being provided by the default theme (opens new window).

Here are some of the predefined styling variables available to use and override in your site:

We'll be using and overriding some of these predefined styling variables as well as defining our own styling variables as we develop the blog.

Here's a link to the full palette.styl file (opens new window) if you're interested. You can also view the full file by navigating to node_modules/@vuepress/core/lib/client/style/config.styl in your project.

Only Define Variables in palette.styl

You should ONLY define variables in the palette.styl file because it will be imported at the end of the root Stylus config file. This means several files will use it, so once you define your styling variables here they will be duplicated multiple times

# Creating the palette.styl File

Now that we have a good understanding of the palette.styl file, we're going to create the file by first creating a styles directory in the theme directory. The docs directory for your site should now look something like this:

.
├── docs
│   ├── .vuepress
│   │   ├── public
│   │   ├── theme
│   │   │   ├── global-components
│   │   │   ├── layouts
│   │   │   ├── styles
│   │   │   └── index.js
│   │   │
│   │   └── config.js
│   │
│   ├── icons
│   └── README.md

After creating the styles directory, we can now create the palette.styl file inside of it like this:

.
├── docs
│   ├── .vuepress
│   │   ├── public
│   │   ├── theme
│   │   │   ├── global-components
│   │   │   ├── layouts
│   │   │   ├── styles
│   │   │   │   └── palette.styl
│   │   │   └── index.js
│   │   │
│   │   └── config.js
│   │
│   ├── icons
│   └── README.md

Alternative Directory Structure

If you recall from the VuePress Tutorial 4 - Directory Structure post, you also have the option of creating your palette.styl file in the following location .vuepress/styles/palette.styl.

We'll be updating the palette.styl file later on in this post, but first we're going to take a look at the index.styl file.

# index.styl

The index.styl file is used to add global styles as well as override predefined styles which in our case are being provided by the default theme (opens new window).

Even though it's a Stylus (opens new window) file, you can also use normal CSS syntax if you prefer.

We won't discuss the predefined index.styl file in detail right now. It's just meant to be a reference in case you want to look for a specific style you want to override, or if you're interested in learning more about the predefined styling.

Here's the predefined index.styl which you can override and add your own styles to:

Here's a link to the index.styl file (opens new window) as well and the path to the file in your project node_modules/@vuepress/theme-default/styles/index.styl.

As we develop the blog we'll be using and overriding some of these predefined styles as well as defining our own styles.

Importing and Requiring Stylus and CSS Files

You may have noticed in the index.styl file that we're requiring other files, e.g., @require './config'. We'll discuss how to import and require .styl and .css files in a future post.

# Creating the index.styl File

Now that we have a good understanding of the index.styl file, we're going to create the file for the blog inside of the styles directory that we previously created. The docs directory for your site should now look something like this:

.
├── docs
│   ├── .vuepress
│   │   ├── public
│   │   ├── theme
│   │   │   ├── global-components
│   │   │   ├── layouts
│   │   │   ├── styles
│   │   │   │   ├── index.styl
│   │   │   │   └── palette.styl
│   │   │   └── index.js
│   │   │
│   │   └── config.js
│   │
│   ├── icons
│   └── README.md

Alternative Directory Structure

If you recall from the VuePress Tutorial 4 - Directory Structure post, you also have the option of creating your index.styl file in the following location .vuepress/styles/index.styl.

We'll be updating the index.styl file we just created later on in this post, but first we're going to take a look at the overriding priority.

# Overriding

Both the palette.styl and index.styl files follow a certain overriding priority.

# palette.styl

The user's palette.styl file which is located in .vuepress/styles/palette.styl has a higher priority than the theme's palette.styl file which is located in theme/styles/palette.styl. The theme's palette.styl file has a higher priority than any predefined palette.styl file which is located in node_modules/@vuepress/core/lib/client/style/config.styl in the case of the default theme (opens new window).

This means a theme can define it's own global styling variables and a user can override them as they see fit.

Here's an example of a global styling variable defined in each type of palette.styl file to make this concept clearer:

Here, the final value for $accentColor will be #ccff33.

Absence of User palette.styl File

As we develop the blog we won't be using the user's palette.styl file located in .vuepress/styles/palette.styl We'll just be using the theme's palette.styl file located in theme/styles/palette.styl which will allow us to override any predefined variables.

# index.styl

The same overriding priority applies to the index.styl file as well. So, a user's index.styl file which is located in .vuepress/styles/index.styl has a higher priority than the theme's index.styl file which is located in theme/styles/index.styl. The theme's index.styl file has a higher priority than any predefined index.styl file which is located in node_modules/@vuepress/theme-default/styles/index.styl in the case of the default theme (opens new window).

This means a theme can define it's own global styles and a user can override them as they see fit.

Both the user's index.styl file and the theme's index.styl file will get generated into the final CSS file used in the site, but the user's style gets generated later which is what gives it a higher priority than the theme's style.

Here's an example of a style defined in a user's index.styl and a style defined in a theme's index.styl file to make this concept clearer:

Here's the final CSS file generated for the site:

Notice how the user's style comes after the theme's style in the final CSS file. This is what gives the user's style a higher priority than the theme's style.

Absence of User index.styl File

As we develop the blog we won't be using the user's index.styl file located in .vuepress/styles/index.styl. Instead we'll just be using the theme's index.styl file located in theme/styles/index.styl which will allow us to override any predefined styles.

Now that we have a good understanding of how overriding works for both the palette.styl and index.styl files, we're now ready to override some predefined styling and add our own styling to the homepage of the blog.

# Homepage Styles

To start the homepage styling we'll be overriding and adding global styling variables to the palette.styl file. These global styling variables will then be used in the index.styl file as well as other files as we continue the development of the blog.

When overriding and adding styles to your site you can look at the predefined styling files to determine what properties you need to override. Along with looking at the predefined styling files you can also inspect your browser, go to the Elements tab, and then locate a tag or class that you want to override.

Be sure to add each block of code below one at a time to your project then view the changes in the browser to get a better understanding of what each block is responsible for.

If you're developing your own site, then you can check out these useful resources for coming up with color schemes and palettes for your site:

If you don't feel comfortable with the CSS discussed below, then here's a good resource to go through CSS Tutorial (opens new window).

You can also view the palette.styl and index.styl files in the tutorial-9 branch of the code-monkeys-blog-tutorials (opens new window) repository.

Now let's override and add some global styling variables to the palette.styl file.

# palette.styl

Here's what the palette.styl file looks like after overriding some predefined global styling variables and adding our own global styling variables:

$backgroundColor is used as the background color of the homepage as well as the whole blog.
$accentColor is used to color the action button on the homepage and to add styling to internal and external links.
$textColor is used to color the text on the homepage as well as the navbar text and other text throughout the blog.
$borderColor is used to style the border in the features section as well as the border in the navbar and other borders throughout the blog.
$darkBorderColor will be used to style the border and box shadow around the main card on the homepage.

Now let's take a look at overriding and adding some styles to the index.styl file.

# index.styl

We're going to start by overriding the background-color in the html tag:

Updates the background-color of the content below the Footer component to be the color specified by the $backgroundColor global styling variable we just added in the palette.styl file.

Next we'll override the background-color in the body tag:

Updates the background-color of the body of the site to be the color specified by the $backgroundColor global styling variable.

Now we're going to update the padding around the main tag which we'll select using the home class:

Updates the padding of the main tag with a class of home to be zero on all sides.

We're now going to update the styles for the hero class which is given to the header tag inside of the main tag and contains the logo, the title, the description, and the action button.

margin-left: 2rem adds a margin of 2rem to the left of the header tag.
margin-right: 2rem adds a margin of 2rem to the right of the header tag.
border: 0.125rem solid $darkBorderColor adds a border around the header tag with a thickness of 0.125rem, with a style of solid, and has a color of $darkBorderColor which was defined in the palette.styl file.
box-shadow: 0 0.5rem 1rem 0 $darkBorderColor adds a box shadow around the header tag.
border-radius: 5.625rem adds a border radius to the header tag border.
margin-bottom: 0.625rem adds a margin of 0.625rem to the bottom of the header tag.
padding: 2rem adds padding of 2rem around the header tag.

Here's a resource for the CSS box-shadow Property (opens new window) if you are interested in learning more about how it works.

Finally, we're going to update the styles for the features class which is given to the div tag inside of the main tag and contains the Learn, Code, and Crush text.

margin-left: 2rem adds a margin of 2rem to the left of the div tag.
margin-right: 2rem adds a margin of 2rem to the right of the div tag.
border-top: 0.125rem solid $borderColor adds a border to the top of the div tag with a thickness of 0.125rem, with a style of solid, and has a color of $borderColor which was defined in the palette.styl file.
border-bottom: 0.125rem solid $borderColor adds a border to the bottom of the div tag with a thickness of 0.125rem, with a style of solid, and has a color of $borderColor which was defined in the palette.styl file.
text-align: center horizontally aligns the text in each div tag with a class of feature that are inside of the div tag with a class of features.
font-size: 1.4rem sets a font size of 1.4rem for the h2 tags that are inside of the div tag with a class of feature.

# Next Steps

You may have noticed the main card on the homepage is being covered by the navbar. In the next tutorial we'll be fixing this issue as well as applying some hover effects to the logo and to the box shadow around the main card on the homepage.