Styling Views in Drupal 7

CMS & WordPress
1

Hi all

Working with Drupal 7, finding it very hard to modify the current markup that’s assigned to a basic view inside a block.
Wondering if anybody can shed any light on the best approach to change html within drupal so I can customize the code myself?

Drupal view displays:


<div class="views-row views-row-2 views-row-even">
    <div class="views-field views-field-field-event-location">
        <span class="views-label views-label-field-event-location">Venue: </span>
        <div class="field-content">Name 003</div>
    </div>  
    <div class="views-field views-field-field-event-date-and-time">
        <span class="views-label views-label-field-event-date-and-time">Date: </span>
        <div class="field-content"><span class="date-display-single" property="dc:date" datatype="xsd:dateTime">1 February, 2014</span></div>
    </div>  
    <div class="views-field views-field-title">
        <span class="field-content"><a href="/event/003">Event 003</a></span>
    </div>
</div>

What I’d like to display:


<ul class="list-items">
    <li>Venue: Name 003</li>
    <li>Date: 1 February, 2014</li>
    <li>Event 003</li>
</ul>

I understand certain spans and classes might need to stay in place so everything functions, just wondering the best/easiest way to change the html.

Can anybody advise on how this is done?

Thanks, Barry

2

Yup, I do something like this all the time.

  • You could change the display option under Format from “Unformatted List” to “HTML List”
  • Then for each field you would remove the label (uncheck create label) and under Rewrite Results, check rewrite the results of this field.
  • In the text box for rewriting the output, add your label + the token for that field from the replacement patterns.

It would look something like this in the rewrite output text box:


Venue: [field_event-location]

Do that for each field (looks like you have 3 fields) and you should get an unordered list similar to what you are looking for. From there, you may need to do some fine tuning but it should get you well on your way.

3

Thanks awasson

Been at this hard for couple of nights, just managed to get a fairly good result though some fine tuning is still needed.
You have a good solution and something that will come in handy.

My output so far:

I’ve listed just one <li> to keep things short, I’ve also added further div wrappers around these lists which aren’t showing.

<div>'s where needed to have block level
<span>'s to bold the labels


<ul class="list-group">
    <li>
        <div><span>Venue: </span>Name 003</div>
        <div><span>Date: </span>
            <span class="date-display-single">30 January, 2014</span>
        </div>
        <div><span></span>
            <a href="/events/event-003">Event 003</a>
        </div>
    </li>
</ul>

What I’ve done is make a copy of the core view template files and done a basic override.

My view was called article-list so:

[LIST=1]
[]views-view-block.tpl.php became views-view–article-list–block.tpl.php
[]views-view-fields.tpl.php became views-view–article-list—fields.tpl.php
[*]views-view-unformatted-block.tpl.php became views-view-unformatted–article-list–block.tpl.php[/LIST]

Each file needed a small tweak to get the correct result then I added the files to my sub-theme template folder :slight_smile:

Good learning curve, also came across function template_preprocess which adds new variables amongst other things, though, still not sure how to use this and what’s the best way. Is this something you’ve used? And what do you think of my approach above?

And what I can gather, this is just the start of things.
As with most CMSs, always lots of overrides when you need to get heavily involved with the theming and functionality. Magento comes to mind (:

Thanks, Barry

4

I just finished themeing views for the first time as well, and this is basically exactly how I did it. I used the hook_preprocess to pass in custom classes for rendering. I would say you much have it figured out. Drupal is very complicated but it comes with a far more robust solution than Joomla or wordpress could offer, IMO.

5

Nice to know your sharing the pain :smiley:

I used the hook_preprocess to pass in custom classes for rendering.

Have you a small example of your code? (haven’t used this yet)

Drupal is very complicated but it comes with a far more robust solution than Joomla or wordpress could offer.

Totally agree. I used Joomla some years back, very slow and not much work about compared to Drupal nowadays. Never really bothered with Wordpress, seems a bit entry level for me after working with Interwoven Teamsite for many years anyway. Drupal definitely seems the way forward.

Looking forward to Drupal 8 release. Views built into the core amongst other things (https://drupal.org/drupal-8.0)
Currently downloading 10+ modules to get basic functionality :nono:

Barry