How to use the custom image styles

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 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" ...

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" ...

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" ...

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.

Go to flat-responsive-package >> HTML Snippets
Browse for custom-images.txt
Open this file and copy the code, or at least the class you need.

StyledThemes