Styling Views using Output rewrite



There is a module Semanticviews which achieves similar functionality. You can check that out as well.

Views is without a doubt the most powerful and useful drupal module. Views helps to bring out content from our site in a variety of ways. Anywhere you think of list of contents in your site you think of views. Views 2 provides even more awesome features than that were available in Views 1.

But just getting the content is not enough you need to present them in a way that is suitable to your needs and Views can output the result of your view in a variety of ways. There are many approaches to styling the output from your views. The basic approach is to use the style option that is provided by views. There are four basic styling options:

  1. Grid
  2. HTML list
  3. Table
  4. Unformatted

The Grid formats the output in a html table grid. You can specify the number of rows and colums. The HTMLlist option simply lists the view output in ordered or unordered list. The table option outputs the result in a table with each result displayed in a row. It has some cool features like sorting and grouping. The last option is the Unformatted option and as the name suggest it outputs the result unformatted it simply displays them in some divs and spans.

These option are simple but it does not provide you with the level of control that yon usually need. Another approaches is to use templates. A template is nothing but a html file with embedded php code and it must end with the extension .tpl.php . A template file can be places in the themes directory and you can override the default display styles that are used by views. Views allows us to create a template file for the whole view or just the individual rows as well as for the individual fields. But creating templates for each and every field is a cumbersome and time intensive process.

The easiest and quickest method of outputting the views in the format that you want is using rewrite output option, It is easy and we can easily output the view in any format that we want without creating a single template file. The downside is it can just be used for theming row output and not the whole view. But I think this is good enough. You can create a single template file for the whole view and for the rest you can use rewrite output.

So what is output rewrite and how to use it. Well this tutorial is all about that. So lets begin.

Before we start

Before we begin, I assume that the reader is comfortable using CCK and Views. If you know how to create a simple view then you should do fine. If you don't know what a CCK is and what a view does then I advide you to go through some tutorials on how to use them. Yo will find a lot of them in the internet.

Create the content type

For the purpose of this tutorial I have created a new content type. The only thing about the content type is I have added an image field to it using CCK. Apart from that everything else is the same. Go ahead and add a few contents to your newly created content type.

Creating the view

The View itself is really a simple one. In the filters I have selected Node: published as yes and Node: type filter as my content type. In the Fields I have displayed the following fields:

  • Node: Title
  • Node: post date
  • User: Name
  • Content: Image (the one added by CCK)
  • Node: Teaser
  • Node: Link

I have added a page display, and set the style option to Unformatted. Now after you save your view head over to the url of your view. It should display something like this.

If you use firebug or view the source then you will see that the html for the fields are quite complex.They are nested with many divs and span with class names like views-field-name. We want a simple html output that we can theme easily using CSS and we want the class name to be simple like image or author.

Rewrite output to the rescue

Lets say that we want the html output for each item to be of the form

    • <h2>Title</h2>
    • <span class="post-date">Post Date</span>
    • <span class="author">by author name </span>
    • <div class="content-image">Image</div>
    • <div class="content-teaser">Teaser text</div>
    • <div class="more-link">Read more link</div>

To do this first click the first field Node: title in this case in the Fields section and see the configuration options that it offers. There you will see a check box named Exclude from display. Select that and click on update.

Select exclude from display

What this does is,it hides the current field from the views output. I will explain why you need to do that in a bit. Go ahead and exclude all the remaining fields except the last field. This is important so dont forget this. You need to exclude all the fields from display except the last one.

Now click on the last field in the Fields section. In this case its the Node: Link field. In its configutation option you will see an option Rewrite the output of this field . Tick on that. After you tick on that you will see a bunch more option come up. You will see a text area called Text, This is where you put your rewrite output code. The great thing about this is you can use html tags so you can put divs and span or anything you like.

There is a section called replacement patterns. It displays all the fields that are available to you. Replacement patterns are kinda like a token that represents that particular field. So to display that field you simply need to type the replacement pattern in the textarea that is provided. Since you are in the last field all the fields above that field is available to you. If you had selected the second field then only the first and the second field would be shown.

Since we have exclude all the above fields from display we need to display them here using the pattern that are available.

rewrite the output of the field

The text to put in the textarea is as follows:

    • <h2>[title]</h2>
    • <span class="post-date">[created]</span>
    • <span class="author">by [name] </span>
    • <div class="content-image">[field_content_image_fid]</div>
    • <div class="content-teaser">[teaser]</div>
    • <div class="more-link">[view_node]</div>

Now click update and save the view. Now go to your view page. You will see the output change just a little. If you look at the source or use firebug then you will see that the html for each item has changed and now it is according to format that we wanted.

final output

That's all folks

Well there you have it. Once we have the output the way we want we can easily style it according to our needs. I hope you enjoyed this tutorial, If you run into any problems please put them in the comments I will be more than happy to answer them.

32 Responses to "Styling Views using Output rewrite"

views superhero has something new to tell :).

Web design is a learned skill. Although, I believe it to be one of those things that you have to be made to do! There' s an art to it.

Evan says:

Thank you SO MUCH!
Guh... If only I had found this tutorial a bit earlier... I've almost destroyed my css files trying to restyle things with names like "mini-panel-featured_2_this_sucks_to_theme". ;)
I was pulling my hair out trying to find a way to wrap my elements with certain classes.
I suppose it's time fix my code. :/

Thanks again!


kiran says:

thakz alot man u have done that great

sankalp says:

worked like a magic!

Ian Hoar says:

The problem with this method is you may want to use a block level element which will cause your html to become invalid. For example a div tag or h1 tag is not valid within a span tag because you have block level elements in an inline element, and even though you have lost most of the tags you still have one span around everything.

I still don't understand why views outputs so many spans and classes. I know they are erring on the side of caution, but anyone with an understanding of CSS does not need this many classes to style something and could append them anyway. Looks like I'm going to have to look into the templates.

Great blog with good content and a beautiful design. I just want to encourage you to keep doing what you're doing. I'm subscribing.

Really Helpful thing.......It raised my level of views.
I don't know why this captcha thinks that I'm writing a spam??? Any ways 2nd attempt.

Matt says:

This post has changed the way I look at Drupal forever. Thanks!

The rewrite option is not showing up for me. Is their a permission that needs to be on. or some other option that needs to be enabled?

the output rewrite option is not showing up for me.
Is their somthing I need enabled, or permissions set a certain way?

prashant says:

Which version of views are you using?? I think it works from version 2.5 or 2.6 or above..

Franck says:

what if you'd like to show:
active when the output text of the field is active and
inactive when the output text of the field is inactive?

Anton says:

Hi, I am using the same method for most of my view output styling, yet hit a barrier recently - you have a lot of experience, so perhaps you could help?

I need to insert a custom style attribute in the overridden html (I use one of the tokens to populate a background image for the view item), yet it doesn't come through to the view output, even though I've enabled Full HTML as the output type etc. Is there a rule that prevents "style" attributes from displaying in the overridden contents?

I would really appreciate your help.

prashant says:

Yes apparently it does not take the style attribute. However it takes the class attribute. So you could use the token to display as a class and then add the background image from the css file.

Anton says:

Thanks for your answer - I thought of that option as well, yet I'd like to keep the data in one place, without having a class name in the CCK and the actual style (image) in CSS.

I found another workaround, though: Use Custom PHP Field, and, instead of overriding its output with tokens, I use print $data->field_name (from the SQL of the view).

I guess this is a heavier solution, yet it works for me.

Thank you again for your help.

Guy Morel says:

Thanks for the article - I came to your site because I was searching on google for the style issue that Anton mentioned. Ga.. its really an annoying issue. Really, if I'm in control of a view, I'd think that I have enough permission on a system to pop in a custom style tag. The reason I want it, is so that I can display a few images that default to hidden and then initially loaded, and then on clicking of a thumbnail image will make the images appear or cross fade with jQuery.. now I need to do a workaround, because afaik to do a cross fade on images, if you have a class that hides the images as opposed to the style, it messes with the fadeIn, fadeOut methods (well if its anything like scriptaculous)

filthydog says:

I love this article - I was hacking away trying to turn a taxonomy term into a CSS class, when I discovered it. Now I have a nice solution, and can also start tidying up my CSS elsewhere too. Thanks a lot!

You've saved my life, thanks a lot, it was very helpful an easy to follow

pk says:


Thanks so much for explaining the views rewrite output. Your post has opened my eyes on doing views the correct way. I was almost convinced that views suck because of all the garbage that they add to each field. Now I have to go and rewrite all my views :*0

Fabian says:

Thank you! This helped me a lot. First I didn´t understand that I have to define the rewrite rules for the last field because above they won´t be available. But now it´s ok. ;)

Chris says:

BEWARE OF USING THIS SOLUTION!!! Drupal separates business logic from the presentation layer, but this technique breaks that paradigm and mixes the two together. The correct way to alter the display of the views is through the theming layer and views templates. For a tutorial on how to do this, visit

Che says:

Thanks for this, it was just what I was looking for. So much easier than defining a template for each view. However, I've noticed that fields get wrapped in a span tag, even if the row style for the field is not inline. This can produce invalid xhtml if you have block-level elements in your customised compound field. Some solutions are given here .

Serhiy says:

This helped me so much!

I made views table and put several fields in one cell, including node title, and they all were styled the same.
But you trick helped me!
Thank you!

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? I founs a couple of tutorials by SE, but unfortunately didn't manage to solve the problem with their help(

anie says:

Thanks so much for explaining the views rewrite output. Your post has opened my eyes on doing views the correct way. I was almost convinced that views suck because of all the garbage that they add to each field. Now I have to go and rewrite all my views :*0

prashant says:

Hi annie,
I am glad you found this tutorial helpful. But I would like to recommend using the module semantic views , which is more flexible and better way to correct your markup.

, thanks for the reply. I was thinking along the same lines as you suggest, but it's quite confusing where to start because the content is outputted s involved in various'm not familiar. I was hoping for a "best practice" guide

Allah says:

Thank you SO MUCH!
Guh... If only I had found this tutorial a bit earlier... I've almost destroyed my css files trying to restyle things with names like "mini-panel-featured_2_this_sucks_to_theme". ;)
I was pulling my hair out trying to find a way to wrap my elements with certain classes.
I suppose it's time fix my code. :/

Thanks again!

Allah says:

It’s amazing, looking at the time and effort you put into your blog and detailed information you provide. I'll bookmark your blog and visit it weekly for your new posts.

I have a problem with rewrite involving Ubercart. I want to show an image on the front page that is linked to its product page. I created a content type like yours with an image field but I also added a new field that is a 'node reference' to the Ubercart product page "Front Page Product Link (field_front_page_pid)". Its format is Title (link).
In views, if I don't exclude this field from display, and rewrite Output this field as a link and designate [field_front_page_pid_nid] as the path, the Title of the product shows and links perfectly to the product page.
Now I try to rewrite Output of the image field (ordered as last field) where the link path is the exact same replacement pattern for the product link: [field_front_page_pid_nid], the image gets linked to the product Title instead of the product page. It's as if, in this case, the replacement pattern is the title, not the nid.
Do you know if there is a way I can designate to take the (nid) instead of the title of the pattern?
Also, if I designate an Alt text to replace [title], it never appears, only the title's nid!

Thank you for your contributions to the Drupal society.


SemanticView works flawlessly. Loving it.

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

This question is for testing whether you are a human visitor and to prevent automated spam submissions.
4 + 10 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.