Customize WordPress Theme’s Through Inspect Element & Custom CSS Trick– For Novoice Users




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 and select ‘Inspect Element’ or Press ctrl+Shift+J keys.

Step 2 : It will open developer tools. It will be shown two parts, Site HTML Structure (Elements or Sections) & their CSS Rules (Element Style).

Step 3 : Now select the selective element class/id which you want to customize for more details see below image.

Step 4 : Copy the corresponding CSS.

In this example we want to change the background color of selected element. We’ll use below css rule which is shown in above image.

.icare-theme-bg-colored-darker3 {
   background-color: #d60035!important;
}

Step 5 : Now Go to your Dashboard Admin Panel >> Appearance >> Customize >> Additional .

Here put the CSS that we copied from developer tool’s CSS section and change the color according to your need finally save the changes.

Custom CSS
Custom CSS

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.

Have questions? Let us know in comments.


Share this post:


Comments 2
  1. Satyendra Sharma
    • July 1, 2019 at 3:12 pm

    I have also started WordPress from last month and I am looking for this kind of information. this is a great article for everyone. thank you so much for sharing this beautiful article with us. it is a very helpful and valuable post for us. God blessed you.

    1. WebHunt Infotech
      • September 30, 2019 at 9:21 am

      You are most welcome

Leave a Reply