Let’s say you would like to modify the appearance of your website, or some elements of it, such as the Chatbot added by my AI Engine plugin. This is possible, and actually not very complicated!
First, understand how CSS works
First, you’ll need to understand how CSS works, and its syntax. Trust me, it absolute worth it to learn it, as you will definitely want to use this skill many times in the future. The best way to start is by reading this wonderful tutorial by Mozilla: What is CSS.
Play with CSS in realtime with your site
Now that you know how to write a bit of CSS, you need to find the selectors, or the elements that you want your CSS to be applied to. I recommend using Google Chrome, with the Developers Tools. I recommend this tutorial: View and change CSS with Google Chrome.
You’ll be able to select parts of your site in realtime, and apply/overwrite CSS for testing purposes.
Apply the CSS permanently
There are many ways to do this. I recommend using the theme’s customize feature, as it will make it dependent of the currently selected theme. But I’ll also add a way to do it with a plugin.
Traditional Theme
It’s very simple. This is located under Appearance > Customize in your WordPress Admin.
FSE Theme (aka Block Theme)
They work a bit differently from the traditional themes, and somehow they have hidden the Customize link. However, that feature is still available. You can access it by typing this URL directly: https://mywebsite.com/wp-admin/customize.php. Yes, this is the secret URL of the customizer!
Using Simple CSS
Download it on the WordPress Repository: Simple Custom CSS. This is fairly easy, and you will simply need to drop your CSS in it.
There are two kinds of theme currently: the non-FSE themes and the FSE themes.