Edit gallery margins?

Okay, I’ve found the following info at https://media.wiley.com/assets/1531/35/BonusChapter.pdf

4. You can change the order of appearance of the images in the gallery,
as well as the markup (HTML tags or CSS selectors).

? captiontag: Change the markup that surrounds the image caption
by altering the gallery short code to something like this:
[gallery captiontag=”div”]. This places <div> .. </div>
tags around the image caption. Or use [gallery captiontag=”
p”] to place <p class=”gallery-caption”>…</p>
tags around the image caption. The default markup for the captiontag
option is dd.

? icontag: Change the markup around the icontag (thumbnail
icon) of the image by altering the gallery short code to something
like this: [gallery icontag=”p”]. It places <p
class=”gallery-icon”>…</p> tags around each thumbnail
icon. The default markup for icontag is dt.

? itemtag: Change the markup around the itemtag (each item) in
the gallery by altering the gallery short code to something like
this: [gallery itemtag=”span”]. This places <span
class=”gallery-item”>…</span> tags around each item in
the gallery. The default markup for the itemtag is dl.

? orderby: Change the order used to display the thumbnails in the
gallery by altering the gallery short code to something like this:
[gallery orderby=”menu_order ASC”]. The thumbnails are
displayed in ascending menu order. Another parameter you can
use here is ID_order ASC, which displays the thumbnails in
ascending order according to their IDs.

22 Discovering What’s New in WordPress 2.5
Table BC-2 Gallery Short Codes
Example Output

[gallery columns=”4” A four-column gallery containing
size=”medium”] medium-sized images.

[gallery columns=”10” A ten-column gallery containing
id=”215” size=”thumbnail”] thumbnail images pulled from the blog
post with the ID of 215.

[gallery captiontag=”p” A three-column (default) gallery where
icontag=”span”] each image is surrounded by
<span>…</span> tags.

You can define the style of the span tags in your CSS stylesheet if you have a little knowledge of CSS. For example:

span.gallery-icon img {
padding: 3px;
background: white;
border: 1px solid black;
margin: 0 5px;
}

Placing this CSS in the stylesheet of your active theme automatically inserts a one-pixel black border around each thumbnail, with three pixels of padding and a white background. The left and right margins are five pixels in width, creating nice spacing between images in the gallery.

…and it does KIND OF work. If I add [gallery itemtag=”span”], it does place <span class=”gallery-item”> … </span> tags around each item/image in the gallery…

But when I attempt to use CSS (as described above), nothing changes. Nothing!

Does ANYONE know what I’m doing wrong? I’m beyond desperate!!!

When I viewed the source, I found this comment below the style tags:
<!– see gallery_shortcode() in wp-includes/media.php –>

So I changed the CSS in media.php and then it works fine. However, I don’t think that is the right way to do it. It would be overwritten with next update and I don’t want to mess with anything except my own theme.

But there should be a way to tell the gallery to use style.css instead of the style in media.php.

Anyone knows how? Perhaps something to add in functions.php?

No you don’t need to edit the media.php….

Just define the classes in your stylesheet, the media.php appends the elements with the classes for you, all you need do is add them to your stylesheet.

Like so…

div.gallery {padding:0!important}
dl.gallery-item {width:auto;padding:5px;border:1px solid #ccc;display:inline;background:#efefef;margin:0 0 5px 5px}
dd.gallery-caption {text-transform:capitalize;font-family:Georgia;font-size:14px;text-align:left;text-indent:8px}
dt.gallery-icon {margin:0;padding:0}

NOTE: I found upon testing, if using .gallery-item instead of dl.gallery-item, the CSS def’s wouldn’t correctly apply.

I use [gallery] which applies the default tags, DIV, DL, DT, and DD… as per the CSS above..

That’s a straight copy and paste of the CSS i use, so adjust it as required….

There’s no reason you need to edit core files.

This message <!-- see gallery_shortcode() in wp-includes/media.php --> is basically so if you’re reading view source it’s to indicate where to find the definitions for the gallery items, etc….

Of course you might want to add in this one to…

.gallery img {}

Will give you the opportunity to remove the default border etc from the images…

Thanks t31os!!!!
Probably wasn’t working because I was writing .gallery-item.
Anyway, I installed the plugin cleaner-gallery and that helped me as well.

Please, guide me.

I′m trying to show the image descriptions under the thumbnails. But i can′t find documentation about this.

I guess it′s under ‘captiontag’ name. But which var should i call to print it in php plugins? (i′m up to write my first plugin so to display this ‘image description’).

The CSS code of t31os works great, the only thing which I can’t remove is the default border around the thumbs.
What probably the most of us want is a plain gallery…

Anyone knows how to remove all the borders from the gallery?

Yes, to remove the borders just use
.gallery IMG{border-style:none;!important}
(will apply on all the gallery

or
.gallery-icon {border-style:none;!important}

on gallery icon

The Image itself is class
.atatchment-thumbnail

As a side-not I must say that :
1- the !important “hack” does not work on all browsers
2- I do not really understand why the gallery CSS needs to be inline style, and not linked like all the rest.