Skip to main content
Edit page
Print whole chapter
Previous page
Next page

Multidomain

If you want to use several domains with the MATE theme for Contao and each should have its own custom.scss, _custom_colors.scss and _custom_variables.scss, you need a few adjustments. This guide shows you how. You should have at least MATE theme version 2.9.1 installed.

Note

As of Contao 4.12 the publicly accessible subfolder was renamed from /web to /public. If your installation has a /web directory, use web instead of public in the following code examples.

Important note

If you use the latest version of the MATE theme, you may wonder where _custom_colors.scss has gone. Don’t worry: as of MATE version 3.5.0, a new installation of the MATE theme only has _custom_variables.scss, which now contains all color and variable definitions.

What this means for you:

  • v1 (update from a version older than 3.5.0): If you updated the MATE theme, both _custom_variables.scss and _custom_colors.scss remain.
  • v2 (new installation from version 3.5.0): A new installation of the theme only has _custom_variables.scss with all color and variable settings.

1) Create the SCSS files

​

Create a folder in the file manager under mate/sass (e.g. domain2). Copy the files custom.scss and _custom_variables.scss into this folder.

In _custom_variables.scss, adjust the path of the color schemes as follows.

//@import '../../../../public/bundles/contaothemesnetmatetheme/sass/v2/mate_color_schemes/mate_green_colors_contrast';
@import '../../../../public/bundles/contaothemesnetmatetheme/sass/v2/mate_color_schemes/mate_dark_colors_contrast';
//@import '../../../../public/bundles/contaothemesnetmatetheme/sass/v2/mate_color_schemes/mate_blue_colors_contrast';
//@import '../../../../public/bundles/contaothemesnetmatetheme/sass/v2/mate_color_schemes/mate_yellow_colors_contrast';
//@import '../../../../public/bundles/contaothemesnetmatetheme/sass/v2/mate_color_schemes/mate_red_colors_contrast';

//@import '../../../../public/bundles/contaothemesnetmatetheme/sass/v2/mate_color_schemes/mate_dark_colors';
//@import '../../../../public/bundles/contaothemesnetmatetheme/sass/v2/mate_color_schemes/mate_blue_colors';
//@import '../../../../public/bundles/contaothemesnetmatetheme/sass/v2/mate_color_schemes/mate_yellow_colors';

/* ============================= */
/*     Automatic Dark Mode       */
/* ============================= */

//@import '../../../../public/bundles/contaothemesnetmatetheme/sass/v2/mate_color_schemes/mate_dark_mode';

Create a folder in the file manager under mate/sass (e.g. domain2). Copy the files custom.scss, _custom_colors.scss and _custom_variables.scss into this folder.

In _custom_colors.scss, adjust the path of the color schemes as follows.

//@import '../../../../public/bundles/contaothemesnetmatetheme/sass/mate_color_schemes/mate_dark_colors';
//@import '../../../../public/bundles/contaothemesnetmatetheme/sass/mate_color_schemes/mate_blue_colors';
//@import '../../../../public/bundles/contaothemesnetmatetheme/sass/mate_color_schemes/mate_yellow_colors';

Create a folder in the file manager under mate/sass (e.g. domain2). Copy the files custom.scss, _custom_colors.scss and _custom_variables.scss into this folder.

In _custom_colors.scss, adjust the path of the color schemes as follows.

//@import '../../../../public/bundles/matetheme/sass/mate_color_schemes/mate_dark_colors';
//@import '../../../../public/bundles/matetheme/sass/mate_color_schemes/mate_blue_colors';
//@import '../../../../public/bundles/matetheme/sass/mate_color_schemes/mate_yellow_colors';

In the same folder, also create a file mate.scss with the following content. If you installed the MATE theme in a local development environment, the file must be named mate_win.scss.

​
// variables;
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/v2/_mate_variables";
@import "_custom_variables";

// color
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/color-variables";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/color-classes";

// variables;
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/variables";

// reset
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/normalize";

// components
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/global";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/badges";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/icons-material-design";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/grid";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/navbar";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/typography";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/transitions";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/cards";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/toast";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/tabs";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/tooltip";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/buttons";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/dropdown";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/waves";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/modal";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/collapsible";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/chips";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/materialbox";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/forms/forms";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/table_of_contents";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/sidenav";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/preloader";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/slider";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/carousel";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/tapTarget";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/pulse";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/datepicker";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/timepicker";

// theme and custom styles
@import '../../../../public/bundles/contaothemesnetmatetheme/sass/v2/style';
@import 'custom';
// variables;
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/_mate_colors";
@import "_custom_colors";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/_mate_variables";
@import "_custom_variables";

// color
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/color-variables";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/color-classes";

// variables;
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/variables";

// reset
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/normalize";

// components
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/global";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/badges";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/icons-material-design";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/grid";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/navbar";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/typography";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/transitions";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/cards";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/toast";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/tabs";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/tooltip";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/buttons";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/dropdown";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/waves";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/modal";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/collapsible";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/chips";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/materialbox";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/forms/forms";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/table_of_contents";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/sidenav";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/preloader";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/slider";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/carousel";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/tapTarget";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/pulse";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/datepicker";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/timepicker";

// theme and custom styles
@import '../../../../public/bundles/contaothemesnetmatetheme/sass/style';
@import 'custom';
// variables;
@import "../../../../public/bundles/matetheme/sass/_mate_colors";
@import "_custom_colors";
@import "../../../../public/bundles/matetheme/sass/_mate_variables";
@import "_custom_variables";

// color
@import "../../../../public/bundles/matetheme/sass/components/color-variables";
@import "../../../../public/bundles/matetheme/sass/components/color-classes";

// variables;
@import "../../../../public/bundles/matetheme/sass/components/variables";

// reset
@import "../../../../public/bundles/matetheme/sass/components/normalize";

// components
@import "../../../../public/bundles/matetheme/sass/components/global";
@import "../../../../public/bundles/matetheme/sass/components/badges";
@import "../../../../public/bundles/matetheme/sass/components/icons-material-design";
@import "../../../../public/bundles/matetheme/sass/components/grid";
@import "../../../../public/bundles/matetheme/sass/components/navbar";
@import "../../../../public/bundles/matetheme/sass/components/typography";
@import "../../../../public/bundles/matetheme/sass/components/transitions";
@import "../../../../public/bundles/matetheme/sass/components/cards";
@import "../../../../public/bundles/matetheme/sass/components/toast";
@import "../../../../public/bundles/matetheme/sass/components/tabs";
@import "../../../../public/bundles/matetheme/sass/components/tooltip";
@import "../../../../public/bundles/matetheme/sass/components/buttons";
@import "../../../../public/bundles/matetheme/sass/components/dropdown";
@import "../../../../public/bundles/matetheme/sass/components/waves";
@import "../../../../public/bundles/matetheme/sass/components/modal";
@import "../../../../public/bundles/matetheme/sass/components/collapsible";
@import "../../../../public/bundles/matetheme/sass/components/chips";
@import "../../../../public/bundles/matetheme/sass/components/materialbox";
@import "../../../../public/bundles/matetheme/sass/components/forms/forms";
@import "../../../../public/bundles/matetheme/sass/components/table_of_contents";
@import "../../../../public/bundles/matetheme/sass/components/sidenav";
@import "../../../../public/bundles/matetheme/sass/components/preloader";
@import "../../../../public/bundles/matetheme/sass/components/slider";
@import "../../../../public/bundles/matetheme/sass/components/carousel";
@import "../../../../public/bundles/matetheme/sass/components/tapTarget";
@import "../../../../public/bundles/matetheme/sass/components/pulse";
@import "../../../../public/bundles/matetheme/sass/components/datepicker";
@import "../../../../public/bundles/matetheme/sass/components/timepicker";

// theme and custom styles
@import '../../../../public/bundles/matetheme/sass/style';
@import 'custom';

2) Create a template

Under Templates, create a new template fe_page_mate.html5 and rename it (e.g. fe_page_mate_domain2.html5).

In line 15, add the newly created folder from the file manager to getCombinedStylesheet().

<link rel="stylesheet" type="text/css" media="all" href="<?= ContaoThemesNet\MateThemeBundle\ThemeUtils::getCombinedStylesheet('domain2'); ?>">

3) Create a layout

Go to Themes and Edit the page layouts of the theme (4th icon from the right) and duplicate any layout (e.g. default). You can name it e.g. “default - domain2”. Edit the layout and select the fe_page template you just created under Expert settings (at the very bottom) in Page template.

4) Assign the layout to the page

Finally, assign the layout to a page.