How to use the custom image styles

February 22, 2014| Sushil Adhikari

WordPress has it’s own default image styling and layouts which are common with every WP theme. These are:

  • Align left alignleft
  • Align center aligncenter
  • Align right alignright
  • Align none alignnone

Depending on the theme, usually the common styling is a border around the image, but Circumference extends the styling concept to give you a little more in addition to the basic alignments that you see listed above. With Circumference, you get the additional styles inlcuded

Attention:

Because these image styles use CSS3, some browsers may not recognize the style attributes applied. IE8 will be one browser that will ignore these styles. Instead of circles, you will get the squared image style.

Offset Style

Offset is probably the more complicated style bcause of how it gets created in your page or post because it will require some code adjustments. However, we helped you out with a predefined snippet of code that gets you started so all you need to do is change the values. The image is also square where CSS transforms it into a circle for both the image and the colour offset background that you see. You can also have different sizes for your images. To achieve this result, you have some code to copy and paste:

<div class="fr-offsetbox"><img class="fr-offset" alt="custom-image" src="path-to-your-image.jpg" width="300" height="300" /></div>

offset-image

Offset is a Beta style

When using this image style, please note this is a beta style because of its unusual design concept. Try it out and if it works well for everyone, it will be kept as an option. For alignment, assign the class to the <div> container, not the image.

Circle Style

With the circle style, CSS will automatically transform your image into a circle and apply a grey border around it as you see the screenshot below. You can have any size of image for this, plus you can align your image using the default WP alignment options. To use this style, add the following class to your image tag like this:

<img class="fr-circle" ...

circle-style

Thumbnail Style

Thumbnail styling of images is probably the most common next to an image without styling. This one applies a background colour with an outer border around your image. You can also align your image using the default WP alignment styles. To use this style, add the following class to your image tag like this:

<img class="fr-thumbnail" ...

thumbnail-style

Black & White with Colour 

By default, this is setup where your image is black & white until you hover over the image which then becomes coloured (see the screenshot below). You can modify the CSS if you prefer by reversing it so that the image starts off as coloured and then on hover becomes black & white. When hovering, the transition has a slight animation effect as it changes. To use this style, add the following class to your image tag like this:

<img class="fr-bw" ...

blackwhite-style

Get Image Styles

In addition to this page, you can obtain image styling code from the HTML Snippets folder in your original pure-simple-package download.

  1. Go to flat-responsive-package >> HTML Snippets
  2. Browse for custom-images.txt
  3. Open this file and copy the code, or at least the class you need.
Categories: Setup Tutorials for Flat Responsive

Leave a Reply