Remove image border in gallery

General questions pertaining to how certain issues can be resolved
Forum rules
1. No offensive language and no mocking
2. Please do a thorough search before you post something. Trust us, there is a high probability that the question you are asking has been asked previously.
3. No soliciting. You cannot post here soliciting bids for people offer you quotes, or even offer money to people for some work. You will be moderated if you do so. If you are looking for help, please post your request on http://jobs.wordpress.net or http://codepoet.com
4. Please be reasonable. You are getting software and support. For free. Complicated requests from a general purpose theme are not welcome and some volunteers might lose patience with you.
5. Please do your due diligence. If you posted a query and we answered with a link, take the trouble to go through the link contents.
6. Please post with complete information. Requests for help MUST be accompanied with your URL, particularly if you are asking something like "Why am I seeing a blank space?"

Remove image border in gallery

Postby tempsave » 01 Mar 2012, 07:46

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,
tempsave
 
Posts: 45
Joined: 01 Mar 2012, 07:34

Re: Remove image border in gallery

Postby Colin » 01 Mar 2012, 08:06

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
Colin
 
Posts: 4958
Joined: 27 Oct 2009, 10:46

Re: Remove image border in gallery

Postby tempsave » 03 Mar 2012, 04:01

Thank you!
It didn't work though. Should the first really be in the custom styles box?
tempsave
 
Posts: 45
Joined: 01 Mar 2012, 07:34

Re: Remove image border in gallery

Postby drake » 03 Mar 2012, 04:07

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.
drake
 
Posts: 6201
Joined: 26 Jul 2011, 07:56
Location: Constanta, Romania

Re: Remove image border in gallery

Postby tempsave » 03 Mar 2012, 06:13

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
tempsave
 
Posts: 45
Joined: 01 Mar 2012, 07:34

Re: Remove image border in gallery

Postby drake » 03 Mar 2012, 06:33

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;}
drake
 
Posts: 6201
Joined: 26 Jul 2011, 07:56
Location: Constanta, Romania

Re: Remove image border in gallery

Postby tempsave » 03 Mar 2012, 08:03

Awesome. This one didn't work though:

Code: Select all
dl.gallery-item {margin:0;}
tempsave
 
Posts: 45
Joined: 01 Mar 2012, 07:34

Re: Remove image border in gallery

Postby drake » 03 Mar 2012, 08:40

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;}
drake
 
Posts: 6201
Joined: 26 Jul 2011, 07:56
Location: Constanta, Romania

Re: Remove image border in gallery

Postby tempsave » 03 Mar 2012, 12:47

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

Take a look: http://lukashausler.com/photo/
tempsave
 
Posts: 45
Joined: 01 Mar 2012, 07:34

Re: Remove image border in gallery

Postby tempsave » 04 Mar 2012, 02:33

Just one thing: the margin between the rows still shows in firefox, at least for me. Do you know why that could be?
tempsave
 
Posts: 45
Joined: 01 Mar 2012, 07:34

Next

Return to Support Requests

Who is online

Users browsing this forum: No registered users and 2 guests