Hi

Maybe this is a simple questions, but here goes anyway.

I want to theme a view called fixtures-results.
I have defined the display output 'tpl.php' file in the theme information page of the views edit page as 'views-view--Fixtures-Results.tpl.php'.

What i want to know is what naming convention do I use in the style.css file in order to use the css to change the specific fixtures-results view.
If i want to change the background colour of this view do i name it .views-view--Fixtures-Results as a class or #views-view--Fixtures-Results as an div. I have tried this and nothing happens

I can use the main views css to change the theme but this will apply the views i create and i don't want this.

I have searched all over the drupal site for the answer and have come across nothing which is helpful. I reckon that this means the answer is obvious and has not been dealt with. But the obvious when your learning something can cause a lot of frustration.

Any help would be good.

Comments

Jeff Burnz’s picture

Well, from the Views project page the documentation is linked to : http://views-help.doc.logrus.com/

Get firebug, because the only real way to theme with CSS is to first know the classes, using Firebug to inspect elements is the fastest way.

Jimmel’s picture

Yes I always use firebug to work out the CSS, it's a godsend. The page you refer me to is the same page as that of the advanced help module. I have read that page already and it does not give a clearcut answer to what i want to know.

Is the answer that I name a new view for lets say a table tag = div.view-newviewname table.
If that is the answer then I just add the name of the new view onto view and change the classes by the usual way of adding the tags at the end.

Or should I follow the style.tpl and name it view-table-newviewname. The former naming convention seems to work OK for me but if this is the case then what is the point in changing the Style and Field Content tpl.php files when you can restyle them without using them and use only the Display.tpl.php file. Where do they fit in when naming the new pages CSS. (yes i am getting confused now, maybe i am making it too complicated for myself).

It looks like the page.tpl.php files have nothing whatsoever to do with the CSS styling (other that using the classes that are in the page.tpl.php files) and are used to change the structure of the output html for specific views.

Jeff Burnz’s picture

Well after reading this a few times I think you do understand it but not really putting into the right words, thats ok man, I think I get you.

The main point of being able to use templates is to change the HTML. Views generates plenty of CSS classes but when you need or want the HTML to be different then templates are the way to go. Let say you have a view that uses fields but you really want the title wrapped in h2 tags and not a div, then you have to use templates (or the new Semantic Views module when its stable for release).

Views generates so many classes you can use many different combinations to form your selectors, it just depends on the theme you are working on, personal preference, and how much you want to be reusable and how much you want to be specific to the view you are theming.

morewry’s picture

I have a related question...which may well provide an answer, in part, to the OP.

I've been reading and I'm aware that I can theme Views 2 by adding .tpl files, but I don't really need/want to go quite that far yet. What I *would* like is if the class names the views module uses by default were the actual name of the field, so that I could anticipate what they will be.

Right now I can create view with fields and when I am building the view in Views UI I see the actual name of the field, for example, "Name." When "Name" is finally output into the view, the class for "Name" ends up being "views-field-value-1." Even if the field has a label -- the only time the field is *not* an anonymous "value-#" is when the field is selected as a "Grouping field" in the view "Style"; then it will be "views-field-name."

I don't understand why this should be the case; the Views module knows throughout the interface what each field's name is, but when it comes to the replacement patterns and class names, it uses "value-1", "value-2", "value-3."

I feel that surely there must be a simple way to get the class name to be "views-field-name" instead of "views-field-value-1" -- a checkbox or a label field I'm missing. But I sure don't see anything in the documentation and haven't turned up anything in google either.

In the views template files for field output I see a reference to a "safe class" name, which so far, except when it's a grouping field, *always* ends up being an anonymous class like "views-field-value-2." Perhaps I can alter the PHP used to create the "safe class" to use a safe version of the actual field name instead? (I genuinely think this should be the default and I'm surprised it doesn't work that way to begin with. The documentation implies it should, see http://views-help.doc.logrus.com/help/views/theme-css -- I can't figure out why I'm getting these "values")

Does anyone with more Drupal/Drupal+Views experience than myself (this is really my first time using Drupal) have any information that might help?

webthingee’s picture

Not sure if I am on the exact page... but in case I am here's one of my new favorites... Semantic Views
http://drupal.org/project/semanticviews

morewry’s picture

Thanks, webthingee!

I think now that the reason I was seeing "value" on so many items is because "_value" is the last bit of the column name alias when those fields are selected from the database. I was working with users and some custom profile fields; so it was different for the user "name." It's really just a case of these column names not ending up with "nice" class names when run through the views 'safe css' algorithm. Oh well.

But this module looks absolutely terrific; I am bookmarking it to play with tomorrow. Not only should it help "fix" the generic css classes I am seeing, it looks like it will make any tweaks I might want to do very simple.

webthingee’s picture

That's awesome. I too am using this with genesis... it works great.