How to write CSS after inspecting the element in browser developer tool?

  • I made changes in an element using the browser development tool, and they displayed accurately in the browser. How do I write the CSS to add the change to my site? I am using WordPress 2022 theme.

    Thank you.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Theme Author presscustomizr

    (@nikeo)

    Slightly confused by your question, but if you’re asking where you can insert the CSS to have it reflected on your site, you have two options.
    One option is to add it to the child theme.
    However, the preferable option is to go customizer > advanced options > additional CSS.

    If you’re trying to learn how to write CSS, that’s outside the scope of the support here, but we do have a documentation page that provides some basics:
    https://docs.presscustomizr.com/article/72-basics-of-css-and-html-for-wordpress-themes

    Thread Starter jord

    (@jordia)

    Hello @nikeo,

    I appreciate your very prompt response. One example of what I tried to do is to change the default hamburger icon in WP 2022 theme from 2 to 3 bars without a plugin. In the browser inspector I modified the SVG as follows, and it worked in the open browser.

    <svg viewBox=”0 0 100 80″ width=”40″ height=”40″>
    <rect width=”100″ height=”20″></rect>
    <rect y=”30″ width=”100″ height=”20″></rect>
    <rect y=”60″ width=”100″ height=”20″></rect>
    </svg>

    My question is how do I make the permanent change to my site WITHOUT A PLUGIN?

    Thank you.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to write CSS after inspecting the element in browser developer tool?’ is closed to new replies.

Tags