Find solution
How can I style the header of dialog?

Drupal (CMS): What is the proper way to style views?

  • I'm quite fresh drupal developer. I'm trying to create a bit complex community-driven website using this CMS. I was using mainly wordpress to develop any kind of website for about last 10 years and now, after few days with drupal, i feel that i'm doing it extremely wrong. Let me explain what it's all about - i'm creating a magazine-styled website with two user roles: Admin and User. Admins can add articles/news etc. and users can upload their photos or videos, rate other users uploads, comment on any node in the system etc. This is how it's done so far: i'm using Drupal 7 with views and panels. Each content type (article, news, user_photo, ...) has it's own Panel settings based on content type. All of those panels has a views blocks assigned to them. This website's design is so complex that i can't use the built in formatting tools to format my content so i need to use template files for my views. I'll explain how i'm doing this using example: Let's say i'm trying to create a single article page. First, i'm making a new node panel variant with content column and sidebar column. I'm adding some custom blocks to sidebar and 3 views blocks to the content panel: header (with article title, author name and post date), content and footer (with tags and more details about the author). Let's focus on header view. First, i'm creating a views block called Header with the following settings: Format: Unformatted list Show: Fields Fields: Content: Title Content: Post date (author) User: Name When this stage is ready, i'm going to Theme: Information, creates a Row style output template file called i.e. views-view-fields--article-blocks--header.tpl.php, hitting 'Rescan template files' button and and saving my view. Now, to style my view output, i'm creating previously mentioned file views-view-fields--article-blocks--header.tpl.php and there, using var_dump() function, i'm debugging a $row and $view variables to get what i need and putting those things on their place in my layout. Basically everything work's great but the question is - am i doing it the right way? I have a constant feel that i'm doing it in extremely unsafe and uncomfortable way and that there needs to be some better solution for styling those views. I think that debugging those variables is so annoying and time-wasting that there is probably something i don't know about. Another thing is that views templates file structure is really illegible because they are all in one folder and they have really long file names which makes it all very hard and uncomfortable to work with. If you have any suggestions for me or there are some obvious things i miss, please share them here. Thanks in advance!

  • Answer:

    Oh, Drupal is different from Wordpress. I thi...

Jeremy Zhang at Quora Visit the source

Was this solution helpful to you?

Other answers

In Drupal 7 unlike Wordpress there is a separation between the logic and the styling. You should never style using inline CSS in php files. The below is from within the View having chosen to display fields. Styling the View Expand the advanced section on the right Click CSS class Give the class a name. This will give this particular view an associated class for CSS. Style the class in your CSS Styling the Elements of the View Click on the field you want on the left under fields e.g. Content: Title Click style settings Tick customise field html Chose the element type you want e.g. DIV, SPAN, H1 Tick Create a CSS class Give the class a name Style the class in your CSS

Eoin McInerney

Did you consider using http://drupal.org/project/ds ?

Alaa Batayneh

If you have not gone too far, I would advise you to start with pressflow Drupal distribution. Its just like Drupal but pre-configured for newpaper & magazine sites. However, if you want to add styles to existing views, you can either add it by per row, per field basis, or create a views template from 'theme' and give it a style

Bhavin Joshi

First things First: There are actually 2 ways to do it in Drupal. 1) You want to just change the way the content looks and add some static content to the default content Drupal generates from views. 2) You want to modify the content that is displayed by default dynamically. The second approach is a bit difficult and for it you need to used template files and devel module to work with. Using preprocess functions, you have to identify and access the default drupal variables and change it to your need. Lot of complications involved in this and I suggest you to go for Lullabot's course to get a clear idea. For the First approach, it is very simple. You have been using the default template files for views as suggested by the drupal views or devel module. There is a round around and the steps are as follows. 1) Considering, you are creating your own content type, then the drupal uses all the values of the content types as various fields. 2) For a view, hit right click-> view page source and you can see that the div-classes have the same name as that of the field names 3)Use the classes and start styling. you need not use that view template files unless or otherwise, you want to modify the content that is printed by the $row or any such variable. Note: This approach will work if you use the selectors carefully. All the field classes must be presided by the region class so as to ensure the mix-up or ambiguity. If you have been working on wordpress for so long, then I suggest you to go on with it and dont come to drupal as Drupal is a much complicated phenomenon. Drupal has a steep learning curve. I have used both and WP is the fastest and the shortest path.

Vignaz Vignesh

What you are talking about is styling and laying out each Node Type. Views should really be used for listing Nodes(or Entity) not laying out elements of a Node. If you are using Panels then you shouldn't need to create or use Views unless you are referencing some content you want to list inside this content. The way you are doing it is not really unsafe more than unnecessarily complex. I think you just need to remove the Views layer from your method. Rather than creating a View and inserting that View into a Panels Pane, just insert each field into a Pane directly. You can format each field in a number of ways using either Panels Pane templates or using the Pane Styles option (I like https://www.drupal.org/project/clean_markup). I haven't really found a good way to group fields in Panels without creating separate Panes (like Header in your example). I would also reconsider using Panels if you don't have a specific reason for using it. Instead you can use Drupal's "Manage Display" area for each node type and https://www.drupal.org/project/ds and https://www.drupal.org/project/field_group to do advanced stuff.

Jason Rambeck

You are going about somethings the hard way, but creating views to pull into your panel isn't one of them. It'd be silly to create a view or custom code for author or date when that information is already available in panels as the poster above/below me pointed out.

Chad Chandler

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.