How to Add Custom CSS in Magento 2 Blog?

Readers pay attention to your blog's design before they even read the content. Thus, you need to focus on making it straightforward and easy to browse through.

Even though the Magento 2 Blog extension inherits your theme's styles, you may need to change some things, e.g. link colours, font size, font styles, etc. In most cases, this requires deep code editing. But there is an easier way.

You can add custom CSS in the Magento 2 blog right in the admin panel. No tedious code digging is required.

Let's, for example, see how we can change the colour of the blog post title.

Blog post title

To add custom CSS in Magento 2 Blog:

1. Navigate to Stores > Configuration > Magefan Extensions > Blog > Developer > CSS Settings.

2. Choose Yes to include blog CSS on all pages and add your Custom CSS code in the corresponding field.

Add custom css code

Note: if you don't want the CSS to be applied to all pages, select No in the Include Blog On All Pages field. Then specify pages to apply the blog CSS on.

Once the custom CSS is added, Save your configuration and check the results on the storefront.

Blog custom css

In this example, we changed the colour of the title. But you can do much more than that and adjust the look of your blog as needed. With the handy Custom CSS functionality you have plenty of options.

Together with that, don't forget about other design aspects like layouts and templates to make your blog flawless.