Search for a command to run...
Tips & Tricks to customize your Hashnode blog!
I work as a Tech Arch Senior Manager at Accenture and am a mother to two wonderful kids who test my patience and inspire me to be curious. I love cooking, reading, and painting.
Thank you for taking the imitative to do this. Appreciate it. I like your theme too, good job.
Awesome! Just what I needed!
Thanks for the article. Can custom CSS be used to change the default colorization & styling of code snippets embedded in markdown?
Yes, you can. You will need to modify the .prose class used by the pre-tags. It is a wrapper surrounding the code tags.
Narmada Nannaka hooray, thank you!
Please, I am more concerned about where or how you design your custom images for your articles. Care to maybe write an article on that soon. Thanks. This article is helpful by the way.
Thanks Uchenna Egbo! I am pleased the images grabbed your attention. I am working on a draft around it - you should find a detailed article soon.
Hi Uchenna Egbo, I got a new article for the images as you asked - check it out here and leave your thoughts :)
Hi Alimam Miya, I am planning to share it on a separate blog and upload it to Github soon. Keep an eye out for it!!
I like your choice of theme and also thanks for sharing, hopefully, I'll customize mine soon.
Glad you liked the theme and blog! Go for it, I am sure it will make a great difference :)
Thanks, Sandeep!
A Tale of Protocol Quirks, JSON Wrestling, and the Joy of Finding the Bug
In 2018, OpenAI pledged its "primary fiduciary duty is to humanity." Seven years later, the company launches erotic AI companions while families testify in courtrooms about children who never came home. We're conducting the largest unregulated behavi...
Did you know that 68% of organizations now identify data silos as their top operational concern? A 7% increase from 2023, according to a 2024 DATAVERSITY® Trends in Data Management Survey. In today's hyper-personalized business landscape, enterprises...
The Changing Search Paradigm This week, OpenAI introduced shopping capabilities within ChatGPT's search feature, coinciding with Mastercard unveiling Agent Pay, a new payment approach that enables AI agents to securely complete purchases. These devel...
The Reality of AI Hallucinations: Recent Examples Last week, the AI coding assistant tool Cursor encountered a crisis when its front-line AI support bot named “Sam” confidently provided a user with a completely fabricated policy. The user raised a su...
On this page
I recently moved my blogging site from a WordPress platform to Hashnode. One of the key features that sold me out is the ability to add custom CSS. This post covers some of the tips and tricks I learned while setting up custom CSS for my blog.
One may question why should we resort to such stress to personalize one's own blog? Well, there are many reasons and they vary with your interests. For me, it is to test out the feature and understand the design mechanism behind the development. Also, let's not forget the fact that I want my blog to stand out and not look like every other blog.
Before we begin it is important to note that the custom CSS feature is currently enabled only for ambassadors. For more details on how to become an ambassador, check out this link. And, for those ambassadors who are interested in learning about how to enable custom CSS, save the changes and publish them, follow this link.
Awesome! Now you are all set up to write CSS for your website. Let's start this mission...🏁
This is the first item I worked on. I personally didn't like how the website navigation links are on one line and the social media icons are displayed on the next row. I changed this by targeting the .blog-sub-header container which wraps both the nav links and social media links. This is achieved by adding the following code:
.blog-sub-header.items-end {
align-items: center;
}
Now that we have achieved displaying all links in one single line, I noticed they overlap from 450px width and less. Add the following to change the flex-direction to column using the following code:
@media only screen and (max-width: 450px) {
.blog-sub-header {
flex-direction: column;
align-content: space-around;
justify-content: center;
}
}
You can do much more to the navigation links by adding hover color effects to these classes:
There are two style options to choose from for the header section and again this is a personal preference. Do you want the full width of the header to display certain background or just the container that has the logo and navigation links?
To update the background for the full header width, use .blog-header class like this one here:
Now to target just the container, use .blog-header .container classes like this one here:
You will notice in the above screenshots that I targeted a full width in dark mode and just the header width for normal mode. This can be achieved by applying your full background to .blog-header and by inheriting the parent background for .blog-header .container in dark mode.
Again depending on the page you are targeting, the main body section consists of different divs/containers for the author card, newsletter subscription form (if you have it enabled), blog items listed as cards, blog detail (for the articles page), content of the additional pages. Some key classes to target here are:
You will notice I removed the author card section from my home page and this is done using the following code:
.blog-author-card {
display: none;
}
You might wonder why I didn't use the visibility attribute and set it to hidden. The visibility tag will hide the element but it will still occupy the space allocated for that element. Whereas, the display tag will hide the element as if it is not there. So, you know now. 😎
When you make changes to your header and footer, ensure those changes are copied across to all the sections of your website - Home, Articles, and Pages tabs.
You can add a different styling for an element to accommodate the dark mode. This can be achieved by adding .dark before your target classes. Sample code below updates the text color from black to yellow when dark mode is enabled:
.dark .blog-header .text-black {
color: #ff9f1c;
}
If you chose a custom background for the header and blog content like I did, make sure relevant images are referred to in dark mode.
One task I found difficult to solve is to style the author card background-color which is fixed to the div element as an inner element style. The only way to override is to use !important property to the custom CSS. Let me know if you know of a different way to override it without using the !important property. So, what are you waiting for, give it a try by joining Hashnode here?
Enjoy my blog? For more such awesome blog articles - follow, subscribe and let's connect.