Docusaurus: How do I customize blog styles？

[liushooter]

I want to change docusaurus-v2 blog title style,
find this information in @docusaurus/theme-classic/src/theme/BlogPostItem/styles.module.css :

.blogPostTitle {
  font-size: 3rem;
}

I change src/css/custom.css following，no effect :

.blogPostTitle {
  font-size: 1rem;
}

Help me，How do I customize blog styles？

[liushooter]

yeah, i find this https://stackoverflow.com/a/58519684

yarn swizzle @docusaurus/theme-classic BlogListPage
yarn swizzle @docusaurus/theme-classic BlogPostItem
yarn swizzle @docusaurus/theme-classic BlogPostPage
yarn swizzle @docusaurus/theme-classic BlogTagsListPage
yarn swizzle @docusaurus/theme-classic BlogTagsPostsPage

yarn swizzle @docusaurus/theme-classic CodeBlock

[fakela]

@liushooter I had similar issue too, this does not have any effect because it's not properly referenced. It's actually best to style the blog using the styles.module.css and use this src/css/custom.css for styles you want to be available globally. This is what I figured out when trying to style my blog

@yangshun should be able to give a more detailed explanation

[KohheePeace]

@fakela

1. Run the below command in terminal to swizzle default theme

yarn swizzle @docusaurus/theme-classic BlogPostItem

It generates src/theme/BlogPostItem in your website.

You can overwrite your custom style in src/theme/BlogPostItem/styles.module.css

Sorry if this is different answer what you want!

[fakela]

@KohheePeace thank you alot for this
I used a different approach
I had to copy the files and paste them in my website

This is a lot easier . Thanks

[rafaelrdealmeida]

Hi,

I'm trying to change the blog layout. But I am not finding the place to customize the layout. Can you indicate that?

the current layout is this:

---

I'm trying to alteral to:

---

[slorber]

hi @rafaelrdealmeida , all the blog components are in the classic theme

The one displayed in your screenshot looks like the BlogPostList component, that you can swizzle

[zRains]

npm version:

npm run swizzle @docusaurus/theme-classic [component] -- --danger