Criss Cross Image Styling » Captions, Frames and Image Alignment post image

Criss Cross Image Styling » Captions, Frames and Image Alignment

Using images in your WordPress posts & pages without a little style is kind-of bland and boring. Thankfully, the Thesis framework, along with WordPress include a few design features to spruce up those otherwise plain-looking graphics & images.

There are four different image alignments included with the Thesis framework. These are: 1) Flush left » no text wrap 2) Centered 3) Left with text wrap 4) Right with text wrap.

Frames and captions can also be added to images by implementing a few simple classes within your HTML. This post covers each of these features.

Basic Image – Un-styled

St. Paul Skyline

Images with Caption »

Image with a Thesis styled caption. To implement this type of caption, simply use the code displayed below the image:

Sadie

This is a special type of caption included with Thesis. Photo of my dog Sadie.

To create a caption like the one above, use this code:

<p class="caption">My awesome photo caption, woohoo!</p>

You can also use the WordPress image caption styles. This will create a frame around your image with the caption included inside the frame,  below the photo.

Sadie

This is a WordPress styled caption. Photo of my dog Sadie.

Image Frames »

To create a frame around your images without using a caption you can use the frame class within your image tags. Below is an image, center-aligned with a frame:

Sadie Two

Right & Left Aligned »

Finally, images can be aligned to the right or left and wrapped with paragraph text. You can see examples of each alignment below:

Thesis Lab OneLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Thesis Lab OneLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

• Meet the Author • Thomas


Hey, I'm Tom, glad you stopped by my site! Thesis Laboratory is my little spot to share website skins & boxes I develop on the Thesis framework for WordPress. If you would like to get in touch with me, check out my social profiles below:


Ready to Grab the Criss Cross Skin?

Thesis WordPressThere is no doubt Criss Cross will help you create exactly the type of website you desire. At the introductory price of only $27 you can own the skin and use it on as many websites as you like.

Updates are free for life and your purchase also includes full access to the support forums & Thesis Laboratory community. The price wont be $27 for long so don't hesitate, Grab Criss Cross Now!

1 comment… add one

Don’t Be Shy » Leave a Comment!