Edit your HashNode Blog's CSS - Like MySpace.

Edit your HashNode Blog's CSS - Like MySpace.


0 min read

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.