When you publish to Magellan, the file object template names are included in the Magellan HTML. These names can be used to identify an image and use CSS to position it or apply borders For example, you may have file objects based on the Screen Shot template. You can include CSS definitions to add a gray border or place the images on the right of the page for all images using this template.
As this is concerning image content customization, the appropriate code should be added to the contentstyles.css in your theme folder.
-
To format content according to topic templates:
-
Open the contentstyles.css file in your theme folder.
If this is the first image customization, to keep the file well organized add an images section using comments in a similar way to the sections already in the file.
-
On separate lines add: /*#region IMAGES */ and /*#endregion IMAGES */. The following suggested definitions can be added between these two markers.
|
Requirement |
Definition Example |
|
To place images on the right side of the page |
To have all images based on the Screen Shot template displayed on the right side of the page, add a definition that includes the image selector naming the file object template, followed by the properties. For example: img.screenshot { The text flows around the image. Example before:
Example after:
|
|
To add a border to images |
To apply a border with shadow to all images based on the Screen Shot template, add a definition that includes the image selector naming the file object template, followed by the properties. For example: img.screenshot { All images based on this template will now have: Corners rounded to 4px radius A light gray solid line around the image A light gray shadow to the right and bottom of the image, the shadow is softened. Example screenshot before:
Example screenshot after:
|
