How to find the source of CSS

I’m using a Wordpress plugin WP-invoice. This is a great plugin that generates a smart looking invoice on the front end. The container for the logo is constrained to 90px wide which is way too small.
http://staging.gordon.server271.com/accounts-department-1007-am/?invoice_id=b69998286c906c0af2fbe13ce9bfda9c
I see when I inspect the code with Chrome developer tools that the CSS appears to be dynamically generated. Element style to me is code for

Nobody knows where to find this CSS

Does anyone know how I can identify how this Element Style is generated? :banghead:


Any help appreciated.

Have you got an example of it somewhere?

http://staging.gordon.server271.com/accounts-department-1007-am/?invoice_id=b69998286c906c0af2fbe13ce9bfda9c

A search through wp-invoice’s github tells me that the particular line you have highlighted would appear to be in one of the following locations, all hard-coded in:
static/views/client-dashboard.php line 60
static/views/unified-invoice-page-active.php lines 65 and 135,
static/views/unified-invoice-page-paid.php lines 65 and 129,
static/views/unified-invoice-page-refund.php lines 65 and 128.

I cant actually access the link you gave because it requires a login, but based on the URL structure, you’re looking at one of the three last files, depending on the invoice’s status.

1 Like

Thanks M_hutley,
You’re right, I found the code, and I’m guessing that the relevant file is:
static/views/unified-invoice-page-active.php lines 65 and 135
I edited lines 65 and 135 to take 190px instead of 90px

<div class="logo"><img style="max-width: 190px;" src="<?php echo $logo_url; ?>" alt="Logo" /></div>

Didn’t work unfortunately.

Looking again;

Based on context clues, the key line would be line 135. (See right above the line you highlighted, you’re in a section classed “col-sm-8” ? that’s the context clue that identifies it.)

Try modifying active, paid, and refund on lines 135,129, and 128.

When you say Didnt work… does the number change when you look at the code again? or are you still seeing the 90px?

Also, do make sure you’re not accidentally catching a cached version of the page.

I’m working locally and the changes don’t appear to be sticking despite emptying cache and see how it goes editing on the server.

BTW Does Sitepoint force you to login and then stick an ad in your face every time you try to reply?

mmh nope, Sitepoint never signs me out.

I… cant explain why changes to the code wouldnt stick… are you… editing with a notepad program? With the Wordpress Plugin Editor? or…?

Edited live server files and nope, it’s not having it. Emptied cache, quit and… nothing.
Just checked the files on the server and yes my edits are saved - all files changed from 90px to 190px on the relevant lines and …crickets.

RESOLVED: m_hutley, thanks for your time.
The file static/views/unified-invoice-page-active.php you correctly identified resides in another place. I found it also in the wpi (WP-invoice) folder within my uploads folder, I changed the 90px value to 190px there and the logo now renders at the correct size.
Maybe a copy is placed in the child-theme/uploads/wpi folder to prevent overwriting when the theme is updated?

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.