Help resizing divs. How do I know which file to edit?

This is not a question about PHP code so much as a question about PHP theory.
I’m beginning to use complex PHP-based themes for a Joomla website. On other sites, I’ve always been able to resize a div by simply finding its class or ID and adding some CSS to modify it. This time however, it seems I need to edit the actual HTML that is produced by the PHP, and I just can’t figure it out. I fundamentally don’t understand where and how the divs are created in a complex theme like this. I’m using the ST-Magazine theme, and I’m trying to make the div called “avatar-pos-top-left” wider. (Apparently, I can’t post links. But search Google for “demo st-magazine theme joomla”, first link, then click “Live Demo”). In chrome, it says the width is defined in “index”, and in Firefox it says “inline”.
Help? Can someone explain the basic theory of where that div comes from?

I ended up connecting to my site with FTP and blindly looking into all the PHP files I could find. Most were empty, but one referenced a default.php, which I eventually found, and it had the code I needed to edit. But again, I found it more of less by accident. Any advice going forward? Should I always start with the index.php highest up in the directory tree? Is there a tool I can use to make tracking down the right file easier?

You could always do “Right-click -> Inspect Element” on the div when displaying it, and then find where the css is referenced.
It should be written like “global.css” above the actual css written

Right, that’s what I’ve been doing. Works fine for CSS, but for HTML it just says “index”, and the code i wanted was not actually in index.html or index.php, it was in a different PHP file referenced within index.php. I basically had to randomly check PHP files until I found the one I really wanted and didn’t know if there was some info within the browser-based console I was missing, or if there was a better tool or just a technique about reading the code that I hadn’t figured out yet.

There isn’t a software that I know of (you could try eclipse, but I’m not sure if that would do it)
Maybe just try following the code shown. If it says index.php:32 it’s on line 32. Just follow the code from there

It’s not though! That’s why I’m so confused.

It says it’s in index.php (the one in the root of my file structure), line 96. But that file only contains 40 lines. The REAL code that defined the width of that element was on line 142 of the file /templates/st_magazine/core/layouts/default.php…

and that info doesn’t show up anywhere in the web inspector of Chrome or Firefox :\

Sponsor our Newsletter | Privacy Policy | Terms of Service