HWD HTML Overrides
The HWD Component was built from the ground up with template developers in mind. We created the component to be MVC so that the component views could easily be customized to suit the users needs.
We are going to use a simple example to explain how to do html overrides for the HWD component. In the image below we are using Google Chrome and the built in code inspector. We want to change the Media Item title in the Media Details view. We've inspected the title and can see that it's a <h2> tag with a class of contentheading. This will help us find a recognizable element to search for when we begin editing the code for the override.
To create the override we will first need to copy the media details view file. Using FTP we are going to first locate the file we want to customize. For the Media Details list we will go to www.yoursite.com/components/com_hwdmediashare/views/media/tmpl/ and locate the file called default_details.php. You'll need to copy this file into a directory located in the /html/ folder of your template. In our case it's www.yoursite.com/templates/beez_20/html/com_hwdmediashare/media/ and we will edit this file.
Now that we are editing this file we need to search for the class we discovered previously. You'll search for the class contentheading. Once you've found it we will do a simple change making the title a <h3> tag. Make sure you change the </h2> to </h3> to ensure that the H3 tag has been closed. Save the file.
If we go back and inspect our code again you can see that the titles have changed to <h3> now and the appearance is different. Below is an example of this.
This is very powerful for template developers and users because now you can make HWD look exactly how you envision it. Change the output to work for your site and for your own SEO purposes.
