Here’s a lot of way to customize WordPress Theme’s. One of the quite simple way is Inspect Element & Custom CSS Trick, without editing any theme files. Most probably you find a solution about customize your WordPress Theme without editing any theme files. There is also another way to customize your theme using style.css file, child-theme, or any WordPress plugins. but for that you need to learn more about “Where to find style.css” file, “how to create a Child-Theme”, and which plugin is useful in that condition. So today we will discus very simple way “Customize WordPress Theme’s Through Inspect Element & Custom CSS Trick – For Novice Users”.
Selection the desire element which you want to customize :
It’s a very important thing to isolate the part which you want customize or edit. just like a post heading, post content etc. but before doing anything one question come’s in our mind what is the right CSS and its attribute. So we need to determine the exact CSS Rules for the selected elements. Every element have its own identity just like a class or id. for example : a person have their own identity name, surname etc. so we can differentiate the person. Similarly a website have different-2 sections & elements with their own unique identification like class or id.
Now you think how to differentiate the element and determine right CSS So that you can make the appropriate changes to it.
Follow the step by step procedure to Customize WordPress Theme’s Through Inspect Element & Custom CSS Trick :-
Step 1 : First of all visit your site and right click on the isolated part which you want to customize/edit.
Step 2 : Select “Inspects Element”. See below image:
Step 3 : Now “Customize & Control DevTools” bar will be opened. It will be shown two parts, Site HTML Structure (Elements or Sections) & their CSS Rules (Element Style).
Step 4 : Now select the selective element class/id which you want to customize for more details follow below image.
Step 5 : Now copy the class attributes like this : (Show in above image)
For Example :
Step 6 : Now Go to your Dashboard Admin Panel >> Appearance Menu >> Customize >> Additional CSS.
Here put here above CSS rules into “Additional CSS Editor” & save the changes. See below image for
more detail :-
Similarly you can edit other element styling like font-size, font-style, color, background color etc. I hope this tutorial is helpful to Customize WordPress Theme’s Through Inspect Element & Custom CSS Trick. further we will discus way of Adding Custom CSS in more style.