VirtueMart Forum

VirtueMart 2 + 3 + 4 => Templating & Layouts => Topic started by: ahtaylor1 on March 18, 2014, 23:50:54 PM

Title: Firebug - CSS and HTML
Post by: ahtaylor1 on March 18, 2014, 23:50:54 PM
I use firebug to locate any styles which require changing and find it really helpful but my question is this


I work my way through the HTML (Left pane) to locate the styles in my page - but how do I know where the HTML is located?

Reason for the question is that when I edit the html in firebug I finally achieve how I wanted my page to look (i was changing the layout of my product details page).  But how do I find the relevant file to make my changes in permanently - not just in firebug!!!  FIrebug tells you which file the css is in but where is the file with the html in?

Hope this question makes sense!
Title: Re: Firebug - CSS and HTML
Post by: jenkinhill on March 19, 2014, 09:38:47 AM
The HTML is generated by the template/view files. eg for product details the files are in components/com_virtuemart/views/productdetails/tmpl/  Use any edited files as overrides.

http://docs.virtuemart.net/tutorials/33-templating-layouts.html and http://www.ostraining.com/blog/joomla/overrides
Title: Re: Firebug - CSS and HTML
Post by: ahtaylor1 on March 19, 2014, 15:16:29 PM
Thanks for the info.

I was hoping there was another way of editing the HTML as you had already given me the details of the files in a previous post.

It is not that easy then to just move around the HTML which is what I was able to do when I edited my homepage - VM obviously not that straight forward!

When I look at the default.php file in the tmpl folder I dont see any HTML - just PHP.  How would I change the layout using this file?  Is it simply a matter of moving a block of PHP to a different place in order to change the look.  Sorry for the very basic questions but I am not sure how to edit the file to get the changes I want.

Thanks


Title: Re: Firebug - CSS and HTML
Post by: jenkinhill on March 19, 2014, 18:25:35 PM
No it is not a simple case of moving blocks. If you don't understand the code you would be advised to get a developer to make the changes for you.

But I looked back over your previous messages and it sounds like you are already using a non-default layout. Maybe a commercial VM template or VM theme? If so then you are already using template overrides, and it is those you need to edit.
I have attached an image of the default product details layout, this is from VM2.5.4 but is the same default layout as used in earlier versions.

[attachment cleanup by admin]