How to trace source of open <div> in Joomla template

Question

I really hope you can help me! I'm building a site as a favour to a charity (I am only a beginner with Joomla. I'm alright with html and css but crap with php).

My problem is on a category blog page. There is an open div in the first item so the column for the next item is appearing inside that column and so on, so each column is smaller and smaller and further to the left. I can find the problem line when I inspect the element and view the page source, but I cannot figure out how to fix it in my template files.

The page is here. This is just my dev site on my own domain. You can see the cats are all to the left instead of columns and if you inspect it you can see the columns fitted inside each other. FF and Chrome display it slightly differently, but both have the problem.

The line in the page source is 254. That background-color div should be closed on the next line, but it's not. I have enough experience with Joomla to figure out how to move things and change colors and stuff, but I really don't understand where this div would be created and therefore where I go to add the closing tag. This template has given me some grief - it's not well written, but other than this I've managed to sort it. If you can give me some advice about where to look, or how to trace the code back, or if some kind soul is willing to work with me to sort it out I would be much obliged. Thank you!

Answer 1

The Category Blog view is (by default) generated by the files components\com_content\views\category\tmpl\blog.php (layout for the blog page) and components\com_content\views\category\tmpl\blog_item.php (layout for each item on the blog page).

But your template almost certainly uses overrides in order to change the output. (Never edit any core Joomla files, always try to use overrides.)

I'm not sure if you're familiar with overrides, but basically it's a file within your template directory that is used for rendering instead of the core Joomla file. This is a very powerful function in Joomla, and you might want to read this introduction, and take a look at other posts tagged overrides on JSE.

So, back to your question. The code you're looking for is probably located in the file /templates/grab/html/com_content/category/blog.php or /templates/grab/html/com_content/category/blog_item.php. Edit the file as needed (add your closing </div>), save and reload your page.

Hope that helps, and welcome to Joomla StackExchange.