Menu

Designed for the images inside the articles or custom type HTML Joomla! modules, the image styles can be used to create new layout alignments, borders, shadows and shapes such as rounded or circle.

Image Shadow

Demo Image

Use this style by inserting the following code into your text editor:

<img class="favth-img-shadow">

Image Circle

Demo Image

Use this style by inserting the following code into your text editor:

<img class="favth-img-circle">

Image Polaroid + light

Demo Image

The image polaroid style adapts for every background type:

<img class="favth-img-polaroid">

Image Polaroid + clear/dark

Demo Image

The image polaroid style adapts for every background type:

<img class="favth-img-polaroid">

Image Polaroid + color

Demo Image

The image polaroid style adapts for every background type:

<img class="favth-img-polaroid">

Alignment for images

Each image style can be further customized with additional alignment styles:

Image Left

Demo Image

Lorem ipsum dolor sit amet adipiscing elit, sed do eiusmod tempor incididunt otam rem aperiam beatae vitae dicta ut labore et dolore magna aliqua.

Use this style to align the images inside the modules or articles to the left. Insert the following code into your text editor:

<img class="favth-img-left">

Image Center

Demo Image

Use this style to center the images inside the modules or articles. Insert the following code into your text editor:

<img class="favth-img-center">

Image Right

Demo Image

Lorem ipsum dolor sit amet adipiscing elit, sed do eiusmod tempor incididunt otam rem aperiam beatae vitae dicta ut labore et dolore magna aliqua.

Use this style to align the images inside the modules or articles to the right. Insert the following code into your text editor:

<img class="favth-img-right">

Multiple Image Styles

The preset image styles can be combined in multiple ways to create a more complex style for the same image, for example:

Image Left Polaroid Rounded

Demo Image

Lorem ipsum dolor sit amet adipiscing elit, sed do eiusmod tempor incididunt otam rem aperiam beatae vitae dicta ut labore et dolore magna aliqua.

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

Use this style to align the images inside the modules or articles to the left, with polaroid style frame and rounded corners.

To use it just type the following code in your text editor. Make sure the code is added in the HTML mode:

<img class="favth-img-left favth-img-polaroid favth-img-rounded">

Image Right Shadow Circle

Demo Image

Lorem ipsum dolor sit amet adipiscing elit, sed do eiusmod tempor incididunt otam rem aperiam beatae vitae dicta ut labore et dolore magna aliqua.

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

Use this style to align the images to the right with shadow style frame and circle shape.

To use it just type the following code in your text editor. Make sure the code is added in the HTML mode.

<img class="favth-img-right favth-img-shadow favth-img-circle">
To use one or more image style, insert the code from the examples into your text editor. Make sure the code is added in the HTML mode by pressing the Toggle editor button.