在 Typo3 中更改内容元素的 CSS 的最佳方法是什么?

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

我正在创建一个列出公司员工的网页。每个员工都应该有自己的盒子,左边是文字,右边是他们的照片。为此,我为每位员工使用了 'Text & Images' 内容元素。

但是,图像对齐选项不允许我使用文本换行将图像放置在文本的右侧(所有选项都是非换行选项)。确保图片最终出现在文本右侧的最佳方法是什么?

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

此外,我还想要每个 'Text & Images' 内容元素的边框样式。我该怎么做?

使用 "Text and Images" 内容元素时,您可以选择以下有关图像和文本位置的选项:

  • 上面,中间
  • 上,左
  • 上右
  • 下方,居中
  • 左下方
  • 右下方
  • 在正文中,对
  • 在正文中,左
  • 文字旁边,右边
  • 文字旁边,左边

"In text, right" 和 "In text, left" 都用文字包裹图像,如下例图片所示:

如果您的选项较少,则有一些 TSConfig 限制了选项的数量;可能是这样的

TCEFORM.tt_content.imageorient.removeItems = 17,18

关于 CSS,您可以通过多种方式加入您的;例如,您可以使用 page.includeCSS as documented here 添加您自己的文件,或者您可以在模板分析器上用您自己的(参见 plugin.tx_frontend._CSS_DEFAULT_STYLE )覆盖流体样式内容包含的 TypoScript。

要包含默认 CSS,您必须在模板中包含静态 TypoScript Fluid Content Elements CSS (optional) (fluid_styled_content),如下图所示:

此外,我会使用检查器来确保 CSS 没有被意外覆盖。