If you're into theming Drupal...or more specifically Drupal content output, then at some point you will want to make your Views output look a little prettier. Often the standard html output is far from useful and you will at some point feel the need to alter this. While this is relatively easy with node style output, it is often not so clear with the field style...and was for me a
big 'A-ha' moment.

So let's take a closer look at Views field theming.

I have created a couple of very simple posts with some text and an image with an Imagecache thumbnail preset. To describe the process of theming field output I am going to simply make a teaser view common to alot of websites...but with my own custom and themeable HTML.

Img 1: Just a couple of Drupal posts.

Lets make a view.

Go to Views and add a new view, give it a name that suits your brain, leave View Type as Node and click next. The Row Style output default is Field, so we'll leave that. Lets start by defining the fields we want to use.

Img 2: Click here to add some fields.

Img 3: In the Group: Node, choose the fields you want to use.

For my view I chose Node: Title, removed the Label and linked this field to it's node. Next I chose the Node: Post Date, my teaser image (Imagecache) from the Content: Image (field_image) (Image is the name of my image field), chose my imagecache preset and linked the image to it's node and finally  the Node: Teaser field.

Img 4: My chosen fields.

At this point you may add filters for Published, Content Type if you like.

Lets create a Page view, so that we can access the view. Add a Page display and give it a path name....in my case 'view'

Img 5: Set path and click for Theme information.

After saving our view, we can call the page in our browser with the path we chose, but it doesn't look much different to the original Drupal output...only some slight formatting differences and the missing author name...which I don't want.

Let's look at theming these fields now. Back in Views page display...click on Theme: Information.

Img 6: Page: Theming information.

What we need is the Row style output. Click on this and you will be presented with a theme template...the one responsible for the standard Drupal output. Copy the whole lot and paste it into an HTML Editor of your choice and save it as a new file in your theme directory. If we call the file views-view-fields.tpl.php, it will change the output on all views...which we don't want...so let's take the last name in the list of possible names...it is the most specific, and in my case the name is views-view-fields--test-view--page-1.tpl.php. After our file is saved in our theme directory, check back in views theme information and rescan template files. Now the last name in the Row Style should be bold, meaning our template file has been recognised.

Let's return to our HTML editor and the file we pasted there.

Img 7: Edit our template file in an editor.

Highlight the whole markup as shown and delete the lot...we don't want any of it. Now we need the ID's of the fields we want to use. You can find these back on the Page: Theme information page.

Img 8: Field ID's

With these names, we can start building our own markup using php constructs like this:-

Img 9: Output our fields with php.

Saving the file and looking at our page, you will see all our fields being produced...but looking very ugly, because the is no HTML markup around them. Now we can build what ever markup we like in our template file.

Img 10: A simple example of theme markup.

Above is just a simple example of markup which could be used around our outputted fields. Armed with HTML and CSS knowledge...you can now do what you want. Here's just a simple example on my posts.

Img 11: Just some simple CSS formatting to the HTML markup.

Drupal and Views are the best ever things to ever have been created....ok..with the exception of VW Beetles...and maybe PRS Guitars....and.......