Use Inspect Element to permanently edit site`s CSS

1

New guy here…
Im editing my Wordpress sites CSS using Inspect Element and adding the edited CSS to “Addition CSS” in the (child) theme editor. Everything has been OK so far with the other CSS edits.

But I cant seem to figure out why the new CSS for the text field border radius isnt taking. : /

I copied / pasted the highlighted style in the screenshot and edited the radius in Additional CSS. Same process pages` elements and styles.

/* START edit subscribe form /
#elementor-27099 .elementor-element.elementor-element-494fb5f4 .elementor-field:not(.elementor-select-wrapper) {
background-color: #ffffff;
border-color: #c9c9c9;
border-width: 0px 0px 0px 0px;
border-radius: 8px 8px 8px 8px!important;
}
/ END edit subscribe form */

Could someone explain what Im doing wrong or what I need to select in the Inspect Element Style window to get this done? Obviously what Im selecting is wrong. (purged cache and refreshed :slight_smile:

I`m doing something fundamentally wrong…

(also I havent found one yet but if theres a video of how to read the Style section of Inspect Element and undersand what elements and their CSS to select and would be very helpful. But NOT temporarily / on the fly edits, actual permanent changes to the site, that would be a big help too).

Thank you.

Inspect Element Screenshop
Inspect Element Screenshop1239×446 118 KB

2

Hey TokyoJohn,

As a general statement, when you have WordPress website content built using one of the page builders like Elementor, or WPBakery’s Visual Composer, or Beaver Builder, it causes issues when you use the “built in” classes generated by the builder for the CSS selector.

Like -
#elementor-27099 .elementor-element.elementor-element-494fb5f4

I think you can solve your problem by adding your own ID or class to that section of code, and then use that instead for the CSS selector. Take a look at this linked page to see how to do that.

**https://themes.artbees.net/docs/assigning-an-id-or-class-to-an-element-in-elementor/

3

You can’t permanently change a website using Inspect Element. The code for your website is on a server. Your browser gets sent the information to display it. You are making changes to the copy that got sent to your browser, not the actual website.

4

Rick,
Thank you very much.
I hadn`t considered replacing the classes with my own. But thinking about it now, it makes perfect sense. Thanks for the tip. Never done but a good thing to learn. Also the video is a help too. Much appreciated.