How to create a custom design of an existing view block?

Question

I have a block I created via views ui. It is in a table format. It has 3 columns with 3 fields. Every field shows in a separate column.

Now I want to change the design of this block in an easy way to my likings.

For example here is the screenshot of one of the blocks to explain what I mean.

This shot is showing user-pic, username and follow-flag resp. As indicated in the snapshot, I want to show follow-flag below the username.

How to easily change the design of my view or block? The best would be a drag & drop. I guess this is an easiest way.

Answer 1

By pressing "settings" next to the table format, you can alter which column the fields are shown in.

Then using the "Separator" on the parent column (in your case the username field) you can inject what separats them.

Alternative you can adjust the styling of the "Follow" field to be a block element (div).

Answer 2

By modifying the view templates the views can be altered. You can add custom html design and styles to modify design.

From Page: Theming information select the template. For eg: views-view--sample--page.tpl.php, template for the view named Sample.