Custom image styles

June 21, 2014| Sushil Adhikari

By default, your images inserted into posts and pages have no styling. However, Preferential does include some custom styles you can apply to your images which give you a choice of:

  • Image Bar – The class for this is: class=”pref-img-bar”
  • Image Border – The class for this is: class=”pref-img-border”
  • Rounded Image – The class for this is: class=”pref-img-round”

To give you a better idea of what styles you get and how they look, you can check out the live demo site here:

Image Styles

Adding a Bar Style

This style adds a bottom border (bar) to your image:

pref-image-bar

When you insert an image, switch to the “Text” tab of your editor so that you will see the HTML image tag like this example:

<img src="image-path" alt="short description" width="300" height="200" />

We need to add a class to our image tag to first apply the custom style: pref-img-bar

<img class="pref-img-bar" src="image-path" alt="short description" width="300" height="200" />

Adding Colour

You can also add colour to your bar style by adding another class to your image tag, such as grey: border-grey

<img class="pref-img-bar border-grey" src="image-path" alt="short description" width="300" height="200" />

You can add the following colours:

  • grey
  • darkblue
  • blue
  • lightblue
  • orange
  • green
  • red
  • brown
  • custom

Adding a Border Style

This style adds a border around your image:

pref-image-border

When you insert an image, switch to the “Text” tab of your editor so that you will see the HTML image tag like this example:

<img src="image-path" alt="short description" width="300" height="200" />

We need to add a class to our image tag to first apply the custom style: pref-img-border

<img class="pref-img-border" src="image-path" alt="short description" width="300" height="200" />

Adding a Round Style

This style changes your image into a circle and adds an outer border to it:

pref-image-round

Before you insert an image into your post or page, this particular style required a squared image with equal width and height dimensions. For example, a 300×300 pixel image is ideal because this style gives you a perfect circle (round). If you had a 300×200 image, then your image will have an oval shape to it. Some people may want that which is your choice of course.

When you insert an image, switch to the “Text” tab of your editor so that you will see the HTML image tag like this example:

<img src="image-path" alt="short description" width="300" height="200" />

We need to add a class to our image tag to first apply the custom style: pref-img-round

<img class="pref-img-round" src="image-path" alt="short description" width="300" height="300" />

Screencast – Image Styles

 

Categories: Setup Tutorials for Preferential

Leave a Reply

Black Friday Sale - 50% Off Discount on ALL PRO THEMES AND MEMBERSHIPS Use discount code BFRI2020