Styling your images with shadows

When you see the demo site for the Zen Theme, you will notice the images in posts and pages do not have the typical bordered styling that most are commonly using. I decided to go a bit different with a bottom shadow, but this style requires one extra step by you when inserting images into the post or page and will then give you the following result:


When you insert an image, you generally select your alignment like, left align, center align, and right align, and then you click Insert. This will also depend on the image editor you are using in Joomla (I strongly recommend you use the JCE editor). 

As you can see by the demo image from the Zen Theme, I aligned the image for the post with “aligncenter” and then added some extra styles. In the sample here with an image being 640 pixels wide, there is one more class you will need to add to any image you add into your post or page, it will be this: shadow640 ….the result will be a complete class group like this:

<img class="aligncenter shadow640" alt="zen-orange-flower" src="/joomla/zen//wp-content/uploads/zen-orange-flower.jpg" height="180" width="640"> 

When adding the “shadow640” or any of the other shadow classes to your <img src> html code, I would recommend adding it right after <img

Keeping Consistent Image Sizes

Any website with a consistent flow of content and media (video and images) will help you look more professional and just gives an overall visual appearance of organization and a much cleaner look. Zen Theme has several image sizes you can use when you begin to add content (although this works best if it’s a new website). 

In Zen, there are two groups of sizes and will depend on where you are publishing your photos. For a Visual Reference, you can view the online demo for Zen Theme.

Blog & Page Image Styling for the Mainbody Content Area

The following sizes and styles are associated with full width images for both the Blog and Page layouts:

  • Full Width = 940 pixels with a class of: shadow940
  • Left Column + Mainbody content = 700 pixels with a class of shadow700
  • Mainbody + Right Column = 640 pixels with a class of shadow640
  • Mainbody content + Inset Column + Right Column = 400 pixels with a class of shadow400

Blog & Page Image Styling for the Side Columns

  • Right Colum = 280 pixels with a class of shadow280
  • Left Column = 180 pixels with a class of shadow180
  • Inset Column = 180 pixels with a class of shadow180

Bottom Modules with Image Styling

  • One Column (full width) = 940 pixels with a class of shadow940
  • Two Columns = 460 pixels with a class of shadow460
  • Three Columns = 288 pixels with a class of shadow288
  • Four Columns = 205 pixels with a class of shadow205
By | 2011-02-11T04:53:37+00:00 February 11th, 2011|Blog|0 Comments

About the Author:

Leave a Reply