Revamping my Hashnode blog using the amazing Custom CSS feature!

Featured on Hashnode

Subscribe to my newsletter and never miss my upcoming articles

Hashnode is a content creation platform focused on enabling developers to create full-fledged and optimized blogs hosted on their own domain for free without sacrificing visibility and readership.

Developers were really excited when Hashnode announced the custom CSS launch last week because they all yearned for more control over the styling of their Hashnode powered blogs. ๐ŸŒˆ

I used the custom CSS feature to override the default Hashnode style on my hashnode powered blog. It reaffirmed my opinion about Hashnode being the best content creation platform for developers. ๐Ÿบ

This article will explain the seamless process I took in customizing my blog and my thoughts on why you should customize your Hashnode blog as well.

Prerequisites

This article assumes the reader has the following:

  • A web browser.
  • A Hashnode powered blog.
  • Basic knowledge of CSS.

How to enable the custom CSS feature

The custom CSS feature is not enabled by default on Hashnode. So I had to enable it on my blog's dashboard. Here are the steps I followed to enable the custom CSS feature.

  1. Log in to your Hashnode account.
  2. Click on your profile picture at the bottom-left corner of the page on a desktop screen or top-right corner on a mobile screen. Hashnode Profile Picture

  3. Click on the Blog Dashboard option from the popup modal to access the dashboard page. Blog Dashboard option

  4. On your Blog's Dashboard page, click on APPEARANCE. Appearance

  5. Scroll to the bottom of the APPEARANCE settings page and click on the Toggle button to enable custom CSS on your blog. Enable custom CSS

Adding custom CSS to my blog

After enabling custom CSS on my blog, I clicked on the Add Custom CSS link (see image above) on my Blog's Dashboard to access the CSS editor shown below.

CSS editor

This is where the magic happened. ๐ŸŽจ๐Ÿ’ƒ๐Ÿฝ

As you may have noticed, the CSS editor is divided into three different tabs - Home, Articles, and Pages.

So, I had to add custom CSS for my blog's homepage, article, and pages individually.

At the time of this writing, the custom CSS feature is only available for Hashnode Ambassadors.

Customizing my blog's homepage

Defualt Homepage

The first section I changed was my blog's homepage. I mean, who doesn't love a unique homepage?

I did this by adding the custom CSS (shown below) using the CSS editor.

.blog-header{
    padding: 10px 0;
    background: #ffd600;
    color: #000;
    border-bottom: none;
}

.blog-theme-switcher, .blog-settings, .new-story-button{
    color: #000;
}

.blog-social-media-section a, .blog-sub-header-nav a{
    color: #000;
    border-radius: 5px;
    opacity: 100%;
}

.blog-sub-header-nav a.blog-nav-active{
    background: #000;
    color: #FFF;
}

.blog-author-area-photo{
    border: 5px solid #ffd600;
}

.blog-post-card-cover a, .mode-dark .blog-post-card-cover a{
    border: 5px solid #ffd600;
}

Looking at the code snippet above, I modified the .blog-header class to apply custom styling to my blog's header. Similarly, using the .blog-social-media-section and the .blog-sub-header-nav classes, I was able to style the social media icons and the navigation bar respectively.

Other changes I made include making my image area yellow and each of my postcards cover yellow. And yes, I really love yellow.

Hashnode advises users only to modify class names that start with blog-* because they made sure they are unique and represent only one component. For instance, if you want to change your blog's header, you should modify the .blog-header class. Find out more about this here.

Customizing my articles page

Old Articles Page

The next section I modified was my articles page. I did this by adding the custom CSS (shown below) using the CSS editor.

.blog-header{
    padding: 10px 0;
    background: #ffd600;
    color: #000;
    border-bottom: none;
}

.blog-theme-switcher, .blog-settings, .new-story-button{
    color: #000;
}

.blog-social-media-section a, .blog-sub-header-nav a{
    color: #000;
    border-radius: 5px;
    opacity: 100%;
}

.blog-sub-header-nav a.blog-nav-active{
    background: #000;
    color: #FFF;
}

By applying the custom CSS shown above, I am ensuring that the same styling used on my home page is what is used on my articles page.

This is what my blog's article page looks like now.

New Articles Page

Customizing my static page

Default Page Design

Finally, I changed the default look of my static page as well. It was time to make my About page look even cooler. I did this by adding the custom CSS (shown below) using the CSS editor.

.blog-header{
    padding: 10px 0;
    background: #ffd600;
    color: #000;
    border-bottom: none;
}

.blog-theme-switcher, .blog-settings, .new-story-button{
    color: #000;
}

.blog-social-media-section a, .blog-sub-header-nav a{
    color: #000;
    border-radius: 5px;
    opacity: 100%;
}

.blog-sub-header-nav a.blog-nav-active{
    background: #000;
    color: #FFF;
}

.blog-page-title{
    display:none;
}

Here, I maintained the same header design for my homepage and removed the About heading from the page.

Take a look at the new look below. Pretty cool, right? I know!

New Page design

After adding all the custom CSS to the editor, I clicked on the Publish button to ship my customization to production.

Guess whose blog is so damn cool right now? Mine!

My thoughts?

The importance of personal branding for developers can not be overemphasized because of its ability to help developers build a distinct identity, access opportunities, and stand out in the developer community.

Hashnode exists to help you focus on developing and sharing content on your blog while we take care of the rest - customization, readership, visibility, total control of your content, and so much more.

Using custom CSS to style your Hashnode powered blog allows you to not only enjoy Hashnode's developer-centric product for free but also maintain your personal branding effortlessly.

Always remember that the best time to create a Hashnode powered blog is now! Learn more and start blogging now.

Conclusion

I hope you were able to learn about Hashnode's custom CSS feature in this article. Even though this article covers the fundamental possibilities of changing the design of your Hashnode powered blog with CSS, there's so much more you can do.

Feel free to use what you've learned in this article to create fascinating designs for your blog.

If you have any questions, you can leave it in the comments section below, and Iโ€™ll be happy to answer every single one.

Alfred Arcifa's photo

I don't have Custom CSS button in my appearance dashboard! Damn!

Edidiong Asikpo's photo

Hey Alfred Arcifa. The Custom CSS feature is only available for Hashnode Ambassadors at the moment because it is still in beta. Please read the details on how to become a Hashnode Ambassador here.

Alfred Arcifa's photo

Edidiong Asikpo thanks for this info! ๐ŸคŸ๐Ÿฝ

Temiloluwa Adelowo's photo

Amazing feature. I hope to start my blog soonest and try this out

Edidiong Asikpo's photo

Thank you. Let me know if you need any help on creating your Hashnode powered blog.

Syed Fazle Rahman's photo

Well done, Edidiong Asikpo. I am loving the color combination. ๐Ÿ˜ป

Edidiong Asikpo's photo

I am glad you like it. Thank you Fazle.

Peter Thaleikis's photo

Awesome, looks great!

Shamaayil Ahmed's photo

Great content.

Edidiong Asikpo's photo

Thank you Shamaayil Ahmed. Glad you found it useful.

Tina Holly's photo

Very excited for this feature! Any idea when it'll come to the platform for everybody including us non-ambassadors? ๐Ÿ˜

Edidiong Asikpo's photo

It will be available for everyone soon. We can also give you access to it too if you meet a few criteria. Please send me a DM on Hashnode's Discord or Twitter @didicodes. If you are interested.

Hrithwik Bharadwaj's photo

Woah your blog looks super cool now

Edidiong Asikpo's photo

Aww. I am glad you like it.

Looking forward to seeing the new look of your blog when you use the custom CSS feature.

Victoria Lo's photo

Beautiful! I love every page you customized :)

Edidiong Asikpo's photo

Yay. I am glad you like it. I went to see yours too. Do let me know if you need help with anything regarding the custom CSS.

Nwafor Uchechukwu's photo

Nice article๐Ÿ‘Œ. Can't wait for this feature to be out to the public

Edidiong Asikpo's photo

Thank you Nwafor Uchechukwu. You can get access to the custom CSS feature and other cool things on Hashnode if you become an ambassador. Find out more here.

Nwafor Uchechukwu's photo

Edidiong Asikpo thanks for the info๐Ÿ˜Š

Amarachi Emmanuela Azubuike's photo

Can't wait to become an ambassador so I can give this a try. Great article!

Show +1 replies
Amarachi Emmanuela Azubuike's photo

Edidiong Asikpo Just found out I'm an ambadsador already. I had no idea. Thank you.

Edidiong Asikpo's photo

Amarachi Emmanuela Azubuike Yay. That is amazing. I can't wait to see the new look of your blog.

Apoorv Tyagi's photo

Your blog looks so cool๐Ÿ”ฅ๐Ÿ”ฅ I might have to give it a try myself & revamp my blog.

Thanks for this article Edidiong Asikpo๐Ÿ‘

Edidiong Asikpo's photo

Thank you Apoorv Tyagi.

Yes, go ahead and revamp your blog. Do well to share it with me when you are done. I'd love to see it.

Ameen's photo

Color combination is lit

Edidiong Asikpo's photo

I am glad you like it. Thank you.