1

在 TYPO3 中，我在页面上添加了一个项目符号列表作为“文本内容/元素”。

工作正常，但布局不适用于网站的其他部分。现在，如果我有一个 CSS 类“cmsms_timeline”可以为项目符号列表提供更好的布局，我如何将该类添加到 TYPO3 中的 UL，所以我不需要转到“HTML”内容并添加该类。

我添加了 CSS，我只需要知道如何添加它，我需要转到“HTML”视图然后添加类吗？我可以从我的 CSS 文件中获取 Content 元素以使用我的类吗？可以使用 csc-default 查看它。

<!--  CONTENT ELEMENT, uid:29/text [begin] -->
<div id="c29" class="csc-default">
<!--  Text: [begin] -->
    <ul type="disc">...</ul>
<!--  Text: [end] -->
    </div>

UDPATE

我正在运行 TYPO3 v. 6.1 (Fluid/Extbase)。

嗨，我已尝试为 MASTER 页面 TSConfig 添加此内容。

RTE.default.contentCSS = fileadmin/templates/add/css/style.css
RTE.default.showTagFreeClasses = 1
RTE.default.proc.allowedClasses := addToList(cmsms_timeline)

当我参考我的样式表并添加 cmsms_timeline 时，我会突出显示项目符号，我可以选择块样式中的项目，但它不显示 cmsms_timeline。

在 WEB -> 信息 -> 页面 TSconfig -> RTE 下。默认情况下我可以看到我有

[contentCSS] = fileadmin/templates/add/css/style.css 
[showTagFreeClasses] = 1

，所以它从 TSConfig 中获取信息。

我的 Style.css 文件中有这段代码。

.cmsms_timeline {
  position:relative;
  margin:-11px 0 0 0;
  padding:0 0 37px 29px;
  list-style:none;

}

.cmsms_timeline li {
  position:relative;
  padding-top:24px;
}

.cmsms_timeline li:before,
.cmsms_timeline:before {
  position:absolute;
  top:-2px;
  left:0;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  width:1px;
  height:28px;
  background:rgba(0, 0, 0, .08);
  content:'';
}

.cmsms_timeline:before {
  top:auto;
  bottom:11px;
  left:29px;
}

.cmsms_timeline li a {
  position:relative;
  padding-left:13px;
  -webkit-transition:all .3s ease-in-out;
  -moz-transition:all .3s ease-in-out;
  -ms-transition:all .3s ease-in-out;
  -o-transition:all .3s ease-in-out;
  transition:all .3s ease-in-out;
}

.cmsms_timeline li a:hover {padding-left:19px;}

.cmsms_timeline li a:before {
  position:absolute;
  top:5px;
  left:-2px;
  width:5px;
  height:5px;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
  background:rgba(0, 0, 0, .2);
  content:'';
  -webkit-transition:background .3s ease-in-out;
  -moz-transition:background .3s ease-in-out;
  -ms-transition:background .3s ease-in-out;
  -o-transition:background .3s ease-in-out;
  transition:background .3s ease-in-out;
}

我想念什么。

4

2 回答 2

1

标准 RTE 编辑器 (rtehtmlarea) 可以通过解析您为其设置的 CSS 文件来填充类列表，因此您需要做的就是ul.cmsms_timeline在该 CSS 文件中进行定义。手册上说的：

CSS 文件，其中包含应应用于已编辑内容的样式定义。此文件中定义的选择器也将用于块样式和文本样式选择列表。

配置示例：

RTE.default.contentCSS = fileadmin/template/rte.css

该设置将被插入到（最好是根）页面属性中的TSconfig字段中。您可以打开WEB -> Info -> Page TSconfig -> RTE。查看所有 RTE 设置。请注意，每个数据库表可能都有自己的配置（例如RTE.tt_content.），因此请确保您的默认设置不会被特定表覆盖。

另请注意，每次更改文件后，您可能需要在浏览器中打开此文件或清除浏览器的缓存。这是为了确保您的浏览器缓存文件的当前版本，以便 RTE 使用它。

设置好之后，您可以简单地在 RTE 中分配类，方法是在您之后从“块样式”选择框中选择它...

a) ...突出显示所有列表项。

b) ...单击任何列表项后，单击 RTE 底部显示的其中ul。Path: body » ul » li

于 2013-10-22T15:27:54.040 回答
1

RTE 有两个用于列表的预定义类：action-items和component-items(action-items-ordered和component-items-ordered用于 OL 列表)，您最容易在样式表中采用它们（只需将您的声明复制cmsms_timeline到其中一个）。

要将类设置为整个列表，只需用鼠标选择其所有项目，然后 RTE 将启用块样式选择。

PS。添加自定义/附加类需要付出很多努力，可以在 google 中轻松找到：
' typo3 rte custom block style '，但对于快速造型，我认为不值得付出努力。

于 2013-10-22T14:31:21.937 回答