# Customizing my hashnode blog using the custom CSS feature

Today I decided to customize my hashnode blog using hashnode's custom CSS setting. Now if you know the basics of CSS, you can easily customize your own blog. In this article, I will show you how I customized my blog.

**Note:** Currently, you have to be an ambassador to use the custom CSS feature.

You can access the custom CSS feature in Dashboard -> Appearance -> Add Custom CSS

### Custom header colors (All sections)
I chose a light and a dark theme color so they match the light and dark themes of hashnode.

In this case, I chose a light green for light mode and a darker green for dark mode.

This was done by using the "background-color" property.
```css
.blog-header {
/* Light mode */
    background-color:#00FA9A;
}
.mode-dark .blog-header {
/* Dark mode */
    background-color:#66CDAA;
}
```
Before: Dark mode:
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1603598354903/qaqbAFPRC.png?auto=compress)
Before: Light mode:
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1603599576806/Ep2z4r9rp.png?auto=compress)

After: Dark mode
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1603599704494/35WOE2mid.png?auto=compress)

After: Light mode
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1603599684047/f5yQKP59Y.png?auto=compress)

### Custom headers/underlines (Article section)

```css
h2,h3,h4,h5,h6,b,u {
       background: linear-gradient(rgba(255,0,0,0) 60%,#66cdaa 40%);
}
```
Yay! But something isn't right:
![56lHS2gitR.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1603641782373/GnFLw2Z27.png)

The line is too wide, so lets fix by using `display: inline-block;`
```diff
h2,h3,h4,h5,h6,b,u {
    background: linear-gradient(rgba(255,0,0,0) 60%,#66cdaa 40%);
+  display: inline-block;
}
```

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1603645841353/9hmhIij5J.png)

### Sticky headers (Article section)

Not really that hard as `position: sticky;` property. I mainly added this feature because if you are reading a long article, you have to scroll all the way back up to toggle the theme/search for other articles.

```css
.blog-header {
    position: -webkit-sticky; /* Safari support */
    position: sticky;
    top: 0;
}
.mode-dark .blog-header {
    position: -webkit-sticky; /* Safari support */
    position: sticky;
    top: 0;
}
``` 

There is no example of this because you are seeing the sticky header right now!

I've put all of the code on [GitHub Gists](https://gist.github.com/aboutDavid/8ff3099228ae545394df9419f9ab15a6).

Edit: I've decided not to do the custom headers until I fix a few things.