时间戳

首页 > 解决方案 > Typo3 8.7 Bootstrap_package 10.0.2 更改页脚背景颜色

typo3-8.7.x - Typo3 8.7 Bootstrap_package 10.0.2 更改页脚背景颜色

问题描述

如何在不更改 CSS 的情况下更改页脚的背景颜色？我们运行一个多域站点 - 因此我们不想更改扩展 css。我们找到了一些常量并发现，改变 $gray-900 是一种可能的解决方案。但是 $gray-900 也用于其他上下文 - 它看起来不是一个好的解决方案..

我的设置是：Typo3 8.7 Bootstrap_package 10.0.2

标签： typo3-8.7.x

解决方案

我发现这种方法可以覆盖页脚颜色。在输出中，它是干净的构建 css 代码，没有类的重复。

首先，您应该创建custom-theme.scss文件并将其放在您的扩展或 fileadmin 文件夹中。在此文件中，您应该定义要覆盖的变量，然后使用相对路径导入bootstrap_package 的theme.scss：

(custom-theme.scss) /typo3conf/ext/ YOUR_EXT /Resources/Public/Theme/custom-theme.scss

// variables you want to override
$footer-sections: ();
$footer-sections: map-merge((
  content: (
    background:                tomato,
    color:                     #fff,
    link-color:                $primary
  ),
  meta: (
    background:                tomato,
    color:                     #fff,
    link-color:                $primary
  )
), $footer-sections);

// relative path to theme.scss
@import '../../../../bootstrap_package/Resources/Public/Scss/Theme/theme';

在此之后，当您拥有自定义主题文件时，您应该将其包含在安装程序中。转到模板工具（根页面）-> 信息/修改-> 设置（或进入您的 setup.typoscript 文件）并粘贴以下代码：

page {
  includeCSS {
    # default is: theme = EXT:bootstrap_package/Resources/Public/Scss/Theme/theme.scss
    # in result here should be only one theme definition
    theme = EXT:YOUR_EXT/Resources/Public/Theme/custom-theme.scss
  }
}

此代码将覆盖 bootstrap_package 主题定义并使用您的。

结果将如预期： 页脚背景覆盖结果

推荐阅读