WordPress has it’s own default image styling and layouts which are common with every WP theme. These are:
- Align left
- Align center
- Align right
- Align none
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
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>
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 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.