Multidomain

Wenn mehrere Domains in einer Contao-Installation mit dem MATE Theme verwendet werden sollen, ist dies über ein paar Umwege möglich.

Ziel der Anleitung ist es, dass jede Domain über eine eigene custom.scss, _custom_colors.scss und _custom_variables.scss verfügt. Es sollte mindestens MATE Theme Version 2.9.1 installiert sein, da die Schriften ansonsten nicht korrekt geladen werden.

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, _custom_colors.scss und _custom_variables.scss.

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

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

Lege im selben Ordner noch eine Datei mate.scss mit folgendem Inhalt an.

// variables;
@import "../../../../web/bundles/matetheme/sass/_mate_colors";
@import "_custom_colors";
@import "../../../../web/bundles/matetheme/sass/_mate_variables";
@import "_custom_variables";

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

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

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

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

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

So sollte es am Ende aussehen:

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).

Nun musst du das Template bearbeiten und den Pfad in Zeile 22 anpassen, sodass dort die eben angelegte mate.scss eingebunden wird.

$combiner->add('files/mate/sass/domain2/mate.scss');

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.