Edit a WordPress Theme to Include Photo Gallery Styles

A WordPress photo gallery is useful for anyone who needs to include a portfolio of visual design work. To make the photo gallery look the way you like, edit the stylesheet for your theme to include the gallery styles in the CSS.

1

From the Dashboard, choose Appearance→Themes→Editor and then open your CSS stylesheet.

The stylesheet is ready for editing.

2

Define the style of the <span> tags in your stylesheet.

The <span> tags create an inline element. An element contained within a <span> tag stays on the same line as the element before it; there is no line break. You need a little knowledge of CSS to alter the <span> tags. Here’s an example of what you can add to the stylesheet (style.css) for your current theme to define the style of the <span> tags:

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

Placing this bit of CSS in the stylesheet (style.css) of your active theme automatically places a 1-pixel black border around each thumbnail, with 3 pixels of padding and a white background. The left and right margins are 5 pixels wide, creating nice spacing between images in the gallery.

3

Click the Update File button to save changes to your stylesheet (style.css) template.

The photo gallery is updated. You can use gallery short codes as well. For example, suppose your web site uses the default Twenty Ten theme. You might edit the stylesheet using CSS and gallery short codes and produce the result shown.

[gallery icontag="span" size="thumbnail"]

Matt Mullenweg, a co-founder of the WordPress platform, created an extensive photo gallery by using the built-in gallery options in WordPress.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.