在typo3登录页面中包含CSS文件？

Question

在typo3登录页面中包含CSS文件？

typo3typo3-6.2.x

8

我想在TYPO3登录页面加载CSS文件。

下面是我在ext_tables.php文件中添加的代码。

if (TYPO3_MODE === 'BE') {
    $GLOBALS['TBE_STYLES']['inDocStyles_TBEstyle'] .= '@import "/typo3conf/ext/mytemplate/Resources/Public/Backend/css/login.css";';
}

但这不起作用。

然而，当我添加内联样式时，它运行良好。

$GLOBALS['TBE_STYLES']['inDocStyles_TBEstyle'] .= '
#t3-login-form:after {
  content: "\00a0";
  background-image: url("' . \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::extRelPath($_EXTKEY) . 'Resources/Public/Backend/Images/foo.png");
  width: 220px;
  height: 187px;
  display: inline-block;
  overflow: hidden;
  position: relative;
  left: 201px;
  bottom: 533px;
}
';

但我想要导入一个CSS文件。

我正在使用以下扩展：

typo3 6.2.14
flux 7.2.1
vhs 2.3.3
fluidcontent 4.3.1
fluidpages 3.3.1

- vijay rami

感谢您使用内联样式的提示！在 7.6 版本下工作得非常好 :-) - Tobias Gaertner

如果有一个答案对您有用，您能接受其中之一吗？ - Sybille Peters

inDocStyles_TBEstyle已被移除 https://docs.typo3.org/c/typo3/cms-core/main/zh-cn/Changelog/8.0/Breaking-72392-RemovedDeprecatedCodeFromDocumentTemplate.html - Sybille Peters

4个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pravin Vavadiya · Answer 1

尝试像这样做...

 $relativePath = \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::extRelPath($_EXTKEY);
    $GLOBALS['TBE_STYLES']['logo_login'] = $relativePath . 'Resources/Public/Backend/Images/LogoLogin.png';
    $GLOBALS['TBE_STYLES']['logo'] = $relativePath . 'Resources/Public/Backend/Images/typo3-topbar@2x.png';
    $GLOBALS['TBE_STYLES']['inDocStyles_TBEstyle'] .= $relativePath . ' csspath ';

- Sybille Peters · Answer 2

由于其他答案已经过时且未被更新：

对于 TYPO3 版本 >= v8，您不应再使用 inDocStyles_TBEstyle（当发布该问题时可能仍然可行）。

为什么在 CSS 片段中通过 CSS @import 导入文件没有起作用 - 这不是 TYPO3 特定的问题，而是 CSS 的问题。您可以使用标准的故障排除方法在浏览器中检查，例如使用开发人员工具或查看生成的 HTML 源代码和生成的片段（例如在 Chrome 中按 CTRL+u）。

这可能是一个解释：

@import 规则必须在样式表的顶部定义，在任何其他 at-rule（除了 @charset 和 @layer）和样式声明之前，否则它将被忽略。

https://developer.mozilla.org/en-US/docs/Web/CSS/@import

替代方案：

对于较新的TYPO3版本（例如v11），您可以将CSS文件作为扩展中的“皮肤”添加。这不仅限于登录窗口。

将下列内容添加到您的ext_tables.php文件中（直接使用文件夹，不要使用文件名！）：

``` $GLOBALS['TBE_STYLES']['skins']['mylogin'] = [ 'stylesheetDirectories' => [ // 文件夹路径，不要使用文件名！！！ 'login' => 'EXT:mylogin/Resources/Public/Css/Backend/Skin', ] ]; ```

将CSS文件添加到 `Resources/Public/Css/Backend/Skin/login.css`。

TBE_STYLES文档（目前有点“薄”，但可能会在以后更新）。

注

请注意新版本TYPO3的以下更改：

自 TYPO3 v8 开始，属性 inDocStyles_TBEstyle 已被移除，请参见更改日志 Breaking: #72392 - Removed deprecated code from DocumentTemplate
在 ext_tables.php 和 ext_localconf.php 中不要使用 $_EXTKEY（仅在 ext_emconf.php 中使用），只需将扩展键作为字符串使用，参见（官方文档：TYPO3 Explained: Rules and best practices for configuration files ext_tables.php and ext_localconf.php）
使用 $GLOBAlS['TBE_STYLES']，而不是 $TBE_STYLES

- Jost · Answer 3

在你的ext_tables.php文件中，添加类似以下的内容：

$GLOBALS['TBE_STYLES']['skins'][$_EXTKEY]['stylesheetDirectories'] = array();
$GLOBALS['TBE_STYLES']['skins'][$_EXTKEY]['stylesheetDirectories']['mystyles'] = 'EXT:' . $_EXTKEY . '/Resources/Public/Css/visual/';

然后将样式表放置在您定义的目录中。它将在所有后端页面上加载。

我不确定是否有更好的解决方案来包含这些样式。

- Mr.Silaz · Answer 4

我在我的一个扩展中使用了这个（在ext_tables.php中），但它是为TYPO3 7.6设计的，可能也适用于版本6.2。

$TBE_STYLES['skins'][$_EXTKEY]['name'] = $_EXTKEY;
$TBE_STYLES['skins'][$_EXTKEY]['stylesheetDirectories']['structure'] = 'EXT:' . ($_EXTKEY) . '/Resources/Public/Backend/Css/Skin/';

问候