Complete Image Styles

What is it?

Complete Image Styles is a Joomla plugin that provides a full collection of styles for images.

Now, you can make your images much more attractive by applying to them many styles. Complete Image Styles brings together all the standard and new styles that appeared with the growth of CSS. Styles like border, shadow, rounded corners, frame, shake, polaroid, embossed, perspective, lifted corners, raised box, cutout, glowing, reflection, curves, captions, transform and others can be applied alone or in combination.

In order to style an image you can use the predefined themes, you can modify them according to your needs or create a custom theme from scratch. Your themes will be saved in the plugin and can be reused easily to any existing or future image in your website.

Complete Image Styles uses only CSS and Javascript (jQuery) to apply the styles. No special and transparent images are needed. Of course, the styled images can be links.

No coding skills are required. Only the plugin and a good content editor like JCE Editor or ARK Editor. So, wherever you have access to the editor (all articles and all modules) you can apply easily the styles. Developers who have knowledge of CSS can apply the styles to images of other Joomla extensions (like VirtueMart, Phoca Gallery etc.) if the code of the extension allows that.

New Features

Complete Image Styles plugin has many new features.

Responsive. Responsive images will remain responsive with the styles.
Use of jQuery for better compatibility with the new versions of Joomla.
Ready made styles (themes) for faster and easier use.
Improved administration with explanatory images.
Usability escalation. User has three options:
1. Use the ready made styles (novice level).
2. Modify the ready made styles (intermediate level).
3. Create custom styles from scratch (higher level).

Demo of Complete Image Styles
Buy Complete Image Styles
Documentation of Complete Image Styles
Technical Information of Complete Image Styles
Change Log of Complete Image Styles

The buttons below will redirect you to another website displaying demos of the extension.

Demo 1 Demo 2 Demo 3 Demo 4 Demo 5

You don't have any active subscription.

Complete Image Styles
Select this subscription in order to download Complete Image Styles.
16€ 6 months of access to download. Unlimited installations. Support for a single website.
Buy Now

Subscription Instructions

In order to download the extension you have to subscribe to the above subscription. The subscription process requires from you:

To create an account or to login using an existing one if you already have.
To be redirected to PayPal for the payment.

After you return to this website from PayPal, you will be already logged in and you will receive an email with information about your subscription.

Being logged in with your account you will be able to download the extension a) through the page of the extension or in the 'Downloads' area or from your account by selecting 'My Downloads'.

As long as the subscription is active, you will be able to log in and download any possible updates of the extension from this website.

Download Complete Image Styles.
In the Joomla control panel select: "Extensions" > "Extension Manager".
In the Upload Package File section click Browse and locate the plugin.
Then click Upload File & Install to upload the file and complete the installation.

How To Use

Below you can read the steps for applying a style (theme) to an image of an article.

Go to the "Plug-in Manager" and click "System - Complete Image Styles" to open it.
Make the following changes to the plugin.
1. Enable the plugin.
2. Open and enable "Style 1" (second parameter of the style).
3. Go below to the "Theme" parameter and select the theme you like. Below the list you can see some live samples. Put the mouse over the images to see the motion effects where available.
4. Go above to the "Class (Simple User)" parameter and copy the word "cis-style-1".
5. Save the changes and quit the plug-in administration.
Go to an article that contains an image. Click on the image and press the correct icon in the toolbar of the editor to edit the image.
In the pop-up window go the "Advanced" tab and write "cis-style-1" in the "Classes" field. Delete any other styles that you may have applied to the image. Save the article.
Go to the front-end website and refresh the page with the specific article. (Make sure the cache is not enabled. If yes, then clear it.)

Joomla 5

In case of using Complete Image Styles in Joomla 5, please enable the plugin first and then you will be able to open the panels for the styles.

Video Tutorials

Maximize the videos and select high quality to watch them better.

Part 1: Styling the image of an article

Part 2: Modifying a theme

In this example we will see how to add an internal caption to the "Crazy" theme.

Part 3: Creating an image style from scratch

In this example we will see how to create a custom style from scratch.

Important notes:

If you change theme then any customization you have done will be lost and the next time you select the same theme you have to customize it again.
Some styles can't work together. It is better to add them one by one and check if you like the result.

Configuration

In order to configure Complete Image Styles go to the Joomla control panel and select: Extensions > Plugin Manager. Locate "System - Complete Image Styles" in the list and click it. You can see the parameters of the plugin as below:

Parameters

Complete Image Styles has the following parameters for each style:

Comment: Write a comment for the style (for example where you apply it).
Enabled: Set if the specific style is enabled or not.
Class (Simple User): The default class name for this style.
CSS Selectors (Advanced User): The css selectors (type selectors, attribute selectors, ID selectors or pseudo-classes) to apply this style seperated by commas (,). Example: div#gallery img, img.news
Border
- Normal: Enable or disable the border style. [The style will be visible all the time.]
  - Size: The size of the border in pixels.
  - Color: The color of the border. Default value: #000000
  - Opacity: The opacity of the shadow. Allowed values: All decimal values from 0 to 1. Default value: 0.7
  - Style: The style of the border.
- Hover: Enable or disable the border style. [The style will be visible when mouse is over the image.]
  - Size: The size of the border in pixels.
  - Color: The color of the border. Default value: #000000
  - Opacity: The opacity of the shadow. Allowed values: All decimal values from 0 to 1. Default value: 0.7
  - Style: The style of the border.
Cutout
- Normal: Enable or disable the cutout style. [The style will be visible all the time.]
  - Size: The size of the cutout in pixels. Default value: 5
- Hover: Enable or disable the cutout style. [The style will be visible when mouse is over the image.]
  - Size: The size of the cutout in pixels. Default value: 5
Curled Corners
- Normal: Enable or disable the curled corners style. [The style will be visible all the time.]
Double Outlined
- Normal: Enable or disable the double outlined style. [The style will be visible all the time.]
  - Inner Color: The color of the inner outline. Example: #FFFFFF
  - Inner Size: The size of the inner outline in pixels. Example: 5
  - Inner Opacity: The opacity of the inner outline. Values: 0 - 1. Example: 0.5
  - Outer Color: The color of the outer outline. Example: #000000
  - Outer Size: The size of the outer outline in pixels. Example: 1
  - Outer Opacity: The opacity of the inner outline. Values: 0 - 1. Example: 0.5
- Hover: Enable or disable the double outlined style. [The style will be visible when mouse is over the image.]
  - Inner Color: The color of the inner outline. Example: #FFFFFF
  - Inner Size: The size of the inner outline in pixels. Example: 5
  - Inner Opacity: The opacity of the inner outline. Values: 0 - 1. Example: 0.5
  - Outer Color: The color of the outer outline. Example: #000000
  - Outer Size: The size of the outer outline in pixels. Example: 1
  - Outer Opacity: The opacity of the inner outline. Values: 0 - 1. Example: 0.5
Embossed
- Normal: Enable or disable the embossed style. [The style will be visible all the time.]
- Hover: Enable or disable the embossed style. [The style will be visible when mouse is over the image.]
  - Size: The size of the emboss in pixels. Default value: 10
External Caption
- Normal: Enable or disable the external caption style. [The style will be visible all the time.]
  - Background Color: The background color. Example: #F6F6F6
  - Font Color: The font color of the caption. Example: #333333
  - Font Size: The font size of the caption in pixels. Example: 12
  - Space: The space arounf the image and the text. Example: 10
Float
- Normal: Enable or disable the float style. [The style will be visible all the time.]
  - Direction: The direction image will float.
Glowing
- Normal: Enable or disable the glowing style. [The style will be visible all the time.]
  - Size: The size of the glow in pixels. Default value: 20. Looks better on dark background.
- Hover: Enable or disable the glowing style. [The style will be visible when mouse is over the image.]
  - Size: The size of the glow in pixels. Default value: 30. Looks better on dark background.
Grayscale
- Normal: Enable or disable the grayscale style. [The style will be visible only when mouse is not over the image.]
- Hover: Enable or disable the grayscale style. [The style will be visible only when mouse is over the image.]
Horizontal Curve
- Normal: Enable or disable the horizontal curve style. [The style will be visible all the time.]
  - Size: The size of the shadow in pixels. Default value: 15
Internal Caption
- Normal: Enable or disable the internal caption style. [The style will be visible all the time.]
  - Background Color: The background color. Example: #000000
  - Font Color: The font color of the caption. Example: #FFFFFF
  - Font Size: The font size of the caption in pixels. Example: 10
  - Position: The position of the text according to the image. Values: Top, Bottom
Lifted Corners
- Normal: Enable or disable the lifted corners style. [The style will be visible all the time.]
Margin Style
- Normal: Enable or disable the margin style. [The style will be visible all the time.]
  - Top Size: The size of the top margin in pixels. (This will override the image margin defined in the editor.)
  - Right Size: The size of the right margin in pixels. (This will override the image margin defined in the editor.)
  - Bottom Size: The size of the bottom margin in pixels. (This will override the image margin defined in the editor.)
  - Left Size: The size of the left margin in pixels. (This will override the image margin defined in the editor.)
- Hover: Enable or disable the margin style. [The style will be visible when mouse is over the image.]
  - Top Size: The size of the top margin in pixels. (This will override the image margin defined in the editor.)
  - Right Size: The size of the right margin in pixels. (This will override the image margin defined in the editor.)
  - Bottom Size: The size of the bottom margin in pixels. (This will override the image margin defined in the editor.)
  - Left Size: The size of the left margin in pixels. (This will override the image margin defined in the editor.)
Opacity
- Normal: Enable or disable the opacity style. [The style will be visible all the time.]
  - Size: The amount of the opacity. Decimal 0 - 1. Default value: 0.7
- Hover: Enable or disable the opacity style. [The style will be visible when mouse is over the image.]
  - Size: The amount of the opacity. Decimal 0 - 1. Default value: 1
Perspective
- Normal: Enable or disable the perspective style. [The style will be visible all the time.]
  - Direction: The direction of the perspective.
Pop
- Normal: Enable or disable the pop style. [The style will be visible all the time.]
  - Size: The size of the pop in pixels. Default value: 8
Raised Box
- Normal: Enable or disable the raised box style. [The style will be visible all the time.]
  - Size: The size of the shadow in pixels. Default value: 15
- Hover: Enable or disable the raised box style. [The style will be visible when mouse is over the image.]
  - Size: The size of the shadow in pixels. Default value: 25
Reflection
- Normal: Enable or disable the reflection style. [The style will be visible all the time.]
  - Size: The size of the reflection in pixels. Default value: 30.
  - Color: This color must be the same with the color of the background behind the image. Default value: #FFFFFF
Rotation
- Normal: Enable or disable the rotation style. [The style will be visible all the time.]
  - Size: The size of the rotation in degrees. Positive integer for right direction, negative integer for left direction. Default value: -3
  - On Hover: Apply style when cursor is over the image.
- Hover: Enable or disable the rotation style. [The style will be visible when mouse is over the image.]
  - Size: The size of the rotation in degrees. Positive integer for right direction, negative integer for left direction. Default value: 3
  - On Hover: Apply style when cursor is over the image.
Rounded Corners
- Normal: Enable or disable the rounded corners style. [The style will be visible all the time.]
  - Size: The size in pixels of the rounded corners. Set it to zero (0) for square corners. Default value: 20
- Hover: Enable or disable the rounded corners style. [The style will be visible when mouse is over the image.]
  - Size: The size in pixels of the rounded corners. Set it to zero (0) for square corners. Default value: 30
Round Image
- Normal: Enable or disable the round image style. [The style will be visible all the time.] Images must have equal width and height to become circle and not oval.
- Hover: Enable or disable the round image style. [The style will be visible when mouse is over the image.] Images must have equal width and height to become circle and not oval.
Scale
- Normal: Enable or disable the scale style. [The style will be visible all the time.]
  - Size: The size of the scale. 1 is like 100% of the actual size. 0.5 is like 50% smaller. 1.5 is like 50% bigger. Default value: 1
- Hover: Enable or disable the scale style. [The style will be visible when mouse is over the image.]
  - Size: The size of the scale. 1 is like 100% of the actual size. 0.5 is like 50% smaller. 1.5 is like 50% bigger. Default value: 1.05
Shadow
- Normal: Enable or disable the shadow style. [The style will be visible all the time.]
  - Size: The size of the shadow in pixels. Set it to zero (0) for no shadow. Default value: 10
  - Color: The color of the shadow. Default value: #333333
  - Opacity: The opacity of the shadow. Allowed values: All decimal values from 0 to 1. Default value: 1
- Hover: Enable or disable the shadow style. [The style will be visible when mouse is over the image.]
  - Size: The size of the shadow in pixels. Set it to zero (0) for no shadow. Default value: 10
  - Color: The color of the shadow. Default value: #333333
  - Opacity: The opacity of the shadow. Allowed values: All decimal values from 0 to 1. Default value: 1
Shake
- Normal: Enable or disable the shake style. [The style will be visible all the time.]
- Hover: Enable or disable the shake style. [The style will be visible when mouse is over the image.]
Size
- Normal: Enable or disable the size style. [The style will be visible all the time.]
  - Width: The width of the image in pixels. (It will override the value defined in the editor.)
  - Height: The height of the image in pixels. (It will override the value defined in the editor.)
- Hover: Enable or disable the shadow style. [The style will be visible when mouse is over the image.]
  - Width: The width of the image in pixels. (It will override the value defined in the editor.)
  - Height: The height of the image in pixels. (It will override the value defined in the editor.)
Sliding Caption
- Normal: Enable or disable the sliding caption style. [The style will be visible all the time.]
  - Font Size: The size of the text in pixels. Default value: 11
Stretch
- Enabled: Enable or disable the stretch style. If not enabled then some part of the image may be hidden in order to retain the proportion of the natural width and height. Default value: true
SVG
- Normal: Enable or disable the SVG style. [The style will be visible all the time.]
  - Image: Select the image you like more as part of the style.
Tape
- Enabled: Enable or disable the tape style.
Tooltip
- Hover: Enable or disable the tooltip style. [The style will be visible when mouse is over the image.]
  - Font Size: The size of the text in pixels. Default value: 11
Vertical Curve
- Normal: Enable or disable the vertical curve style. [The style will be visible all the time.]
  - Size: The size of the shadow in pixels. Default value: 15
Transition
- Duration: The duration of the transition in seconds. Default value: 0.5

Automatic Update

In order to be able to easily update the extension through the update system of Joomla, you need:

Your membership ID. This can be found in the email you received with the subscription information of this extension or in your profile in this website.
An active subscription of this extension. You can see your subscriptions in your profile as well.

Having the above fullfilled, do the following:

Select "Extensions > Plugins".
Locate in the list the line with name "Installer - Complete Image Styles" where the column 'Type' is equal to 'Installer' and click to it.
Fill in your membership id in the parameters, enable the plugin and save.

Now you will be able to update the extension through the Joomla update system. But if you want, you can do it manually by downloading the latest version from this website.

Uninstall from Joomla

Select "Extensions > Manage > Manage".
Locate in the list the line with name "Complete Image Styles" where the column 'Type' is equal to 'Package'.
Check the line and click "Uninstall". This will uninstall completely the extension.

Add the Styles as Predefined Choices to JCK Editor

Follow the steps below in order to add the styles of Complete Image Styles as predefined choices in the "Styles" list of JCK Editor.

Assuming that JCK Editor is already installed, go to the Joomla administration and select "Components" > "JCK Manager" > "JCK Editor".
Select the "Advanced" tab and go to the "Edit JCK typography" parameter.
Scroll down the text till you find the line: "/* Images Styles ------*/".
After that line add "img.cis-style-1 { }" without the double quotes (") and save. You can to the same for all the styles that you are using e.g. cis-style-2, cis-style-3 etc.
Go the article, select the image and click to the "Styles" dropdown list. Find and select the option "cis-style-1". Save the article.

Useful Notes

Some styles make look different depending on the size and colors of the image and the web page background.
This plugin requires jQuery 1.7 or newer. It includes option to enable it in case jQuery is not already loaded to your website.
The "Scuttle" theme will look better if the image has same width and height. But there is no need the image to be square. Simply, set the same width and height for the image through the editor. The style will hide some parts of the image in order to keep the natural proportion of the image.

Technical and compatibility information you should know about the plugin.

Extension version: 2.3.4
Extension type: Plugin
Extension technologies: PHP, CSS3, Javascript, jQuery 1.7+
Compatible image types: jpg, gif, png, webp
Compatible Joomla version: 3.x, 4.x, 5.x
Compatible browsers: Chrome, Firefox, Opera, Edge, Safari

This plugin has been tested with the latest versions of Joomla 4.x, VirtueMart, K2, Phoca Gallery using the default Joomla template and the Gantry framework.

2.3.4:
- Fix: Load jQuery in Joomla 5 administration.
2.3.3:
- Fix: The panels for the styles did not open in Firefox.
2.3.2:
- Fix: The paperclip icon was not visible sometimes.
2.3.1:
- Fix: Removed false border in style "Curled Corners" when border is added manually.
2.3.0:
- Compatible with Joomla 4.
2.2.0:
- Auto update support.
- Fix: Problem to sub-styles while passing from a style to another.
2.1.5:
- Fix: The font color of the "External Caption" sub style couldn't be applied.
2.1.4:
- Fix: The stretch sub-style couldn't be disabled.
2.1.3:
- Fix: The size sub-style was not working on normal state.
- New line support in comments.
- Sub-styles have indication of whether they are enabled or not.
2.1.2:
- Less data are loaded to the page in order the styles to be applied.
2.1.1:
- Fix: Apply styles to hidden images.
2.1.0:
- Two new styles: Paperclip and Grayscale (Grayscale does not work in IE10 and IE11).
- Improvements to some styles in Firefox.
- More slots to save styles.
- Faster save/load in plugin configuration.
2.0.0:
- Responsive.
- Rewritten code.
- Use of jQuery (for better compatibility with the new versions of Joomla).
- Ready made styles.
- Improved configuration with explanatory images.
- Usability escalation (easy use for the novice user and advanced features for the developer).
1.0.4:
- The 'align' feature is added.
- The styles are applied immediately ignoring the transition time.
- The 'title' property is active to all styles.
- Fix in the 'transition' style.
1.0.3:
- Fix in the code for detecting version of IE. (Maybe this modification eliminates problems when minifying/compress javascript.)
- Fix in the help file.
1.0.2:
- Compatible with Joomla 3.x.
- Secondary fix in some styles.
1.0.1:
- Fix: styles work when image dimensions (width & height) are not defined.
1.0.0:
- First release of the Complete Image Styles plugin.

Complete Image Styles v.2.3.4

Full collection of styles for images. Make your images more attractive.

Complete Image Styles

What is it?

New Features

Complete Image Styles

Subscription Instructions

Joomla Installation

How To Use

Joomla 5

Video Tutorials

Part 1: Styling the image of an article

Part 2: Modifying a theme

Part 3: Creating an image style from scratch

Important notes:

Configuration

Parameters

Automatic Update

Uninstall from Joomla

Add the Styles as Predefined Choices to JCK Editor

Useful Notes