Typo3 8.7 Bootstrap_package 10.0.2 change footer background color

Question

how can I change the background color of my footer without changing the css? we run a multidomain site - for that reason we do not want to change the extension css. we found some constants and found, that changing $gray-900 is one possible solution. but $gray-900 is used in other context too - and it does not look like good solution ..

my setup is: Typo3 8.7 Bootstrap_package 10.0.2

Answer 1

I've found this way to override footer colors. In output it's clean built css code without duplicates of classes.

First of all, you should create custom-theme.scss file and put it in your extension or fileadmin folder. In this file you should define variables you want to override, then import theme.scss of bootstrap_package, using relative path:

(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';

After this when you have custom theme file, you should include it in Setup. Go to Template Tools (root page) -> Info/Modify -> Setup (or into your setup.typoscript file) and paste code below:

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
  }
}

This code will override bootstrap_package theme definition and use yours.

Result will be like expected: Footer background overriding result

Answer 2

You could set the footer colors for each section via TypoScript Constant like so:

plugin.bootstrap_package.settings.scss {
    # Update footer colors
    footer-sections = (content:(background: $body-bg, color: $body-color, link-color: $primary), meta:(background: #f6f6f6, color: #313131, link-color: $primary))
}

For more Information, pls take a look at: https://github.com/benjaminkott/bootstrap_package/wiki/Customize-Footer-Colors