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.


Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

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!

thanks alot for this, helped

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

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.

I intended this not for

I intended this not for calendar view but for a page view, sorry if that was not clear.

Your code rendered HTML should look like this:

  1. <span class="date-display-single">
  2. <div class="m">Jun</div>
  3. <div class="d">01</div>
  4. <div class="y">2010</div>
  5. <div class="m"></div>
  6. <div class="d"></div>
  7. <div class="y"></div>
  8. </span>

Feel free to send me an email if you need more help.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters shown in the image.