How to design a page created using Views

Question

I have created a page with help of the Views module, and it is perfectly doing the job.
I need to design the page on my own.

How can I do this?

Answer 1

The easiest way to style a page generated by views is to simply edit the CSS.

If you need more control over the markup generated you can use Semantic Views to clean up and improve the generated HTML.

Another simple solution is to manually add a template: there's a "Theme" section in the Views UI (just above where you set the Path and Menu Item). There you can select the best template to use (views-view--YOURVIEWNAME--page-1.tpl.php or something similar) and copy & paste the default template code.

Then, create a file with the same name in your Templates directory (views-view--YOURVIEWNAME--page-1.tpl.php or something similar) and past the code there. You can now edit the template as if it were any other!

If it isn't getting recognized by the View, don't forget to go back to the "Theme" section in Views UI and click "Rescan template files" to make sure it's found!

Answer 2

A simple way is to style view fields with CSS.
Another way is to click on "Theme information" in the style setting block of the edit view page. You can use the listed names create your own theme, and copy the created file to your theme folder. Click on "Rescan template files" in the theme Information menu. Now your theme is applied for the view. Check also How to quickly theme a view?

Answer 3

Make sure you check out modules like Display suite & Node display. With these modules you can layout a node for all standard build modes (full, teaser, etc) and create your custom build mode; then, you can drag and drop node fields into node regions. In your views, choose display suite when selecting your row style. Each node in your view will be rendered according to the layout you've created in Display suite.

Answer 4

We can able to design the page by following doings:

1. Administer->Site Building->Views

2. Choose Theme:Information from Basic Settings.

3. Click on Row Style output.

4. A set of code will generate. Copy the code and paste with the file name generated at the first line of the code and have the file in your current theme folder.

5. Now design the page as you like.