By jtjones23 on

Hi,

I've got some thumbnail images in a Views 2 Grid view and I can't figure out how to make space between the images. Is there a setting in the Views UI or do I have to theme the grid view?

⋅ Categories: Drupal 6.x

Comments

WorldFallz’s picture

WorldFallz commented

for just some spacing you should be able to do this with a little padding in the css.

===
"Give a man a fish and you feed him for a day.
Teach a man to fish and you feed him for a lifetime." -- Lao Tzu
"God helps those who help themselves." -- Benjamin Franklin
"Search is your best friend." -- Worldfallz

jtjones23’s picture

jtjones23 commented

thanks, for anyone else trying to do this, I added padding to ".views-view-grid td" in the views.css file.

notarealperson’s picture

notarealperson commented

FYI, it would be preferable to make the change in your style.css file to override the views.css file. That way, when you upgrade Views 2 in the future, you won't have to go in again and make the change to the views.css file again.

joecanti’s picture

joecanti commented

hi Jimi089,
Whats the best way to do this? How do you override module css in the style.css file?

Thanks, joe

mcfilms’s picture

mcfilms commented

Just cut it out of the views css and paste it into your theme's style.css. This is the last one in line and will over-ride the module's css.

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

joecanti’s picture

joecanti commented

thanks, i'll give it a try!

joe

Adam S’s picture

Adam S commented

Are you using firebug for firefox? It works like a sandbox where you can add your css it test how it looks to the DOM in the browser. If you like it you can just copy the selectors into the end of you style.css file.

The way you override css is by putting the same selector last. For example, in the begging of style.css is 

/* 1 column */
#center {
  margin: 0 0 10px;
  position: relative;
}

you can just copy it and put in at the end

/* 1 column */
#center {
  margin: 40px 1000em 10px;
}

Whatever the last one is, is what the browser uses to theme the page. You can see here that the position is still relative but the padding has been distorted.

Another thing to keep in mind that the C in CSS stands for cascading so the rules you set for the style get cascaded through. It goes from least to most specific. So if you put #center .something img {float: left;} at the end and there is a more specific #center .something .something-else img {float: right;} expression before it, don't think that yours will override it. The one before is more specific and takes precedence.

At least I think it works that way. I just use firebug to fix it in the browser then copy and paste it to the end of the style.css making sure to comment it and use descriptive selectors.