Slashism

Slashism

How I Added Sticky Header and Custom CSS on My Hashnode Blog

How I Added Sticky Header and Custom CSS on My Hashnode Blog

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

Hashnode blogs got this cool feature where you can apply Custom CSS on your blog. Although it's in the alpha stage and only available to the Hashnode Ambassadors.

So I played around a bit and came up with this initial template where I have added the following:

  1. Sticky header
  2. Minor tweaks in the header
  3. Light mode theme for the code editor
  4. Text heading styles
  5. Font color improvements in dark mode
  6. Shaky effect on reactions

1. Sticky header

I mostly use the light mode but sometimes I prefer the dark mode if I am reading articles with my lights off. It was a little bit annoying to scroll to the top of the page to toggle the dark mode. So I made the top bar as a sticky.

2. Minor tweaks in the header

Before:

chrome_mGwTOcCAUr.png

After:

chrome_75P3ydQdPm.png

I have added a border and reduced the height for the blog author area. I have added a dotted border around my profile picture. These customizations are handled for both light and dark mode.

3. Light mode theme for the code editor

No matter what display mode you choose, you would always see a dark editor. So I added a light mode for the code editor if the light mode is toggled.

chrome_TAOMvaqoai.png

It will change back to the dark editor in the dark mode. Although, I made some tweaks to the dark mode as well by matching it with the background.

chrome_rA6SMm6Adu.png

4. Text heading styles

I wanted to give the headings a different look. So I added this background border as you can see in the header itself.

I also made a little tweak for the strong texts.

chrome_fRVtJpMa46.png

It's underlined but it looks different on both modes.

chrome_JbsoUIFTYV.png

5. Font color improvements

Hyperlinks look nice in the light mode but in the dark mode, the dark blue color was not giving the best look.

Before: chrome_KoAeeM5GY7.png

After: chrome_ndGkZ0ErdS.png

6. Shaky effect on reactions

I found it cool so added it as a bonus. Check it out by reacting to this article. 😁

Resources

Here is the Hashnode Custom CSS Repository with the entire CSS code for Home, Articles, and Pages.

Let me know what you guys think of these changes.

Thanks for reading ğŸŽƒ

 
Share this

Impressum

🙋‍♂️ Hello there,

My name is Pankaj, and I am the author of Slashism. I hope that you learn something useful today.

If you like my content and want to stay updated then subscribe to my newsletter in the header.

You can also follow me on Twitter and say hello.

If you would like to request a particular article/topic covered or would want to discuss something, then please start a discussion here on Github Discussions

⭐ Keep learning, keep growing ⭐

Proudly part of