4

Generally, I wish to be able to style Views output on my site, but I am unsure which div classes and classes from other html elements to select in CSS to style.

There are many nested divs with classes and some to me seem like housekeeping/ancillary ones that should not be effected, e.g.:

enter image description here

General advice requested please: in the form of: technique, experiences, guide, tools, books and examples.

I've also considered Semantic Views for this aim, but this appears to be not yet in beta for Drupal 7 (i.e. unstable). Also View Element in Chrome browser or firebug - but not sure how much benefit these would have.

Also considered a mix of answers from:

But would prefer a more general approach and one which doesn't require adjusting theme php code.

4

I can only speak to my personal experience. I use these classes to style my views primarily:

  • .view-myview .view-content the main content of the view, encapsulates all rows
  • .view-myview .views-row this is the row in your view, add a border, some margins, etc.
  • .view-myview .views-field-myfield a singular field in a view

You also get views-row-even, views-row-odd and views-row-first, views-row-last, etc.

The classes can handle all tags, it doesn't matter if they're divs, spans, etc. I did a presentation at DrupalCon SF 2009 which explains a lot of different ways to customize views if you're interested it is here: http://sf2010.drupal.org/conference/sessions/jquery-views-and-view-themeing.html

  • +1 @Jonathan Rowny and accepted answer: this is just what I need - which classes and what they're for. I also like it that there is some credibility behind your answer with your presentation. Thank you. – therobyouknow Nov 14 '11 at 13:41
  • Just got a chance to watch it. It's too low resolution to read the code. Any advice on how to make it HD/higher resolution would be welcome. – therobyouknow Dec 6 '11 at 0:04
  • Here's the updated slides from Capital Camp DC: docs.google.com/present/view?id=dmzcmzx_57f74qk9ch&pli=1 And here's the blog post with the slightly outdated snippets: jonathanrowny.com/journal/… – Jonathan Rowny Dec 6 '11 at 18:44
  • Thanks @Jonathan Rowny - I will check it out. What do you think about Semantic Views ? drupal.org/node/1023054 (Display Suite vs Panels vs Semantic Views) – therobyouknow Dec 7 '11 at 9:52
  • As far as I know, the Semantic Views functionality is built into Views 3. DS and Panels are useful but can be a bit involved. – Jonathan Rowny Dec 7 '11 at 15:17
1

Actually there's nothing you have to know by heart. Take firebug and point to the thing you want to style (everyhting, not just views). It gives you all the CSS information you need. You can even try new settings right in firebug and copy them to your CSS once you're happy.

If this is not enough install the devel themer module. Similar to firebug it let's you point to anything on your site (not just views) and it tells you which theming function is used and which one you can implement to override the current behaviour.

0

Try the Fences module, cleans up the markup output by views and therefore makes it easier to style it.

Fences is a an easy-to-use tool to specify an HTML element for each field. This element choice will propagate everywhere the field is used, such as teasers, RSS feeds and Views. You don't have to keep re-configuring the same HTML element over and over again every time you display the field.

Best of all, Fences provides leaner markup than Drupal 7 core! And can get rid of the extraneous classes too!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.