Edit your HashNode Blog's CSS - Like MySpace.

Okay, so I'm not advocating bringing back the annoying fire animations or crazy text.

However, if you're using HashNode's platform for your personal blog, why not customize it a bit?

Disclaimer; I & HashNode are not responsible for a user's poor design choices! lol

Making CSS changes is easy:

  1. Go to your blog.
  2. Click on your blog's settings.
  3. Click the widget tab.
  4. Go to your blog and determine what classes you want to edit.
  5. Input your custom CSS, huzzah!


To keep this post minimal, I'm just tossing in what CSS I've changed to slim up the layout a little. Padding is great ... but you can have too much of a good thing.

<!-- Cust CSS -->
<style type="text/css">
.embed-widget{margin-bottom: 3rem !important;}
.embed-widget:hover{background-color: #4D4D4D;}
.publication-header{padding: 2rem 0 !important ;}
.pub-about-me {padding: 2rem 2rem !important;
    margin-bottom: 2rem !important;}
.content-data{font-size: 1.35rem !important;}
.publication-header h1 {margin-bottom: 0rem !important;}
.pub-post-card {margin-bottom: 2rem !important;}
.pub-feed-area{margin-bottom: 2vh !important;}
.pub-footer{padding: 2rem 0 !important;}
.fixed-footer {padding: 0.5rem 24px !important;}
<!-- End Cust CSS -->

Let me know what else you would like to see, happy to include some specific use cases or example of what you can do.

Write your comment…

Nice workaround, Benjamin N. Spak. We are thinking to support custom CSS officially on Devblog. :)

Interesting 😁

Reply to this…

Share your programming knowledge and learn from the best developers on Hashnode

Get started

Thanks for this nugget! I was able to style the blog header a bit more to my tastes and add a logo. :)


You're welcome Mike Bronner :)

Reply to this…