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:
![](https://i0.wp.com/clay-atlas.com/wp-content/uploads/2021/03/image-53.png?resize=370%2C76&ssl=1)
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:
![](https://i0.wp.com/clay-atlas.com/wp-content/uploads/2021/03/image-54.png?resize=1024%2C102&ssl=1)
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:
![](https://i0.wp.com/clay-atlas.com/wp-content/uploads/2021/03/image-55.png?resize=603%2C92&ssl=1)
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
![](https://i1.wp.com/clay-atlas.com/wp-content/uploads/2021/03/image-30.png?resize=320%2C432&ssl=1)
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:
![](https://i0.wp.com/clay-atlas.com/wp-content/uploads/2021/03/image-56.png?resize=496%2C76&ssl=1)
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/