#INSPECT ELEMENT HOW TO#
#INSPECT ELEMENT CODE#

Many of the users in the support forum request design tweaks for various screen sizes like mobile devices, tablets etc.

And this might create new issues so, the users are suggested to use it wisely.

#INSPECT ELEMENT CODE#

So, the priority of your custom CSS can be set highest by adding !important at the end of you code as done below.Īdding the ‘!important’ rule to your code, sets the priority to the highest, overriding all other CSS properties.

There is a predefined priority hierarchy of the CSS codes, although the CSS implemented through the Additional CSS box has higher priority then that of theme style.css, there are certain cases where the priority is inadequate and fails to accomplish its motive, means the code doesn’t work. So, below is the sample code for hiding an element. Since majority of queries requesting the custom CSS is to hide some element that the user no longer wants in his/her site.

#INSPECT ELEMENT HOW TO#

The additional classes or IDs can be copied from the elements wrapping the desired element and one thing to remember here is that before the class a (.) dot needs to be added and a (#) hash before the ID.Īt last after you have got your desired CSS code you can copy and paste it in: Appearance -> Customize -> Additional CSSĪnd then hit save to view the permanent changes.īelow is a GIF showing an example on how to create your own custom CSS and apply it through Additional CSS. the HTML class/ID generated by clicking the ‘+’ icon may be not be precise enough to target the desired element so you may need to add the additional classes or IDs before the generated class or ID.

And if you want to provide completely new styling to the selected HTML element then you can click on the ‘+’ icon on the CSS section and then you can write the desired CSS inside the generated target class / ID.

You can see the changes in your website as you change the values ( CSS codes ). If you have selected the desired HTML element then most probably its styling (CSS) can be seen on the right side, now if you want to change the existing style then you can just change the values as desired.Now, docked at the bottom, you will see the HTML of the site and to the right of it you can see the CSS related to the selected HTML element( classes and IDs ).First in your site hover over the element for which you want to write the CSS, right click on it and then click on Inspect Element.So lets move along with doing the same by following the steps below: The sole purpose of this article is to help our users who have the required knowledge and are interested to write the code for themselves. Custom CSS can be added in your WP site through different methods but what can be easier than pasting the code in a box( Additional CSS ) provided by the WordPress itself, since Version 4.7.Ĭreating a custom CSS code is quite straight forward, if you are familiar with the basics of HTML and CSS.

Most of the user queries that we receive, either in the forum or via mail are related to simple design tweaks like changing the color, font-size which requires custom CSS. Creating your own custom CSS via Inspect Element

Inspect element