I have a view and there are about five fields in the view now I want to apply my own HTML markup on each field in a view. because I have created it in custom just need to apply on a view. how can I apply my own HTML markup on it?
3 Answers
Add a Global: custom text field and past your custom markup remove your existing content like text images etc and replace tokens by them from replacement patterns. you will get the same results on both custom and Drupal.
This can be done with the fields style settings inside the view, rewrite results setting, or you can do this within a template file(or combination of all three) for full control over the output of the view.
This can be found under Advanced -> Theme -> Information. There are various view template options which you can edit, but the primary one you'll probably want is: 'Row Style Output'.
You will notice various filenames after the 'Row Style Output'. The first one being the default view theme (in bold). Copy one of the file names (non bolded) and use that file name to create a new TPL file in your theme.
Once you have added the new file to your theme directory, within your view, in the theme: information settings window, at the bottom you will find a button 'rescan template files'. After clicking this button, the view will recognize your newly added TPL file and use this to style your views rows.
From here, you simply need to render your fields with whatever HTML you want around them.
I prefer to keep everything in one place. I do this by changing the style settings to render the field with '- none -' HTML elements.
Then from there I create my views TPL file and render the views with my custom HTML markup. This, for me, is easier being able to manage all the HTML in a single file rather then editing the HTML per field.
Good luck!
If you want to apply your own html wrapper for each field then edit your view and edit the field you want to apply markup.
Expand "Rewrite results" and check "Rewrite the output of this field" checkbox.
Click on "Replacement patterns" option and here you can see the token related to your field e.g ([nid] == Content: Nid) this is for nid field.
In textarea below "Rewrite Result" checkbox put your markup like
given in image.
