Find correct CSS file location by Inspecting

Hello,

I'm inspecting my website trying to find the css file location to edit some css rules, but I couldn't, all I can see is that the css file is loaded from assets/cache ... any better idea? I'm using firefox
thebest8Asked:
Who is Participating?
 
Julian HansenCommented:
That style is being added by script
If you look in the file https://varpix.com/modules/appagebuilder/js/script.js on line 505
You find this code
$(".has-bg.bg-fullwidth").each(function(){
        id = "#"+$(this).attr("id");
        bg = $(this).data("bg");
        $(id + ":before").addRule({
            background: bg
        });
    });

Open in new window

This is finding all the elements with classes .has-bg that also has a class bg-fullwidth and it is adding the style dynamically.
0
 
Leonidas DosasCommented:
Check this link (firefox examine and css).It describes how you can use firefox developer tools.
0
 
thebest8Author Commented:
I see but as I said, my css rules are loaded from the cache, I need to know the original css file so I can locate it
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Julian HansenCommented:
assets/cache refers to the location on disk where your file was loaded from.

When you inspect an element the CSS rules should appear in the right panel of the Inspector tab.

Next to each rule on the right is the name of the file that rule is contained in.

To view the file right click the link and select Copy Location.

Paste the location into a new window - you should see your stylesheet.

To find the original (server based) css file look at the URL to see what path the CSS file is loaded on.
0
 
thebest8Author Commented:
I have disabled the cache, the thing is, the rule I need to change shows as inline and I searched all the files and can't find it....
0
 
Julian HansenCommented:
Inline means it is in the main (index) file.
If you do a view source on the page and then search that for the style do you see it?
0
 
thebest8Author Commented:
I see this in the source code:

 
<div id="form_2343332992083847"        class="row header-menu no-margin ApRow  has-bg bg-fullwidth"
	        data-bg=" #303136 no-repeat"                style=""        >

Open in new window


In Firefox inspection tool, I see these rules

#form_2343332992083847::before {
    background: rgb(48, 49, 54) none no-repeat scroll 0% 0%;
        background-color: rgb(48, 49, 54);
        background-image: none;
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-clip: border-box;
        background-origin: padding-box;
        background-position-x: 0%;
        background-position-y: 0%;
        background-size: auto auto;
}

Open in new window



I'm using prestashop 1.7.2.4
0
 
Julian HansenCommented:
In the source look for the string '#form_2343332992083847'
0
 
Julian HansenCommented:
Do you not have a link to this page we can look at?
0
 
thebest8Author Commented:
0
 
thebest8Author Commented:
Mr Julian, thank you, I was able to solve the issue, there was an option in the backoffice that allow me to edit the background color but I didn't notice it but thank you very much for your efforts
0
 
Julian HansenCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.