Rewriting Drupal Views Output for Custom Theming & CSS

May 20 2010

I love it when we discover one of those wonderful Drupal gems that is not well documented and is very powerful in creating some nice Drupal Views theme customization. We were recently tasked with creating an events calendar that has a custom CCK field called "City". There's a drop down menu with a list of cities to assign the event to. So along with an event listing, you also see a city such as New York or Boston. The client wanted these cities to be color coded.

Rewriting Drupal Views Output for Custom Theming & CSS

The issue was, how to assign the color to the city with CSS using Views. We tried a custom View theme template but this got us nowhere as there seemed to be no way to out put the names of fields.

Finally we hit upon it, there is an option in Views under Fields called "Rewrite the output of this field". When you click on a field to edit and select the checkbox for this option, you are presented with possible "Replacement patterns". In our case, we used the city location field as our CSS selector for the city location.

Here is our custom output rewrite code we used:

  1. <div class="[field_event_location_value]">[field_event_location_value]</div>

The HTML output for the above is:
  1. <div class="Boston">Boston</div>

We can now create a custom CSS class for Boston like this:
  1. .page-events .Boston {
  2. color:#2B0082;
  3. }

Fields ordering and data

Note that to utilize this properly you can only use fields that have come before the one you are currently working on so you may need to just rearrange the order or add a field but select "Exclude from display" just to get the data in to be available for use.

The possibilities for uses for Drupal Views Output Rewriting are endless and we are already using it for many different purposes for custom Views theming.


where to put style element

Hi there - I have this working as far as the coding in the view is concerned, but am so far unsuccessful in getting the style element to connect to the calendar.

The display is a typical 'calendar' monthly view.

What stylesheet did you add the class to?

Thanks.

thanks alot for this, helped

thanks alot for this, helped me alot after days of searching.

http://drupal.org/project/sem

http://drupal.org/project/semanticviews offers similar (more powerful?) capabilities

Yes, perhaps, I just found

Yes, perhaps, I just found out about that and am going to check it out, thanks!

Customising

Ahha, that makes more sense, I don't think my div code was placed correctly and so was throwing the whole stylesheet wonky.

Exactly what I was looking for!

Thanks for posting this. This is exactly what I needed to do but couldn't get my head around how to do. Thanks!

Rewriting Views output for custom CSS

This was a handy example to wrap my head around something similar I needed. Thanks.

Block element within an inline element

I love this little trick and use it often. One thing I've noticed but haven't thoroughly investigated is how Views determines which tag it will use to wrap the field, either div or span. The problem is that most of the time I rewrite my fields, it wraps the field with a span tag. This is not a huge problem but it does break the, inline elements cannot contain block level elements rule, if you use block level elements in the rewritten output. Does anyone know how to make views wrap the rewritten field with a div or do you feel like it is okay to break this rule?

You have a few choices you

You have a few choices you can change the format of the output. Check "Style settings" in your view and depending on what you have installed you will have options for unformatted, HTML List etc... You could also try Semantic Views. Another option would be to create a custom view theming page in which sort of does the same thing as what I wrote in this post but you have a bit more control over layout which sounds like what you need.

Great Tip

I'm new to Drupal and this tip just opened me up to a whole new world! Thanks!

Glad it helped!

Glad it helped!

Nice

Thanks for the tip.
I've tried about everything else before I found out how to use the 'rewrite html output' thanks to this post!

implemented this in drupal7 views3

honorable greetings :)

Thanks, nice to know this

Thanks, nice to know this works in Drupal 7.

Thanks

Nice work, this information was very useful to me.

Thanks