How to find the source css code when dev tools does not specify a file name?

Question

I am making a website in wordpress and I'm using a paid template. The template comes with a bootstrap grid. The issue I have is editing some css code, because I can't find the source of the css codes.

As you can see on the screenshot, the media queries are located at grid-responsive.css. The code I want to edit is the css above it. I want to remove the padding-right: 30px !important; from .mpce-prvt-4661-5a018ae17a157:not(.mpce-dsbl-padding-right) and same for the left side.

But I can't find the css file and on the right side it doesn't tell me which file the source is. I searched in all the css files I have and couldn't find it. Someone having an idea how to locate it?

I know where grid-responsive.css is, it's about the css above it — idbruin
– idbruin, Commented Nov 16, 2017 at 8:47
My guess would be that it is dynamically generated from JS, so there is no CSS file to look in. — Quentin
– Quentin, Commented Nov 16, 2017 at 8:47
@idbruin: it seems to be a style inside <style></style> (generated by JS or included by any plugin?). Try to find string 30px !important in whole directory, you'll find where it's generated. — pavel
– pavel, Commented Nov 16, 2017 at 8:48
Press Ctrl-F and type .mpce-prvt-4661-5a018ae17a157 it'll be an inline style — Liam
– Liam, Commented Nov 16, 2017 at 8:49
Thanks @Liam , I found it that way. It is in a <style> with id='template-name'-private-styles. So what @sébastien-gicquel is saying is the answer — idbruin
– idbruin, Commented Nov 16, 2017 at 8:58

Sébastien Gicquel · Accepted Answer · 2017-11-16 08:56:10Z

3

You can write your CSS in an other file. Usually, paid templates offer the possibility to add your own custom CSS in admin or in a custom CSS file. Check your WordPress theme parameter or documentation.

This method is called "override". It means that you don’t modify original template (otherwise your modifications could be deleted when you update the template).

You just copy and modify the CSS you want to change.

original CSS file :

.test {
    color: red;
}

In custom.css :

.test {
    color: blue;
}

edited Nov 16, 2017 at 8:56

answered Nov 16, 2017 at 8:50

Sébastien Gicquel

4,4367 gold badges58 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sébastien Gicquel Over a year ago

@JohannesGrandy What do you mean ? I didn’t say that it had to be loaded async. custom.css has to be loaded after the original css file

DreamTeK · Accepted Answer · 2017-11-16 08:53:52Z

0

CSS references that do not show a source in the inspector are usually generated from sources that are not CSS.

The most common source for this is JavaScript.

The easiest solution would be to simply open the entire project in something like Visual Studio and search the whole project for the css string.

answered Nov 16, 2017 at 8:53

DreamTeK

34.6k30 gold badges127 silver badges180 bronze badges

1 Comment

Liam Over a year ago

The easiest solution would be to simply open the entire project in something like Visual Studio and search the whole project for the css string. or press Ctrl-F...

Collectives™ on Stack Overflow

How to find the source css code when dev tools does not specify a file name?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related