What is the best way to change the CSS of a content element in Typo3?

Question

I am creating a webpage that lists the employees of a company. Every employee is supposed to get its own box with text on the left and a picture of them on the right. In order to do so I have used a 'Text & Images' content element for each employee.

However, the options for image alignment do not allow me to place the image to the right of the text using text wrap (all options are no-wrap options). What would be the best way to ensure the pictures do end up to the right of the text?

This is an example of a picture that is right aligned with wrap.

Additionally I would also like the style the border of each 'Text & Images' content element. How would I go about this?

Answer 1

When using the "Text and Images" content element, you have the following options about the position of the images and text:

• Above, center
• Above, left
• Above, right
• Below, center
• Below, left
• Below, right
• In text, right
• In text, left
• Beside text, right
• Beside text, left

both "In text, right" and "In text, left" wrap the image with text, as on the following example picture:

If you have less options, there is some TSConfig that is limiting the number of options; that could be something like

TCEFORM.tt_content.imageorient.removeItems = 17,18

About the CSS, you have several ways to include yours; for example you can add your own file using page.includeCSS as documented here or you can overwrite the TypoScript included by the Fluid Styled Content with your own (see plugin.tx_frontend._CSS_DEFAULT_STYLE ) on the Template Analyzer.

To include the default CSS, you have to include the Static TypoScript Fluid Content Elements CSS (optional) (fluid_styled_content) in your template, like on this picture:

Also, I would use an inspector to be sure that the CSS has not been accidentally overridden.