How To... Style inline images and links

Provide styling options to your content contributors.

By adding pre-determined styles to your css, it is easy for the content contributors to apply these styles to any links and images applied to the page through the Component TEXT Editor.

1. Write your styles in the CSS

For this example we are going to add four styles for the use of site owners;

1. Images requiring no borders, floated left, with large padding
2. Images requiring bold red border, tight padding and floated right
3. Images requiring blue borders and loose padding
4. Links that can display an arrow to their left hand side

Here is the code for the styles, and more notably their selector names, in the css...

1. img.no_border {border: none; padding: 10px; float: left}

2. img.red_border {border: 4px solid red; padding: 3px; float: right}

3. img.blue_border {border: 1px solid blue; padding: 10px}

4. a.with_arrow {background: url(arrow.gif) no-repeat 0 0; text-indent: 5px}

2. Make the styles available to the editor

The component editor opens as a text editor when the TEXT tag is used in the component/snippet. To make the pre-determined styles available to the editor, define the styles as values of the IMAGETAGCLASSES and LINKTAGCLASSES attributes of the TEXT tag. First the Image styles...

1. %TEXT(

2. imagetagclasses=no_border;red_border;blue_border)%

And now the link style...

1. %TEXT(

2. imagetagclasses=no_border;red_border;blue_border,

3. linktagclasses=with_arrow)%

3.Availability in the Editor

Now when the user adds an image or link in the editor, by right clicking on that element and selecting 'Edit properties', they are able to choose and apply the assigned styles from a drop down menu.