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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

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
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.