Drupal 7 customize view theme

Question

I have the HTML as below:

        <div class="top-grids">
        <div class="container">
            <div class="col-md-4 top-grid text-center">
                <div class="top-grid-pic">
                    <img src="images/pic01.png" title="Boots" />
                    <span>Boots</span>
                </div>
                <div class="top-grid-pic-info">
                    <a href="single-page.html">Seeall</a>
                </div>
            </div>
            <div class="col-md-4 top-grid text-center">
                <div class="top-grid-pic">
                    <img src="images/pic02.png" title="Boots" />
                    <span>Casual</span>
                </div>
                <div class="top-grid-pic-info">
                    <a href="single-page.html">Seeall</a>
                </div>
            </div>
            <div class="col-md-4 top-grid text-center">
                <div class="top-grid-pic">
                    <img src="images/pic03.png" title="Boots" />
                    <span>Formal</span>
                </div>
                <div class="top-grid-pic-info">
                    <a href="single-page.html">Seeall</a>
                </div>
            </div>
            <div class="clearfix"> </div>
        </div>
    </div>

In Drupal 7, I have created a view (block) and named it "Featured Products". I have added two fields - image and title. Please check the attached screen shot.

After doing the same, I have created a view file named "views-view-field--new-uc-products--block.tpl.php" and write the code as below:

<div class="top-grids">
        <div class="container">
                <?php print $output; ?>

        </div>

and place this under the 'templates' folder.

Now I see the drupal site and the View Source file which contains the below HTML structure:

 <div class="view-content">
      <table class="views-table cols-0" >
       <tbody>
          <tr class="odd views-row-first">
                  <td >
            
<div class="top-grids">
			<div class="container">
					<div class="col-md-4 top-grid text-center">
<div class="top-grid-pic"><div class="product-image"><div class="main-product-image"><a href="http://localhost/uberdrupal/sites/default/files/styles/uc_product_full/public/515sRCSoS9L._SX331_BO1%2C204%2C203%2C200_.jpg?itok=lji5BBNF" title=""><img typeof="foaf:Image" src="http://localhost/uberdrupal/sites/default/files/styles/uc_product/public/515sRCSoS9L._SX331_BO1%2C204%2C203%2C200_.jpg?itok=4Exqjiv3" alt="" title="" /></a></div></div>
								</div>
</div>

          </td>
                  <td class="views-field views-field-title" >
            
<div class="top-grids">
			<div class="container">
					<span>Twisted</span>
					</div>
					<div class="top-grid-pic-info">
						<a href="single-page.html">See All</a>
					</div>
				</div>								</div>
</div>

Can Someone tell me how can I customize the view template so that it can show the HTML as I desired?

Thanks

Ardit Meti Ardit Meti · Accepted Answer · 2015-09-28T15:09:06

Go to admin/structure/views/settings and have these settings

Then go to your view and under Advanced, you will have Theme:Information. Click it and you will be shown a list of tpl files that you can change the html as you wish.

Drupal 7 customize view theme

1 Answers