Views 3 List Style CSS

Question

Usually, when I make a views block list, and I want it horizontal, I would just add CSS styles to the block itself.

#block-views-something li
{
  display: inline;
  list-style-type: none;
  padding-right: 20px;
}

Having to do this for each block is a pain. I know Views 3 lets me add a class to the view to style the list, but I have never been able to do it. I have tried HTML List, and adding classes to Page: Style options Row class, and Wrapper class or even List class. I have tried it with a dot like .mystyle and without the dot 'mystyle'.

In fact, I just get myself into a right old mess. Could anyone advise me the simplest route to take to add the class to whatever box I should add it to?

Answer 1

The only good way is to use the 'add a class'-option in views. That allows for maximum flexibility and should not break if something in the view changes. (block-view-id-something can break when numbers or names change).

One you have added a css class to the field, something like horizontal. Then you can define it in your theme file css with .horizontal {...}.

But since themes can update their css, overwriting your changes, you are even better off using an extra stylesheet in your themes folder. Give it any name you want, add the .horizontal {...} lines. Then open the *.info file in your theme and add stylesheets[all][] = <stylename>.css.

If it might break after a style update, all you have to do is add this line again.