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!

hash-node.jpg

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;}
</style>
<!-- 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.

Comments (4)

Syed Fazle Rahman's photo

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

Mina Yacoub's photo

Big Data System Engineer and Data Analyst

Interesting 😁

Deactivated User's photo

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

mikebronner.me

Benjamin N. Spak's photo

Creator of #301DaysOfCode 🏆 & CodeCareer.io

You're welcome Mike Bronner :)