Remove image border in gallery

[tempsave]

Hi people,

First of all: Suffusion is awesomeness incarnated, but you know that already.
Second: I'm trying to make my gallery look nice and sleek, and I want to remove the grey borders around and distance between images (vertical distance, too) in the gallery.

I'm a dummy when it comes to these things, so I prefer not to use heavy gallery plugins with hundreds of options. I'd be okay with editing some stylesheets though. Don't know if there's an easier way to get around this with templates or something. I don't know anything about that, but I'm using pages - not posts - for my galleries.

Take a look: http://lukashausler.com/photo/

Also, I'd like to have the margins at the top and bottom of the page to have the same measurements as the margins on the sides.

I'm very thankful for help.

Peace,

[Colin]

You can get rid of the grey borders with

Code: Select all

#gallery-1 img {border:none;}


Mimimise the borders with

Code: Select all

.post, div.page {padding: 5px;}


This one may make your other pages look a bit odd though.

Put this code in Suffusion Options > Back-end > Custom Includes > Custom Styles

[tempsave]

Thank you!
It didn't work though. Should the first really be in the custom styles box?

[drake]

Should be, that is the id of your gallery. Try in this way:

Code: Select all

#gallery-1 img {border: none !important;}

Or, for all galleries for now or in the future:

Code: Select all

.gallery img {border:none !important;}

Add one of the above codes AT THE BOTTOM of Custom Styles area.

[tempsave]

WAAH! Worked. You're my HERO!
Now, can I also remove the space between the rows? And how about shortening the distance at the top and bottom of the post backround? Would like to make it correspond with the space on the sides

[drake]

To get rid of space between pictures add this AT THE BOTTOM of Custom Styles:

Code: Select all

dl.gallery-item {margin:0;}

Then, for the top and bottom distance add this

Code: Select all

.post, div.page {
padding-top:10px !important;
margin-top:0 !important;
padding-bottom:0 !important;
}
.entry {padding-top:0;margin-top:0;padding-bottom:0;margin-bottom:0;}

[tempsave]

Awesome. This one didn't work though:

Code: Select all

dl.gallery-item {margin:0;}

[drake]

as in previous codes try to add an !important; directive:

Code: Select all

dl.gallery-item {margin:0 !important;}

Edit:
Add also:

Code: Select all

.gallery-item {margin-top:0;}

[tempsave]

Yep. Perfection. You're my hero. Will you MARRY me?!

Take a look: http://lukashausler.com/photo/

[tempsave]

Just one thing: the margin between the rows still shows in firefox, at least for me. Do you know why that could be?