How to modify HTML layout inside a View template

Question

I am very new to Drupal and this is my first post in this community. What I am trying to achieve I know may be very simple but just don't know how! So I am looking forward for expert help.

First please see the screenshot:

Below is what I want to achieve:

1. WHITE boxes are laid out as float: left;

2. I want A, B and C to shift below their respective titles, i.e. at A1, B1 and C1 spots respectively.

3. I want to make the TITLE + A1 to be under the same container so the container can float left itself. Same with TITLE + B1 and TITLE + C1

I copied views-view-unformatted.tpl.php file to my custom theme folder. The code snippet is rendering the data fine:

<?php foreach ($rows as $id => $row): ?> <div<?php if ($classes_array[$id]) { print ' class="' . $classes_array[$id] .'"'; } ?>> <?php print $row ?> </div> <?php endforeach; ?>

But I want each of the field in $row to be printed in a way I want, e.g.:

<?php foreach ($rows as $id => $row): ?> <div<?php if ($classes_array[$id]) { print ' class="' . $classes_array[$id] .'"'; } ?>> <div class="image-class"><img src="" /></div> <div class="text-class"> <?php print $row->title ?><br /> <?php print $row->body ?> </div> </div> <?php endforeach; ?>

I believe there is a way to do it but don't know how. $row->title or $row->body is actually printing (rendering) nothing.

Also, if I modify views-view-unformatted-tpl.php it will affect the entire site. So I want a separate view for this purpose. How to do this?

Answer 1

views-view-fields--[view-name]--machine name.tpl.php

Ex: views-view-fields--hello-world--block-1.tpl.php

<div class="picture">
  <?php print $fields["field_image"]->content; ?>
</div>

<div class="text-wrapper">

  <div class="title">
     <?php print $fields["title"]->content; ?>
  </div>

  <div class="small-summary">
     <?php print $fields["body-summary"]->content; // if you r using a body summary ?> 
     <?php // if you are using an actual field then use:  print $fields["field_name"]->content; ?>
  </div>

</div>

CSS

.picture { float: left; }