Page 1 of 3

Remove image border in gallery

PostPosted: 01 Mar 2012, 07:46
by 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,

Re: Remove image border in gallery

PostPosted: 01 Mar 2012, 08:06
by 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

Re: Remove image border in gallery

PostPosted: 03 Mar 2012, 04:01
by tempsave
Thank you!
It didn't work though. Should the first really be in the custom styles box?

Re: Remove image border in gallery

PostPosted: 03 Mar 2012, 04:07
by 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.

Re: Remove image border in gallery

PostPosted: 03 Mar 2012, 06:13
by 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

Re: Remove image border in gallery

PostPosted: 03 Mar 2012, 06:33
by 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;}

Re: Remove image border in gallery

PostPosted: 03 Mar 2012, 08:03
by tempsave
Awesome. This one didn't work though:

Code: Select all
dl.gallery-item {margin:0;}

Re: Remove image border in gallery

PostPosted: 03 Mar 2012, 08:40
by 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;}

Re: Remove image border in gallery

PostPosted: 03 Mar 2012, 12:47
by tempsave
Yep. Perfection. You're my hero. Will you MARRY me?!

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

Re: Remove image border in gallery

PostPosted: 04 Mar 2012, 02:33
by tempsave
Just one thing: the margin between the rows still shows in firefox, at least for me. Do you know why that could be?