Customise Drupal View Output

Question

Quite new to Drupal theming and need some help editing the markup a view outputs.

I know I have page templates, node templates, block templates; but what about views?! I choose the fields that are displayed in the results using views UI but that doesn't let me customise the outputted markup I want.

So for example, instead of this:

<div class="band propertysearch-results">
  <section class="layout">
    <ul>
      <li>
        <div><img src="" alt=""></div>
        <div>
      <h3>Location Name</h3>
      <small>123 Leather Lane, London, NW1 123</small>
      <p>oremque ad laborum et reiciendis eos quasi odit!</p>
    </div>
    <div class="results-info">
      <a href="#">3 <span>Rooms</span></a>
      <a href="property.html">View</a>
      <a href="#">Save</a>
    </div>
  </li>
</ul>

Drupal is giving me:

<div class="view viewproerties">
  <div class="view-content">
    <ul data-thmr="thmr_46">
      <li class="">  
        <div class="views-field views-field-field-photo" data-thmr="thmr_43">    
          <div class="field-content">
            <img typeof="foaf:Image" src="http://findabode.d7/sites/default/files/mvenue1.jpg" alt="" data-thmr="thmr_16 thmr_17 thmr_18">
          </div>  
        </div>  
        <div class="views-field views-field-title" data-thmr="thmr_43">        
          <span class="field-content"><a href="/content/leather-lane" data-thmr="thmr_19 thmr_20">Leather Lane</a></span>  
        </div>  
        <div class="views-field views-field-body" data-thmr="thmr_43">        
          <div class="field-content"></div>  
        </div>  
        <div class="views-field views-field-field-rooms-1" data-thmr="thmr_43">    
          <span class="views-label views-label-field-rooms-1">Rooms: </span>    <div class="field-content"><span data-thmr="thmr_22" class="devel-themer-wrapper">2</span></div> 
        </div>  
        <div class="views-field views-field-view-node" data-thmr="thmr_43">        
          <span class="field-content"><a href="/content/leather-lane" data-thmr="thmr_23 thmr_24">view</a></span> 
        </div>
      </li>
    </ul>
  </div>
</div>

So my question is how to I customise the outputted markup and how do I figure out what the variables for each field is called?

Do I make these changes in a tpl file or somewhere else?

Nadeem Khan Nadeem Khan · Accepted Answer · 2014-04-20T19:22:02

Theming the output of views in Drupal is somewhat tricky, depending on the types of fields you have used and the kind of output style you have chosen to create the view.

You will need to learn about Views Templating in order to override the specific templates that your particular view is utilizing to render the output.

Customise Drupal View Output

3 Answers