Joomla! Help Support Warrington Cheshire Manchester Merseyside UKYou can change the appearance of an image when you choose to edit the underlying HTML of an Article.

You may for example want to convert a square image into a round one, or perhaps square off or round the corners of another image.

But not everyone wants to have to edit the underlying HTML.

It is good to know then that the image editor included with the JCE Content Editor extension, enables you to make such changes without editing the HTML.

It is first however necessary to create some Custom Styles, ouch!

No worries, WYNCHCO website designs include the following Custom Image Styles to help you.

Read more: Responsive Mobile Friendly Website Design.

 

Custom Image Styles

We include these Custom Styles in every WYNCHCO website design to help you style images.

Use these Custom Styles to locally change the appearance of an image.

Local style will override any globally assigned Custom Style.

Local style is shown in bold.

flower squarecircle

Use this style to make a square image perfectly round.

flowerOr to make a rectangular image oval.

flowerrounded5

Use this style to make the corners of an image round (radius 5 px).

flowerrounded10

Use this style to make the corners of an image round (radius 10 px).

flowerrounded15

Use this style to make the corners of an image round (radius 15 px).

flowersquared

Use this style to make the corners of an image square.

Add a Custom Style to an Image using JCE Content Editor

Add a Custom Style to change the appearance of an image in two simple steps using the JCE Content Editor.

{/slider}

After signing into your website, select an Article to edit.

Select an image.

Select the Image Editor icon from the panel at the top of the Content Editor.

step 1

Look under the Advanced tab in the Image Editor pop up window.

See image below.

Enter name of Custom Style in field labelled Classes.

step 2

Result: square image displayed as a circle.

Note: If we had applied the Custom Style to a rectangular image the result would be an oval.

step 3

 

Personal Joomla! CMS Help & Support

We coach, help and support managers with responsibility for Joomla! websites in organisations across Cheshire, Manchester, Merseyside, North West England & the UK.

Read more: WYNCHCO Joomla! CMS Help & Support.

Joomla! Help Support Warrington Cheshire Manchester Merseyside UKYou can change the appearance of an image when you choose to edit the underlying HTML of an Article.

You may for example want to convert a square image into a round one, or perhaps square off or round the corners of another image.

But not everyone wants to have to edit the underlying HTML.

It is good to know then that the image editor included with the JCE Content Editor extension, enables you to make such changes without editing the HTML.

It is first however necessary to create some Custom Styles, ouch!

No worries, WYNCHCO website designs include the following Custom Image Styles to help you.

Read more: Responsive Mobile Friendly Website Design.

 

Custom Image Styles

We include these Custom Styles in every WYNCHCO website design to help you style images.

Use these Custom Styles to locally change the appearance of an image.

Local style will override any globally assigned Custom Style.

Local style is shown in bold.

flower squarecircle

Use this style to make a square image perfectly round.

flowerOr to make a rectangular image oval.

flowerrounded5

Use this style to make the corners of an image round (radius 5 px).

flowerrounded10

Use this style to make the corners of an image round (radius 10 px).

flowerrounded15

Use this style to make the corners of an image round (radius 15 px).

flowersquared

Use this style to make the corners of an image square.

Add a Custom Style to an Image using JCE Content Editor

Add a Custom Style to change the appearance of an image in two simple steps using the JCE Content Editor.

{/slider}

After signing into your website, select an Article to edit.

Select an image.

Select the Image Editor icon from the panel at the top of the Content Editor.

step 1

Look under the Advanced tab in the Image Editor pop up window.

See image below.

Enter name of Custom Style in field labelled Classes.

step 2

Result: square image displayed as a circle.

Note: If we had applied the Custom Style to a rectangular image the result would be an oval.

step 3

 

Personal Joomla! CMS Help & Support

We coach, help and support managers with responsibility for Joomla! websites in organisations across Cheshire, Manchester, Merseyside, North West England & the UK.

Read more: WYNCHCO Joomla! CMS Help & Support.