# Customized CSS: another reason to love Hashnode more


So a few days back I saw @[Sebastian Gale](@seblz432) 's post where he talked about how he used customized CSS to give his blog a new look. But this feature was only available for hashnode ambassadors and I  wasn't one yet. But thanks to Hashnode, I got assigned the ambassador role on Hashnode last week which means I get to access new cool features. Among all, **Customized CSS** was the one I was most excited about. 

First of all Hashnode's UI is so good that I couldn't think of something I could change. But still, I spent some time and made a few little changes. Have a look around [blog.rutikwankhade.dev](https://blog.rutikwankhade.dev)

 
### 1. Header of the blog
I felt there was more space in the header that can be reduced. So I changed it and made it look like a navbar. Again this is my personal preference.

![Before-after.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1613304500150/Ma6Tkfglv.png)

### 2. Centered everything in the author area 
In mobile view, the elements in the author area were aligned left. So I made it centered.
If you are changing a layout, be careful. There is a high chance you will mess with its responsiveness.

![Before-after (5).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1613325383437/M1AGvz6V7.png)

### 3. Blog cards and background texture.
This wasn't needed as the original UI is super clean but I did it to give it a unique look. While changing colors, don't forget to consider dark mode too.


![Before-after (3).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1613305786185/FlZMkTn2o.png)

### 4. Styled load more button
Any shade of blue and I am in. I changed the color of the load more button to my favorite color.


![After.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1613306344690/7OXHkxTgc.png)

### 5. Rounded blog cover
Added border-radius to the blog cover and some margin to the top. Also, I reduced the font-weight of the title by 100 and reduced its font size on small screens.  

![Before-after (4).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1613307070535/qzZx7T2qw.png)

### 6. Cool colors for links.
This is inspired from @[Mohd Shad Mirza](@iamshadmirza)'s blog. I really liked this one.

![After.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1613308644405/G4S5UccR4.gif)

### 7. Styled Quotes 
Why not add colors to the quotes, This has made the blog post more intuitive. 

![After (2).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1613313556738/N336VSimH.png)


### 8. A little shadow on similar posts

![screenshot - 2021-02-14T201053.911.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1613313673909/S0eWh-TKn.png)


> 
Now, it feels like ***my own personal blog***. I do have a blog I made a long time ago with Gatsby. Setting it up wasn't easy. But now that I have more than I wished with Hashnode. I don't think I need it anymore. 

I was going to share the code. But then I thought why not let you guys be a little creative and try by yourself. After all, it's just a few CSS rules applied to specific classes. By the way, it's only available for **hashnode ambassadors**. So if you are not, you might need to wait till it becomes public for everyone.
Also, if someone from hashnode team is reading this, please let me know if I changed something I shouldn't.

#### ✨ Here are a few customized blogs to check out.
- https://blog.sebastiangale.ca/ by @[Sebastian Gale](@seblz432)
- https://lo-victoria.com/ by @[Victoria Lo](@victoria)
- https://catalins.tech/ by @[Catalin Pit](@Catalinpit)


Also if you have tried this feature, drop your blogs below. I would love to check them out.
________________________________
I keep writing about the things I learned and applied. So you can connect with me on [Twitter](https://twitter.com/WankhadeRutik), [Github](https://github.com/rutikwankhade)  or [Linkedin](https://www.linkedin.com/in/rutik-wankhade). Also, subscribe to my newsletter and stay up-to-date with my latest blog posts.

⚡ Happy learning!

%%[substack]