hello,

how can i customize(theme) views output, removing or inserting some extra tags (Html)?

any idea i very much appreciated.

thanks,

vsotto

Comments

jix_’s picture

Have a look in sites/all/modules/views. You’ll find some *.tpl.php files there. You can copy these to your theme to override them.

vrsotto’s picture

you mean in sites/all/modules/views/theme?

jix_’s picture

Ah yes, some modules put them in a subdirectory.

vrsotto’s picture

thanks, i will look into this...

nathanjo’s picture

Inside of your views there is Basic Settings > Theme : Information.

Clicking the Information will display all the possible templates.

vrsotto’s picture

thanks for this additional info...

vrsotto’s picture

ok, i'm having a little hard time trying to accomplished what i wanted to have :)

in the code bellow...

  <div class="block block-views" id="block-views-story_1-block_1">
    <div class="content">
      <div class="view view-story-1 view-id-story_1 view-display-id-block_1 view-dom-id-1">
        <div class="view-content">
          <div class="views-row views-row-1 views-row-odd views-row-first views-row-last"> <a alt="Floods kill 2 French citizens, 8 others" title="Floods kill 2 French citizens, 8 others" href="/613/network/floods-kill-2-french-citizens-8-others">
            <h1 class="art-title">Floods kill 2 French citizens, 8 others</h1>
            </a> </div>
        </div>
      </div>
    </div>
  </div>

need to output something like...

<h1 class="art-title"> <a alt="Floods kill 2 French citizens, 8 others" title="Floods kill 2 French citizens, 8 others" href="/613/network/floods-kill-2-french-citizens-8-others">Floods kill 2 French citizens, 8 others</a> </h1>

and among other fields...

what are the tweaking needed to be done? i don't get much understand what the devel.module is giving me :)

please help...

vrsotto’s picture

I just like to share how I remove some unnecessary or extra html tags of “Views 2” output. The idea here might not good enough (base on my understanding), but it basically achieved what I wanted. For newbie’s like me, it may be nice to read first this section (http://drupal.org/node/352970).

Note: I theme the general output of views for testing

Basically, I wanted to output a block (generated by views) that will display title, teaser, link (to actual node), and comment link (for user/ site visitor post some comment).

So the fields are (I just skip some setup of my views block)

Node: Title
Node: Teaser
Node: Link
Comment: Node link

The default Views output, the code would look something like…

<div class="view view-story-1 view-id-story_1 view-display-id-block_1 view-dom-id-1">
  <div class="view-content">
    <div class="views-row views-row-1 views-row-odd views-row-first views-row-last">
      <div class="views-field-title"> <span class="field-content"><a alt="City playing waiting game on cases before Ombudsman" title="City playing waiting game on cases before Ombudsman" href="/613/davao/city-playing-waiting-game-cases-ombudsman">City playing waiting game on cases before Ombudsman</a></span> </div>
      <div class="views-field-teaser">
        <div class="field-content">
          <p>DAVAO City is now playing a "waiting game" regarding the cases filed against the city before the Office of the Ombudsman, acting city administrator Melchor Quitain said Monday.</p>
        </div>
      </div>
      <div class="views-field-view-node"> <span class="field-content"><a href="/613/davao/city-playing-waiting-game-cases-ombudsman">Full story</a></span> </div>
      <div class="views-field-node-link"> <span class="field-content">
        <ul class="links inline">
          <li class="comment_add first last"><a title="Share your thoughts and opinions related to this posting." href="/613/comment/reply/11#comment-form">Add new comment</a></li>
        </ul>
        </span> </div>
    </div>
  </div>
</div>

What I did, is copied templates views-view.tpl, views-view-unformatted.tpl, and views-view-fields.tpl from “sites/all/modules/views/theme” and paste into my “theme” folder (under subfolder views). From there I modified those templates.

views-view.tpl
===========
<?php if ($admin_links): ?>
   <div class="views-admin-links views-hide">
   <?php print $admin_links; ?>
   </div>
<?php endif; ?>

<?php if ($exposed): ?>
	<div class="view-filters">
	<?php print $exposed; ?>
	</div>
<?php endif; ?>

<?php if ($rows): ?>
	<?php print $rows; ?>
<?php elseif ($empty): ?>
	<div class="view-empty">
      <?php print $empty; ?>
   </div>
<?php endif; ?>


views-view-unformatted.tpl
=====================
<?php if (!empty($title)): ?>
	<h3><?php echo $title; ?></h3>
<?php endif; ?>

<?php foreach ($rows as $id => $row): ?>
	<?php echo $row; ?>
<?php endforeach; ?>


views-view-fields.tpl
================
<?php if (!empty($title)): ?>
	<h3><?php echo $title; ?></h3>
<?php endif; ?>

<?php foreach ($rows as $id => $row): ?>
	<?php echo $row; ?>
<?php endforeach; ?>

and the resulting html codes...

<h1 class="art-title"><a alt="City playing waiting game on cases before Ombudsman" title="City playing waiting game on cases before Ombudsman" href="/613/davao/city-playing-waiting-game-cases-ombudsman">City playing waiting game on cases before Ombudsman</a></h1>
  <p>DAVAO City is now playing a "waiting game" regarding the cases filed against the city before the Office of the Ombudsman, acting city administrator Melchor Quitain said Monday.</p>
  <ul>
    <li><a href="/613/davao/city-playing-waiting-game-cases-ombudsman">Full story</a></li>
    <li><a title="Share your thoughts and opinions related to this posting." href="/613/comment/reply/11#comment-form">Add new comment</a> </li>
  </ul>

i think its clean enough, right!!? :)

i hope this gives an idea for newbie's like me who are struggling understanding drupal.

many thanks for those who shared ideas... :)

vsotto

KKarimi’s picture

That's really great thanks. Is there a tutorial for advanced editing of these files?

vrsotto’s picture

hi there, i'm not sure what do you mean by "advanced editing" but, try to see the links bellow if you find something interesting

Links:

http://www.group42.ca/theming_views_2_the_basics
http://www.drupaler.co.uk/blog/theming-views-drupal-6x/67

this website (http://mustardseedmedia.com) is so informative
=============================================
http://mustardseedmedia.com/podcast/episode9
http://mustardseedmedia.com/podcast/episode23
http://mustardseedmedia.com/podcast/episode30

i hope you find something useful here...

thanks,
vsotto

rewted’s picture

Works great for Views, but do you have any idea how to do the same for custom content types created with CCK? Even when you create a node-customtype.tpl.php a lot of junk from CCK is inserted.

vrsotto’s picture

i followed this http://drupal.org/node/266817 thread and it helps me a lot... also, i would recommend you to install devel.module and firebug for your browser

hope this would help you too...

aac’s picture

subscribing!!

---~~~***~~~---
aac

oxygensmith’s picture

Also subscribing, I'm also looking to eliminate the crufty tags around the views output.

vrsotto’s picture

just follow the above example(code)... given you wanted to have a views of type "block" name "story" that should return an output for: Title, Teaser, Link, and comment as fields.

from the views module template files found on your drupal installation, sites/all/modules/views/theme, copy and paste into your theme folder then rename:

views-view.tpl.php rename into views-view--story.tpl.php
views-view-fields.tpl.php rename into views-view-fields--story.tpl.php
views-view-unformatted.tpl.php rename into views-view-unformatted--story.tpl.php

just play around with those templates... and you'll soon figured it out what variable generates certain codes.

hope this may help...

vsotto

lance1572’s picture

Thanks for the in depth explanation. I am trying to change the output of my view and this will come in handy. For some reason, the view is outputting a target_self attribute on the link to the node which isn't xhtml compliant. I didn't write it or select it in the view section. I'll give this a go and see if I can get this to work.

Thank you!

vrsotto’s picture

i'm glad you find this post handy... and good luck!