WordPress.org

1. lauradrouven
   Member
   Posted 2 years ago #

   Hi,

   I use the fancy box gallery: http://laura.drouven.nl/?p=89

   I would like to have some space between the thumbnails and a border around them.

   Could anyone tell me how to do this?

   Thanks a lot!

2. Mark / t31os
   Moderator
   Posted 2 years ago #

   Add something like..
   

   a.fancybox img { border:1px solid #000; margin:2px 2px 0 0; }

   ..to your stylesheet.

   Larger border or margins will result in 3 images per row ..

3. Empireoflight
   Member
   Posted 2 years ago #

   Edit the style.css file in your theme folder as follows—add this line of code:
   .attachment-thumbnail {padding:5px;border:2px solid #ccc}
   Customize padding, border width and border color values to your liking. HTH

4. Mark / t31os
   Moderator
   Posted 2 years ago #

   You ideally shouldn't use padding, the box model for browsers differ, some browsers will include padding in the total width of an element, others won't, giving you inconsistent display across browsers, margins don't have that problem.

   Previous suggested code could just as easily be..
   

   a.fancybox img.attachment-thumbnail { border:1px solid #000; margin:2px 2px 0 0; }

   I'd be inclined to include the fancy box class as part of the definition since it was brought up by the poster, else you're targetting all attachment thumbnails.

5. lauradrouven
   Member
   Posted 2 years ago #

   Thanks a lot for your fast reply. I have edit my style.css file with the code:

   a.fancybox img.attachment-thumbnail { border:1px solid #000; margin:2px 2px 0 0; }

   and I tried

   a.fancybox img { border:1px solid #000; margin:2px 2px 0 0; }

   But it doesn't work :-(

   So I removed the code again. Any other suggestions?

   I am not really familiar with css or php. So maybe a strange question but does it matter where you put it within the style.css?

   Thanks!

6. Mark / t31os
   Moderator
   Posted 2 years ago #

   If you're placing it at the bottom of the stylesheet already, try this instead.
   

   a.fancybox img.attachment-thumbnail { border:1px solid #000!important; margin:2px 2px 0 0!important; }

   ..else just move the code to the bottom.

   Bottom most rules usually apply, but there is an ordering scheme to what rules win out, ID's for example have a higher priority then classes (iirc). I can't remember specifics or which wins out in the various cases, but "generally" the bottom most rule applies.

7. lauradrouven
   Member
   Posted 2 years ago #

   Thanks for your help again. I used

   a.fancybox img.attachment-thumbnail { border:1px solid #000; margin:2px 2px 0 0; }

   at the style sheet of the fancybox plugin and it worked. First, I only tried it at my normal style.css file of my theme.

   Thanks!!

8. Empireoflight
   Member
   Posted 2 years ago #

   t31-thx for the padding v. margin points, I'll keep them in mind!

Topic Closed

This topic has been closed to new replies.