0

So I'm a bit lost. There are so many places to tuck away custom css between the WordPress customizer and Elementor Pro, and I added some css to style a couple little recurring anchor tags in a file sharing list, but now I can't remember where I put it and can't find it. I have looked in every place I can think of.

I know now that I can put all of my additional css in the theme file (I created a child theme for that reason) but that doesn't help me now to find that one darn line of code to edit it.

I did use the page source and found the css I added but where is the source file located so I can edit it?

I am completely self taught through various resources and prerecorded classes online so I don't know what I don't know. I am pretty good with working in WordPress but I am new to editing the file itself rather than using custom code on individual pages via a plugin.

1 Answer 1

0

You can use the Developer Inspector (usually F9 in your browser) to bring up the page data. Right click where you see the CSS being used, and use the developer panel to click on the CSS code (you should be on the Inspector tab).

Over in the right side of that developer area you should see the various CSS styles. And to the right of that, the Computed CSS.

Click on one of the items in the Computed area. You should see the file and line number where that value came from. Example below. See the CSS for the 'border-top-right-radius' came from 'stacks.css' in line 8.

Sample screen shot of developer area

The screenshot is from the FireFox Developer screens. There are many tutorials on how to use this that you can find on the googles/bings/ducks.

3
  • Yes, and when I use the inspector, it links to a <style> element found within the html. Now what? Feb 16, 2023 at 16:28
  • I assume you are referencing something like <div style="color:red;">. That is hard coded in the theme code, probably the template that is being used. That will require a manual search of the theme files (I'd start with the templates) and maybe the functions or javascript files. Manually searching is your next step, and beyond the scope of this place. Contact your theme support. Also possible is a plugin, which would be your next step if you don't find it in the theme files. Feb 16, 2023 at 18:27
  • Thank you, @Rick! I appreciate you taking the time to answer. Although I didn't find the offending code (lol), by deleting and re-inserting the shortcode affected in Elementor, the css "magically" disappeared wink. Your answer did help me learn a lot about the searching source code though! Feb 16, 2023 at 18:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.