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.

Improve this question

3 Answers 3

Reset to default
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

Improve this answer
7
  • +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, 2011 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, 2011 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, 2011 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, 2011 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, 2011 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.

Improve this answer
0
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!

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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