Welcome to my blog!
Updated
•5 min read
Hey! If you are reading this, you have successfully visited my blog on hashnode.com.
As you might have already noticed, I edited my blog page with some custom CSS. So if you like this design and want to apply it to your own page, feel free to copy the code down below:
Please note that this project is still not finished and changes in the hashnode front end may break this CSS code at any point in time.
Homepage:
/*###############################*/
/*Currently disabled: */
.blog-theme-switcher{ /*disables the darkmode / lightmode switcher which is apparently not allowed so I removed this edit*/
/*display: none !important;*/
}
/*###############################*/
/*General Styling: */
.dark .blog-header{ /*Adds a dropshadow to the header*/
-webkit-box-shadow: 0px 10px 16px 5px rgba(27,27,27,0.57);
box-shadow: 0px 10px 16px 5px rgba(27,27,27,0.57);
}
.dark body{ /*Changes the general body color (visible when zooming out)*/
background-color: #1b1b1b !important;
}
#__next div:first-child{ /* Changes the color of the Newsletter Subscribtion Form on the Home Page */
background-color: #00000000;
}
* div{ /* Changes the overall div border color */
border-color: #323232 !important
}
div:has(.blog-sidebar-header) { /* Changes the sidebar color */
background-color: #202020 !important;
}
.blog-main-logo{ /*Changes Logo in Header and Sidebar*/
content: url('https://raw.githubusercontent.com/Celtrius/CeltriusHome/main/WhiteBanner.webp');
}
.blog-header .blog-main-logo{ /*Changes Logo and its width*/
content: url('https://raw.githubusercontent.com/Celtrius/CeltriusHome/main/WhiteBanner.webp');
width: 30rem;
}
.blog-sidebar-header .blog-main-logo{ /*Changes Logo and its width in the sidebar*/
content: url('https://raw.githubusercontent.com/Celtrius/CeltriusHome/main/WhiteBanner.webp');
width: 13rem;
}
@media (max-width: 767px){ /* Mobile Edits*/
.blog-header .blog-main-logo{ /*Logo in Header*/
width: 75vw;
}
.blog-sidebar-header .blog-main-logo{ /*Logo in Sidebar*/
width: 13rem;
}
}
div:has(.blog-sidebar-header){
background-color: #242525 !important;
}
/*###############################*/
/* Post Catalogue Edits: */
.dark .blog-article-card-cover{ /*Edits big Card*/
background-color: #303030 !important;
border-color: #3c3c3c !important;
}
.dark .blog-featured-container > div:not(.blog-article-card) { /* Edits smaller cards*/
background-color: #303030 !important;;
border-color: #3c3c3c !important;
}
/*###############################*/
/*Button Edits: */
.dark .blog-featured-area { /* Changes the Featured Post Background Color */
background-color: #242525 !important;
}
.dark .blog-footer-area{ /* Footer Area Color */
background-color: #1b1b1b !important;
border-color: #323232 !important;
}
.dark .blog-author-container{ /* Footer Area Color */
background-color: #202020 !important;
}
/*###############################*/
/*Subscribe to Newsletter Box: */
.dark .blog-subscription-form-wrapper {
background-color: #1b1b1b !important;
}
.dark input.blog-subscription-form-input {
background-color: #202020;
border-color: #282828;
}
.dark input.blog-subscription-form-input:focus {
background-color: #202020;
border-color: #282828;
}
/*###############################*/
/*Button Edits: */
button.blog-follow-button { /* Edits Follow Button in header*/
background-color:#ff224e;
border-color: #ff224e;
color: #ffffff;
}
button.blog-more-icon { /* Edits Dropdown Button in header*/
background-color:#ff224e;
border-color: #ff224e;
color: #ffffff;
}
button.blog-subscription-form-button{ /* Edits Subscribtion Button in the Newsletter Section at the bottom of the page*/
background-color:#ff224e !important;
border-color: #ff224e;
color: #ffffff !important;
}
.dark a[aria-label="Publish with Hashnode"] { /*Changes the background color of the "Publish with Hashnode" Button in the Footer*/
background-color: #242525 !important;
border-color: #302f2f !important;
}
/*###############################*/
/*Hasnode More Drop Down Edits: */
.dark div[data-id="hashnode-more-dropdown"]{ /*Adds a shadow to the Hashnode More Dropdown when not logged in*/
-webkit-box-shadow: 0px 0px 16px 5px rgba(0,0,0,0.3);
box-shadow: 0px 0px 16px 5px rgba(0,0,0,0.3);
border-radius: 15px;
background-color: #1b1b1b !important;
}
div[data-id="hashnode-more-dropdown"] a[href="https://hashnode.com/login"]{ /* Changes the Color of the Button inside the Hashnode More Dropdown*/
background-color:#ff224e;
border-color: #ff224e;
color: #ffffff;
}
path[d="M4.39 18.71c-5.133 5.131-5.133 13.449 0 18.58l14.868 14.862c5.133 5.13 13.454 5.13 18.586 0L52.713 37.29c5.132-5.13 5.132-13.448 0-18.579L37.844 3.848c-5.132-5.13-13.453-5.13-18.586 0L4.39 18.71Zm30.666 15.793a9.193 9.193 0 0 0 0-13.006 9.2 9.2 0 0 0-13.01 0 9.193 9.193 0 0 0 0 13.006 9.202 9.202 0 0 0 13.01 0Z"]{
/* Changes the Color of the Hashnode SVG Logo*/
fill: #ff214f !important;
}
Articles:
* div{ /* Changes the overall div border color */
border-color: #323232 !important
}
.blog-main-logo{ /*Changes Logo and its width*/
content: url(https://i.imgur.com/YFASdcD.png);
width: 50%;
}
@media (max-width: 921px){
.blog-main-logo{ /*Changes Logo and its width for mobile devices*/
width: 80%;
}
}
.blog-article-page{
background-color: #242525 !important;
}
div:has(.blog-sidebar-header){
background-color: #242525 !important;
}
.dark .blog-article-page{
background-color: #242525 !important;
}
.dark .blog-post-detail-card{
background-color: #202020 !important;
}
.dark body{ /*Changes the general body color (visible when zooming out)*/
background-color: #1b1b1b !important;
}
.dark body >#__next> div:first-child {
background-color: #242525 !important;
}
.dark .blog-footer-area{ /* Footer Area Color */
background-color: #1b1b1b !important;
border-color: #323232 !important;
}
button[variant="primary"]{
background-color:#ff224e !important;
border-color: #ff224e !important;
color: #ffffff !important;
}
/*###############################*/
/*Button Edits: */
button.blog-follow-button { /* Edits Follow Button in header*/
background-color:#ff224e;
border-color: #ff224e;
color: #ffffff;
}
button.blog-more-icon { /* Edits Dropdown Button in header*/
background-color:#ff224e;
border-color: #ff224e;
color: #ffffff;
}
button.blog-subscription-form-button{ /* Edits Subscribtion Button in the Newsletter Section at the bottom of the page*/
background-color:#ff224e !important;
border-color: #ff224e;
color: #ffffff !important;
}
.dark a[aria-label="Publish with Hashnode"] { /*Changes the background color of the "Publish with Hashnode" Button in the Footer*/
background-color: #242525 !important;
}
/*###############################*/
/*Hasnode More Drop Down Edits: */
.dark div[data-id="hashnode-more-dropdown"]{ /*Adds a shadow to the Hashnode More Dropdown when not logged in*/
-webkit-box-shadow: 0px 0px 16px 5px rgba(0,0,0,0.3);
box-shadow: 0px 0px 16px 5px rgba(0,0,0,0.3);
border-radius: 15px;
background-color: #1b1b1b !important;
}
div[data-id="hashnode-more-dropdown"] div:first-child div:first-child div:nth-child(2) a[href="https://hashnode.com"]{ /* Changes the Color of the Button inside the Hashnode More Dropdown*/
background-color:#ff224e;
border-color: #ff224e;
color: #ffffff;
}
Pages:
/*###############################*/
/*General Styling: */
.dark .blog-header{ /*Adds a dropshadow to the header*/
-webkit-box-shadow: 0px 10px 16px 5px rgba(27,27,27,0.57);
box-shadow: 0px 10px 16px 5px rgba(27,27,27,0.57);
}
.dark body{ /*Changes the general body color (visible when zooming out)*/
background-color: #1b1b1b !important;
}
div:has(.blog-sidebar-header){
background-color: #242525 !important;
}
* div{ /* Changes the overall div border color */
border-color: #323232 !important
}
.dark body{ /*Changes the general body color (visible when zooming out)*/
background-color: #1b1b1b !important;
}
.blog-main-logo{ /*Changes Logo and its width*/
content: url(https://i.imgur.com/YFASdcD.png);
width: 50%;
}
@media (max-width: 921px){
.blog-main-logo{ /*Changes Logo and its width for mobile devices*/
width: 80%;
}
}
.blog-page-area{
background-color: #242525 !important;
}
.dark .blog-article-card-cover{ /*Edits big Card*/
background-color: #303030 !important;
}
/*
#__next div:first-child{ /* Changes the color of the Newsletter Subscribtion Form on the Home Page
background-color: #323232 !important
} */
.dark body >#__next> div:first-child {
background-color: #242525 !important;
}
.dark .blog-footer-area{ /* Footer Area Color */
background-color: #1b1b1b !important;
border-color: #323232 !important;
}
/*###############################*/
/*Button Edits: */
button.blog-follow-button { /* Edits Follow Button in header*/
background-color:#ff224e;
border-color: #ff224e;
color: #ffffff;
}
button.blog-more-icon { /* Edits Dropdown Button in header*/
background-color:#ff224e;
border-color: #ff224e;
color: #ffffff;
}
button.blog-subscription-form-button{ /* Edits Subscribtion Button in the Newsletter Section at the bottom of the page*/
background-color:#ff224e !important;
border-color: #ff224e;
color: #ffffff !important;
}
.dark a[aria-label="Publish with Hashnode"] { /*Changes the background color of the "Publish with Hashnode" Button in the Footer*/
background-color: #242525 !important;
}
/*###############################*/
/*Hasnode More Drop Down Edits: */
.dark div[data-id="hashnode-more-dropdown"]{ /*Adds a shadow to the Hashnode More Dropdown when not logged in*/
-webkit-box-shadow: 0px 0px 16px 5px rgba(0,0,0,0.3);
box-shadow: 0px 0px 16px 5px rgba(0,0,0,0.3);
border-radius: 15px;
background-color: #1b1b1b !important;
}
div[data-id="hashnode-more-dropdown"] div:first-child div:first-child div:nth-child(2) a[href="https://hashnode.com"]{ /* Changes the Color of the Button inside the Hashnode More Dropdown*/
background-color:#ff224e;
border-color: #ff224e;
color: #ffffff;
}