Join Chris Converse for an in-depth discussion in this video Modifying the gallery with CSS, part of Creating a Photo Gallery in WordPress with jQuery.
Now we're going to make some modifications to the style of the gallery with CSS. So I'm going to scroll up here a little bit. So let's switch back to the My Gallery in our theme folder. Let's come down and grab Gallery.css, and open this up in our text editor. Now, this is a black CSS document. And now, before we can create some CSS rules, we need to examine the html markup that's being generated by the Wordpress gallery. So if we switch back to your HTML file. Lets come down and right click and either inspect or do a few sources. We can come down here and we can see the HTML structure that's being generated by that gallery.
So,the gallery is an overall div with an ID of gallery 1. And i you have access to a web inspection tool, you can hover over this div and see that it highlights the entire gallery. And now if we take a minute to examine the HTML markup that outermost div we were just highlighting is actually the outermost container for the entire gallery. Inside we have the definition list with a class of gallery item and then inside of that definition list, we have a definition term element with a class of gallery icon and a definition description with a class of WP caption.
Now, I've shortened some of the HTML here but this shows us the overall structure of the HTML that's being generated. Now, if I wanted to create a CSS rule that targeted the images inside of the anchor tag, which were inside of the overall container, what I would do is, follow all of the classes and the element items all the way up to the main container. And using a period to specify classes, we would say, .gallery, then a space, then .gallery-item, space, .gallery-icon, space, a, space, img. Now this CSS rules extremely specific and we don't need to be that specific.
So what I like to do is just start with the outer most container. So dot gallery. Then target the gallery icon, then the anchor tag in the image. So this is going to be the first CSS rule that we create to change the size of our thumbnails in our gallery. So lets switch back to our text editor inside of gallery dot CSS. And let's start by typing dot gallery, space, .gallery-icon, space, A, space, img. Then, a beginning and ending bracket, and inside here, what we're going to do is set a width of 90 pixels, then a space, and then, we're going to put the important flag on here.
And we need to have the !important tag here because the HTML that's being generated by the Wordpress gallery is putting a height and width on the individual images. And since the size property on an element trumps, or overrides the CSS rule, we can use this !important flag, which means this will become more important than the height and width on the actual element. Next we are going to put height and since these are squares, we are going to put 90 pixels on that as well. Put the important flag, then a semi-colon. Now with that rule in place. Lets hit return. Next, we are going to type .gallery, space and I want to hide that caption rollover. And that's inside of a class called wp-caption-text.
Put in our beginning and ending brackets. We're going to set a display to none and put an important flag on that as well, then a semicolon. Now, with these changes in place, let's hit save. Lets switch back over to our browser. Lets hit reload. Once this reloads. We'll see the all the images are now showing at 90 by 90 pixels and if I hover over these, we don't see that caption text as a rollover's date anymore. Now the other thing I want to do is get rid of the break tags here. I'd like to have all of the thumbnails just line up and just have them re-flow when we re-size the browser.
But if you remember back to when we created the gallery, we said that we wanted 3 columns which means after every third thumbnail, we get a break tag. Now there's another CSS property that's happening inside of this particular theme which is when we have more than 4 items in a column, the sizes will start to change when it gets smaller, and we don't want the sizes of these things to change either, so let's go back into our admin (no period) Let's go over to pages. Under My Gallery let's click edit. Let's come down to the gallery itself. Let's select it once. We'll get these two icons here. Let's click on the left icon. Let's come in here and change the columns to one.
One, two, and three will always keep the same size. But, since we're going to hide those break tags with CSS, let's come back here and set this to just one column. Lets click update gallery. Then we'll click update for the page. Come back to our WordPress site. Lets click reload. And now we'll see each thumbnail on it's own line. Lets right click. Lets either inspect or do a view source and in the inspection tool or the HTML markup, you'll see inside of the main container, we have a gallery item and then a break tag. And this alternates for every one because we set a column of one, so after every single gallery item, we're getting a break tag.
Now the break tags appear immediately after the div with the classic gallery, so let's close this, let's go back to our text editor, inside of our gallery.css, let's hit a few returns, Let's target the outer most gallery container. Then we're going to hit a space. Then we're going to put a great than sign. Then a space. Then a br. So what this means in CSS is that every break tag that is an immediate child of the gallery container is going to be trageted. This way is we have any break tags that are inside of captions, let's say This particular rule won't affect those.
It'll only affect the breaks that are immediately following the gallery class. Let's put our beginning and ending bracket. Let's add a display of none. With that rule in place, let's hit Save. Let's switch back over to our browser. Let's hit Reload. And now we'll see all of the break tags have a display set to none, which means all the thumbnails can now line up. Now let's adjust the spacing, let's switch back to our text editor inside of gallery.css, let's hit a few returns, let's type .gallery space .gallery-item.
Put in our brackets. Let's type in margin. Then a space. We're going to use shorthand style here. First property is top. We're going to set top to 0 pixels. 5 pixels on the right. 5 pixels on the bottom. 0 pixels on the left. Use our important flag. Then a semicolon. Lets hit save. Lets switch back to our browser. Lets hit reload. I'll have a 5 pixel margin on the right in the bottom of all of these individual thumbnails. Now if I come over here and grab the browser and re-size this. Once we get down to our small screen size, you'll see that these all stack up again.
So, what's happening here if we do an inspection, we are coming here and see that the dl class of gallery item is being set to 100% width inside of a media query that's under 643 pixels. So, we want to override this setting as well. So, let's close our inspection tool, let's switch back to our text editor, inside of the gallery, that gallery item. Let's add a space. We're going to come in here and set width to, auto. Space. Add the important flag, then a semicolon. So the width value is always going to be auto, which is targeting the gallery item, which means this item will always be as tall and as wide as the items inside.
Which is going to go back to the image tag here, which is being set to 90 by 90. With that in place let's hit save, let's switch back to our browser, let's hit reload. And now we'll see all of the icons will line up again and these will start refloat now based on the size of the web browser. So now that we have basic CSS rules in here that override the default behavior and design of the gallery built into Wordpress Next we're going to activate these hyperlinks so that when we click these, instead of going to the actual JPEG file, we're going to load these into a lightbox instead.