Assign a Custom Style Set to an Image

Use CUSTOM IMAGE Style Sets to change the look & feel of images

We include a Style Sheet called DIY.CSS in every WYNCHCO website design.

Purpose: to enable use of CUSTOM Style Sets when editing website content using the JCE Content Editor.

circle

Result: A square images will be displayed as a ROUND one.

A rectangular image will be displayed as an OVAL one.

greyscale

Result: A colour image will be displayed as BLACK & WHITE.

opacity

Result: An image will be be SEMI-TRANSPARENT (80% opacity).

polaroid

Result: An image will have a white double edged border.

porthole

Result: Image will  have distinctive ROUND corners.

rounded5
rounded10
rounded15

Result: An image will be displayed with ROUNDED corners (with radius of 5, 10 or 15 PX).

sepia

Result: A colour image will be displayed with SEPIA tones.

squared

Result: the corners of a rounded image will become SQUARE corners.

zoom
zoom-left
zoom-right

Result: when a user mouse-hovers over an image, the image will appear to get bigger without an increase in its size on screen.

Use ZOOM-LEFT to left-align the image (for example, to display text to its right).

Use ZOOM-RIGHT to right-align the image (for example, to display text to its left).

NOTE: To assign ZOOM Style Sets, use the CUSTOM Style Set method, not the CUSTOM IMAGE Style Set method.

We show how in our separate article.

Read more: CUSTOM Style Set Method.

How to assign a CUSTOM IMAGE Style Set

To assign a CUSTOM IMAGE Style Set, use the CLASS field under the ADVANCED tab of the JCE Content Editor Image Manager pop-up window.

content editor custom image styles 1

Follow the steps below to assign a CUSTOM IMAGE Style Set to an image within an Article or Custom Module.

This example illustrates how the GREYSCALE Style Set can be assigned to a full colour image to convert it to BLACK & WHITE.

STEP 1

content editor custom image styles 1

STEP 2

content editor custom image styles 2

STEP 3

content editor custom image styles 3

STEP 4

content editor custom image styles 4

RESULT

content editor custom image styles 5

Add your own CUSTOM IMAGE Styles

We include a Style Sheet called DIY.CSS in every WYNCHCO website design.

Purpose: to enable use of CUSTOM Style Sets when editing website content using the JCE Content Editor.

We would encourage you to try creating your own CUSTOM Styles and using them with your website.

We show you how to add your own Style Sets to the DIY.CSS file in our separate article.

Read more: Add your own CUSTOM Styles.