Image Styles
Image Styles are designed for the images inside the articles or default HTML Joomla! modules. Use them to create new layout alignments, borders, shadows and shapes such as rounded or circle.
To use one or more image style just type the code from the examples below in your text editor. Make sure the code is added in the HTML mode by pressing the Toggle Editor button.
<img class="img-left">
Image Left
Use this style to align the images inside the modules or articles to the left.
To use it just type the following code in your text editor. Make sure the code is added in the HTML mode.
<img class="img-left">
Image Polaroid
Use this style for the images inside the modules or articles.
To use it just type the following code in your text editor. Make sure the code is added in the HTML mode.
<img class="img-polaroid">
Image Rounded
Use this style for the images inside the modules or articles.
To use it just type the following code in your text editor. Make sure the code is added in the HTML mode.
<img class="img-rounded">
Image Right
Use this style to align the images inside the modules or articles to the right.
To use it just type the following code in your text editor. Make sure the code is added in the HTML mode.
<img class="img-right">
Image Shadow
Use this style for the images inside the modules or articles.
To use it just type the following code in your text editor. Make sure the code is added in the HTML mode.
<img class="img-shadow">
Image Circle
Use this style for the images inside the modules or articles.
To use it just type the following code in your text editor. Make sure the code is added in the HTML mode.
<img class="img-circle">
Polaroid Clear Style
<img class="img-polaroid-clear">
Polaroid Dark Style
<img class="img-polaroid-dark">
Polaroid Color Style
<img class="img-polaroid-color">
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 Center
Use this style to center the images inside the modules or articles. To use it just type the following code in your text editor and make sure the code is added in the HTML mode by pressing the Toggle Editor button:
<img class="img-center">
Image Left Polaroid Rounded
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="img-left img-polaroid img-rounded">
Image Right Shadow Circle
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="img-right img-shadow img-circle">