By theboxinghistorian on

Over this past week i have been focusing my attentions on one of the most common modules, VIEWS. In gaining a good understanding as to how the module works and its benefits, however as a designer crossing over from Dreamweaver im used to CSS and its ultimate influence on the look of your page.

With views is there any way i can gain more control over the actual look of my views, are there other modules out there that will help wile designing the look of my views. If so what are they?

Comments

ezeedub’s picture

ezeedub commented

At one level, the answer to your question is more Drupal-specific than Views-specific. Drupal comes with a very robust theming layer that allows you to control the look (and layout) of your site's content (including views) in a few ways. All of this together is referred to as "theming" Drupal, and there's a guide here.

For example, Views outputs CSS hooks within the markup that you can then write rules for in your site's theme's main CSS file. Where is this file? There's more than one answer depending on your setup. Have a look at the guide to get a better overview of the theming layer, and then feel free to ask more questions here.

Since you asked about modules, you might also like to look at the Semantic Views module for how to create slightly cleaner markup in the first place, but that's not really necessary to accomplish what you're core question is about...

theboxinghistorian’s picture

theboxinghistorian commented

thank you

waltercat’s picture

waltercat commented

I am trying to custom edit views for a table with CSS and am having problems as well.

I have a table header with a class (when I view in firebug) of

I want to alter the css for the above class. For example I want to make the background black.

What would the css look like if I wanted to make the background black?

Also, which css file would I alter to make this change? I am using acquia prosper theme. Which if these would I make the edit to?

local.css
gray.css
style.css

Thanks!

schnelle02’s picture

schnelle02 commented

It's pretty simple really. Find what class the table header is printed under, lets just say it is 

<div id="header>

To see if there is any pre-existing styles use the find command on each of your three .css text files. Since it's an ID in my example ctrl+f (find) then search '#header'. It will probably find something in one of the text files, if not, add it yourself and style as desired.

Remember that it is possible it will change the style on other tables, if that is the case you may want to add the ID or head above it. For example:

<div id="page1">
<div id="header">
</div>
</div>

then use the style '#page1 #header'

EDIT: the syntax for making an id and class have a black background is

#header {
background-color: black;
}
.header {
background-color: black;
}

waltercat’s picture

waltercat commented

Thanks, I appreciate your example, but I am having a difficult time translating it to my situation (sorry newbie css guy). Also, I realized i didn't wrap my code in the code tag so you had no reference to what I am trying to do exactly. I have a table header displaying like this when I look at it in firebug:

<thead>
    <tr>
              <th class="views-field views-field-field-blog-image-fid">
                  </th>
          </tr>
  </thead>

I have found the th style in my gray.css file.

However when I create a th class like this, nothing happens:

th.views-field views-field-field-blog-image-fid {
  background: #000000;
}

I'm sure something is just wrong, I'm just not sure what.

ezeedub’s picture

ezeedub commented

Seems your missing a class or id selector (.views-field-field-blog-image-fid or #views-field-field-blog-image-fid). You might also try the more specific background-color in your rule.

th.views-field .views-field-field-blog-image-fid {
  background-color: #000000;
}
just_fixed_it’s picture

just_fixed_it commented

Maybe have a look at *.tpl.php files, in particular for fields. You put them in your theme folder, clear the cache and Drupal picks them up and uses them to display your view. You can do whatever you want in there.

field4000’s picture

field4000 commented

You may also want to check out the contemplate module. You can style the output of the view any way you like.

http://drupal.org/project/contemplate