Multidomain

Wenn du mehrere Domains im MATE Theme von Contao nutzen willst und jede ihre eigene custom.scss, _custom_colors.scss und _custom_variables.scss haben soll, brauchst du ein paar Anpassungen. Diese Anleitung zeigt dir, wie das geht. Du solltest mindestens MATE Theme Version 2.9.1 installiert haben.

Ab Contao 4.12 wurde der öffentlich erreichbare Unterordner von /web in /public umbenannt. Falls in deiner Installation ein Verzeichnis /web existiert, verwendest du in den folgenden Code-Beispielen web statt public.

Wichtiger Hinweis

Vielleicht wunderst du dich, wenn du die neueste Version des MATE Themes nutzt, wo die _custom_colors.scss abgeblieben ist. Keine Sorge, ab der MATE Version 3.5.0 ist es so: Bei einer Neuinstallation des MATE Themes gibt es nur noch die _custom_variables.scss, in der jetzt alle Farb- und Variablen-Definitionen zusammengefasst sind.

Wichtig für dich:

  • v1 (Update von einer älteren Version als 3.5.0): Wenn du das MATE Theme aktualisiert hast, bleiben sowohl die _custom_variables.scss als auch die _custom_colors.scss erhalten.
  • v2 (Neuinstallation ab Version 3.5.0): Bei einer Neuinstallation des Themes existiert nur noch die _custom_variables.scss mit allen Farb- und Variablen-Einstellungen.

1) SCSS-Dateien anlegen

Lege in der Dateiverwaltung unter mate/sass einen Ordner an (z. B. domain2). Kopiere in diesen Ordner die Dateien custom.scss und _custom_variables.scss.

In der _custom_variables.scss muss der Pfad für die Farbschemen wie folgt angepasst werden.

//@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';

Lege in der Dateiverwaltung unter mate/sass einen Ordner an (z. B. domain2). Kopiere in diesen Ordner die Dateien custom.scss, _custom_colors.scss und _custom_variables.scss.

In der _custom_colors.scss muss der Pfad für die Farbschemen wie folgt angepasst werden.

//@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';

Lege in der Dateiverwaltung unter mate/sass einen Ordner an (z. B. domain2). Kopiere in diesen Ordner die Dateien custom.scss, _custom_colors.scss und _custom_variables.scss.

In der _custom_colors.scss muss der Pfad für die Farbschemen wie folgt angepasst werden.

//@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';

Lege im selben Ordner noch eine Datei mate.scss mit folgendem Inhalt an. Wenn du das MATE Theme in einer lokalen Entwicklungsumgebung installiert hast muss die Datei mate_win.scss heißen.

// 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) Template anlegen

Lege unter Templates ein neues Template fe_page_mate.html5 an und benenne es um (z. B. fe_page_mate_domain2.html5).

In Zeile 15 fügst du in getCombinedStylesheet() den neu angelegten Ordner aus der Dateiverwaltung ein.

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

3) Layout anlegen

Navigiere zu Themes und Seitenlayouts des Theme bearbeiten (4. Icon von rechts) und dupliziere ein beliebiges Layout (z. B. default). Dieses kannst du z. B. “default - domain2” benennen. Bearbeite das Layout und wähle unter Experteneinstellungen (ganz unten) bei Seiten-Template das eben angelegte fe_page-Template aus.

4) Layout der Seite zuweisen

Zum Schluss muss das Layout nur noch einer Seite zugewiesen werden.