Add and manage custom CSS to your Blog
Add custom scripts to your blog
You can personalize your blog's look by adding custom CSS. Here are the key classes you can target:
Blog-Specific Classes
mainpage-header: div that contains heading and description for homepage
mainpage-header-title: home page heading
mainpage-header-description: home page description
post-grid-container- grid container for blog posts in main page. Default is 3 columns, 1 in smaller screen
featured-blog-img- for featured blog img
featured-blog-info- for featured blog title, description and info
blog-navbar: customize navbar background
blog-featured-background- featured blogs background(Defaults to blog background)
blog-background: Controls the background for all blog pages
blog-item: Styles individual blog post entries or containers
blog-img-aspect- define aspect ratio of images of blog posts
blog-item-title
blog-item-description
blog-item-footer
blog-tags-group: Affects the container for all tags
blog-tag: Styles individual tags
tags-filter-group: the tag filter container(Default flex row)
tags-filter: Individual tags filter.
blog-img: Targets blog post images
blog-cta-container: Styles the call-to-action container in blog posts
blog-embed-cta: styles the embedded cta container
featured-blog-header- for the featured posts header
blog-header-image- for blog page header
Text Styling
.h1
.h2
.h3
.h4
These classes control font size, color, weight, and other text properties for different heading levels. You can choose their font from your settings > design page.
For a deeper customisation, like font weight, size, color you can use custom css.
Page Layout for Blog page
.notion: Controls overall page width and header height
.notion-page: Affects page padding and line height
Content Elements
.notion-text: Styling for regular text blocks
.notion-asset-caption: Image captions
.notion-asset-wrapper: Image and video containers
.notion-gallery-grid: Gallery layout (e.g., for blog post listings)
.notion-collection-card: Individual cards in galleries
Navigation
.notion-header: Styling for the top navigation bar
Background
blog-background: Controls the background for all pages
Responsive Design
There are media queries for different screen sizes (e.g.,
@media only screen and (max-width: 720px)). You can add your own to customize the responsive behavior.To apply custom styles, add your CSS targeting these classes. For example:
Dark Mode
If you have enabled dark mode, make sure to use the className
.dark-mode with these classes.Did this answer your question?
