Last Updated on 2021-10-18 by Clay
If we are not satisfied with the style of a certain widget in WordPress, we can add the additional CSS code to adjust the component style.
In this article, let's take code block as an example.
Why do I modify the code style? This is because I changed the website theme to Neve not long ago. In this theme, the default style of code block is:
that's so cool, but as the background of the code, I personally feel a bit strange.
My ideal embedded code block in the article should looks like G. T. Wang's Blog:
So how should we change it?
Customize CSS style
No matter any component you want to customize, the steps are the same.
- Find the component class
- Go to backend > Appearance > Customize > Additional CSS
Find the component class
Assume what we are looking for is the code of print("Hello World!"), we can open the source code of the webpage in the browser and search for this code:
We can find that the code is surrounded by a format like <code>***</code>, so we can modify the <code> class.
Modify the component style in Additional CSS
code {
border-color: rgb(220,220,220);
border-radius: 7px;
background: rgb(245,245,245);
padding: 1.8px;
padding-left: 5px;
padding-right: 5px;
}
Output:
And what should be modified and what CSS syntax should be used? At this point, I think it's just trying and checking. After all, I haven't actually seen it, and it's difficult to adjust the style I liked just based on my imagination.
References
- https://themeisle.com/blog/css-in-wordpress/
- https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/