By bg1 on

I am trying to get a start in View Themingand have had difficulty because all the documentation I have found seem to assume you know something to begin with. I want to minimize any waste other developer's time so rather than just asking emty how questions (which have generally gotten me responses I can't understand), I have put together what I would like to see as guidance in the hopes that someone will tell me if I am close or not and will answer some specific questions.

For this example, all we want to do is to change the background color for the grid, turn border lines on for the grid (all cells) and change the border line color.

My understanding of what would have to be done is as follows:

1. Open the view (ensure Style = Grid)
2. Click on Themes Information
3. Mouse over the bold file name next in the Style Output section to see the location of the file (which should by default be "views-view-grid.tpl.php").
4. Click on the Style Output Link
5. This will display the Code for the views-view-grid.tpl.php file
6. Note the names of the classes that need CSS code (In this case we are looking for

???a? If we wanted to add some CSS code at the row level, how is "
print $row_class; ">" to be interpreted? What would be the name of the class we would want to code/modify?
7. Go to the CSS file we want to add the CSS code to. (Or should we be creating a new CSS file?)
???b? Where should the CSS file be/go so that it is loaded?
???c? If I am trying to style my default grid template that would be used for all grids (unless I wanted to override one) Would the class name really be = views-view-grid.tpl.php or is part of this a token that has to be replaced with some other value?

Sorry for the very basic questions. I am a newbie to both Drupal and PHP with only basic experience with CSS (I am primarily a SQL developer but with a lot of ASP experience who is looking at Drupal as a way to build apps faster without having to spend a lot of time on user interfaces ;-).

Thanks for any guidance.

⋅ Categories: Drupal 6.x

Comments

mcfilms’s picture

mcfilms commented

This single tip will make your life easier: Use Firebug.

Look at the page that is displaying the View using Firefox. Activate the Firebug add-on. Roll over the various elements. Firebug will tell you which line of which CSS file is affecting your element.

Try it, you'll like it.

A list of some of the Drupal sites I have designed and/or developed can be viewed at motioncity.com

ludo1960’s picture

ludo1960 commented

You do indeed need firebug, this should help too http://drupal.org/node/352970

bg1’s picture

bg1 commented

Thanks for the link. However I can't get Drupal to recognize even the first step.

For example, in the View I went to Theme information. Under Style Output I had previously modified the CSS for a class in views.css that was referred to in the default template (views-view-grid.tpl.php). However I have 2 views that both use grids but require different formatting. I therefore wanted to have Drupal use different templates for each view.

I cloned the content of file views-view-grid.tpl.php file into a file named views-view-grid--view2.tpl.php. I left the original file (views-view-grid.tpl.php) three also so that any other views using grids would use that styling.

The then returned to the Drupal view and clicked the Rescan Template files button. The original file views-view-grid.tpl.php remained bold (not the one that had the reference to the view as part of the file name).

I tried changing my theme (I am using Pixture Reloaded) back to a standard theme (Garland) and then back to Pixture Reloaded). I saved the view. I cleared the cache. I repeated all these steps in every combination I could think of.

I then thought I can't keep the original views-view-grid.tpl.php so I removed it from the folder. Then when I clicked rescan it highlighted that it could not find that first file as an error.

I am thinking that maybe there is some kind of info file that has to say which file you want to use for each plugin (Display output, Style output, Row style output, etc.) but that sort of contradicts the idea of the Rescan template files button.

I am sort of curious anyway as to how Drupal knows where it is looking for what (I get the impression from other posts that they have the theming related files in folders under the main folder for the theme they are using. My folder hierarchy is as follows:

Drupal root
---modules
------views
---------theme
------------theme.inc
------------views-exposed-form.tpl.php
------------views-more.tpl.php
------------views-ui-edit-item.tpl.php
------------views-ui-edit-tab.tpl.php
------------views-ui-edit-view.tpl.php
------------views-ui-list-views.tpl.php
------------views-view.tpl.php
------------views-view-field.tpl.php
------------views-view-fields.tpl.php
------------views-view-grid.tpl.php
------------views-view-grid--view2.tpl.php
------------views-view-list.tpl.php
------------views-view-row-comment.tpl.php
------------views-view-row-node.tpl.php
------------views-view-row-rss.tpl.php
------------views-view-rss.tpl.php
------------views-view-summary.tpl.php
------------views-view-summary-unformatted.tpl.php
------------views-view-table.tpl.php
------------views-view-unformatted.tpl.php
---------css
------------views.css
------------views-admin.css
------------views-list.css
------------views-list-rtl.css
------------views-tabs.css
------sites
---------all
------------themes
---------------pixture_reloaded
---themes
------garland

Thanks greatly for any assistance.

ludo1960’s picture

ludo1960 commented

..You are a bit confused, so grab a coffee....

Ok now read the link again, copy the views-view-grid.tpl.php to your theme directory (I normally create a folder views in my theme directory and put my modified views in there) then re-name it as per your content type, then re-scan and save (put an echo "This is my own view" in your new tpl for testing)

bg1’s picture

bg1 commented

If I understand you correctly, I should create a views folder under the themes folder.

I just need to know which themes folder. Which of the following are you recommending?

A.
drupal_root
---themes
------views
---------themes (for views-related templates - override templates only)
---------css (for views-related css files - override css files only)

B.
drupal_root
---sites
------all
---------themes
------------views
---------------themes (for views-related templates - override templates only)
---------------css (for views-related css files - override css files only)

C.
drupal_root
---sites
------all
---------themes
------------pixture_reloaded
---------------views
------------------themes (for views-related templates - override templates only)
------------------css (for views-related css files - override css files only)

D.
drupal_root
---sites
------all
---------themes
------------pixture_reloaded
---------------views
---------------------themes (for templates related to all views - override templates only)
---------------------css (for css files related to all views - override css files only)
------------------viewA
---------------------themes (for viewA-related templates - override templates only)
---------------------css (for viewA-related css files - override css files only)
------------------viewB
---------------------themes (for viewB-related templates - override templates only)
---------------------css (for viewB-related css files - override css files only)

The thing that I find misleading is that I confirmed that the template and css files that currently affect layout are under drupal_root/modules/views/theme and drupal_root/modules/views/css respectively. I didn't do anything to put them there, that was the result of installing the views module.

I will follow your advice however. I just need clarification of which folder structure is recommended.

Thanks again.

ludo1960’s picture

ludo1960 commented

do this:

C.
drupal_root
---sites
------all
---------themes
------------pixture_reloaded
---------------views
------------------views-view-grid.tpl.php

------------------css (for views-related css files - override css files only) ///you dont need this !!!!!!

bg1’s picture

bg1 commented

OK I copied my modified template views-view-grid--viewb.tpl.php (not views-view-grid.tpl.php because I only want my changes to pertain to this one view) into the folder position as per description below.

drupal_root
---sites
------all
---------themes
------------pixture_reloaded
---------------views
------------------views-view-grid.tpl.php (not this file)
------------------views-view-grid--viewb.tpl.php (this file)

However, when I click Rescan template files button, it still only recognizes the original views-view-grid.tpl.php.

How would Drupal know to look in the folder under the main themes folder (given that it is currently looking in the drupal_root/modules/views/theme folder?)

Also, I am confused about where to put the css files (this is a separate question). Currently, the css file that is affecting my display is in drupal_root/modules/views/css folder. (File name = views.css).

In that file I have the following code:
. views-view-grid td {
some styling
}

Do I simply add the following below that:
. views-view-grid--viewb td {
some styling
}

Thanks for your help.

ludo1960’s picture

ludo1960 commented

When you click Theme information in the view, copy and paste the bit with the grid view in it here.

bg1’s picture

bg1 commented

Thanks guys for continuing to help.

This is the cut and paste from the Theme Information:

# Style output: views-view-grid.tpl.php, views-view-grid--salesreplist.tpl.php, views-view-grid--page.tpl.php, views-view-grid--salesreplist--page.tpl.php, views-view-grid--.tpl.php, views-view-grid--page-1.tpl.php, views-view-grid--salesreplist--page-1.tpl.php

The actual name of me file is: views-view-grid--salesreplist.tpl.php (2nd choice on Theming Information).

The content of the views-view-grid--salesreplist.tpl.php file is cut and paste from the code you get when you click on Style output.

(I question whether any of the content inside that file has to be changed but I tried changing the 2 rows at the top of the file (after it was not working) from :

// $Id: views-view-grid.tpl.php,v 1.3 2008/06/14 17:42:43 merlinofchaos Exp $
/**
* @file views-view-grid.tpl.php

To

// $Id: views-view-grid--salesreplist.tpl.php,v 1.3 2008/06/14 17:42:43 merlinofchaos Exp $
/**
* @file views-view-grid--salesreplist.tpl.php

and that still did not work so I restored it to the original.

dman’s picture

dman commented

Where did you get that filename from?
You must use the suggestions that the view template info says it will recognize, not just make up names. It gives you a dozen variations, each of which represent a different type of specificity. Choose the right filename, not invented ones. The last ones in the list are the most specific.

.dan. is the New Zealand Drupal Developer working on Government Web Standards

ludo1960’s picture

ludo1960 commented

Why I asked him to copy and paste here!

ludo1960’s picture

ludo1960 commented

Plan A:

Do NOT EDIT ANY FILES!!!!!

If you have, then upload originals from the the views module

COPY VIEWS-VIEW-GRID.TPL.PHP to your theme/views folder

RENAME the file: views-view-grid--salesreplist.tpl.php

add a line at the bottom :

<?php print 'At last I have mastered it!' ; ?>

Rescan Views template files

Bingo!!!!

bg1’s picture

bg1 commented

Drupal is now recognizing the file and "at last I have mastered it" is displaying on the bottom of the page.

Now the question is where the css file goes? The new template table (since I only copied the views-view-grid.tpl.php file and did not make any changes except to add the one print line at the bottom, it has the same class names as the original views-view-grid.tpl.php file and therefore brings the same styling results.

What do I have to do to have the new template bring different results?

I can imagine that I have to rename the class names inside the new template file
e.g., change

to

and then add that class to the views.css file.

Is that correct?

ludo1960’s picture

ludo1960 commented

So now you use the css file in your theme ie change the classes in your new template to match your theme..................easy eh?

^^^^^^^^^^^^^EDIT Dont touch the views css..NEVER EVER EVER!!!!!^^^^^^^^^

bg1’s picture

bg1 commented

OK, I modified the name of the class in the view-related template and I added that class in the views.css file.

I know you said not to modify that css but it worked.

Now I want to restore the views.css to its original state and move that css code elsewhere. Where should I put the css code for the views? Should I make a new css file? Where should I put it? do I have to register it anywhere?

Thanks again for your help.

bg1’s picture

bg1 commented

I am still looking for where to put the css files for Views. Please see my other response to this comment.

Thanks for your assistance.

dman’s picture

dman commented

There are heaps of classnames you can re-use. You only need to get into theming templates if you really want to change the entire HTML structure of what you are working with.
If you choose the right CSS selectors (FIREBUG!) you can do almost everything with JUST css in your theme style.css. Just be specific.

.dan. is the New Zealand Drupal Developer working on Government Web Standards

Drupal9.9’s picture

Drupal9.9 commented

Check out these two helpfull video tutorials from Mustardseed Media, it's good.

Views Theming: http://mustardseedmedia.com/podcast/episode23

Views Row Theming: http://mustardseedmedia.com/podcast/episode30

bg1’s picture

bg1 commented

The videos were helpful, but I don't see from this how I should style an image to dynamically control its size.

The image is an image field in CCK content type. The uploaded files are of a variety of sizes. I want to display a small version of these images (thumbnail like) in the view but don't see any way to specify the size.

Any suggestions for this would be appreciated.

Thanks.

ludo1960’s picture

ludo1960 commented

imagecache module

bg1’s picture

bg1 commented

We have imagecache module installed and enabled, but what does that do?

How do we use it or how do we know it is in use?

ludo1960’s picture

ludo1960 commented

This thread was titled "Simple How-To Example for Theming a View"

You have had that explained in detail, read the help files that come with the imagecache module, Then if you have problems start a new thread detailing your problems. The imagecache module does what you asked for ie thumbnails! RTFM!

bg1’s picture

bg1 commented

One of the video tutorials that were recommended showed images and that took me down this path, but I agree it would be better in a new topic (if warranted - I did a search first and had not found anything I could follow, but had not looked at the documentation - looking at that now).

Thanks again for your help.