README

The Contao Bootstrap Designer Bundle adds frontend styling functionality to the Contao 5.7 backend. It aims for Web developers & Online agencies who'd like to safe time, and Backend Users who want to do (responsive) styling.

In addition to the Bootstrap classes, it also offers many own classes, as well as classes that can be customized in your own CSS.

Features:

responsive settings for margin, padding and display for all elements and articles
text and background color settings including transparency, as well as other text settings
special headline settings
settings for responsive behavior of images
simply turn a Hyperlink into a Bootstrap button
container or container fluid settings for articles
default responsive image behavior and article container settings
ALL FEATURES UNSELECTED BY DEFAULT (default Contao behaviour is preserved)

German / Deutsche Beschreibung:

Das Contao Bootstrap Designer Bundle fügt dem Contao Backend (responsive) Frontend Styling Funktionalität hinzu. Zielgruppe sind Webentwickler und Online Agenturen, die Zeit beim Erstellen und Pflegen der Seite sparen wollen, sowie Backendbenutzer, die mehr Kontrolle über das responsive Verhalten der Artikel und Elemente erlangen wollen.

Neben der Zurverfügungstellung von Bootstrapklassen, liefert der Designer auch viele eigene Klassen, sowie Klassen zur eigenen Anpassung.

Features:

responsive Einstellungen für Außen-, Innenabstand und Anzeige für alle Elemente und Artikel
Einstellungen für Text- und Hintergrundfarbe, Transparenz, und weitere nützliche Texteinstellungen
spezielle Überschrift-Einstellungen
Einstellungen für das Responsive Verhalten von Bildern
Einfache Möglichkeit einen Link in einen Button zu ändern
Container und Container-Fluid Einstellungen für Artikel
Grundeinstellungen für responsives Verhalten der Bilder und Artikel Container
ALLE FEATURES STANDARDMÄßIG ABGEWÄHLT (Standardverhalten von Contao bleibt erhalten)

Installation

You can install the package with Composer:

composer require sarahsolus/contaobsdesigner

Getting started

The Contao Bootstrap Designer Bundle requires Bootstrap 5 to work properly. Install a Bootstrap 5-compatible Contao plugin or add Bootstrap 5 manually to your page layout. By default, this bundle includes only its own supplementary stylesheet. If twbs/bootstrap version ^5.3.8 is installed, Settings > Bootstrap Designer also offers "Load Bootstrap locally" (disabled by default). During cache warmup, the required CSS and JavaScript bundle (including Popper) are copied from the Composer installation into assets/contaobsdesigner-bootstrap, served by Contao via public/assets. Run contao:setup after installation or updates. Local loading takes precedence over external loading. If the package is removed, the checkbox is hidden and no local Bootstrap URLs are generated. The optional "Load Bootstrap externally" checkbox in Settings > Bootstrap Designer loads Bootstrap 5.3.8 CSS and the JavaScript bundle (including Popper) from jsDelivr. It is disabled by default and not recommended due to privacy concerns: visitors' browsers connect directly to the external CDN. Prefer local hosting and leave this option disabled if Bootstrap is already supplied by your theme or another extension.

Spacing uses Bootstrap 5's logical sides (ms/me, ps/pe) and supports the sm, md, lg, xl and xxl breakpoints (as well as the base size). Existing stored ml/mr/pl/pr settings are translated automatically when rendering and loading the backend fields; saving writes the Bootstrap 5 values. Custom cbsd-* classes remain unchanged. Custom spacing styles for s1/s2/s3 must use the new side prefixes as well.

There will be new Settings in the Contao Backend:

each element has a Design section
each image element has a new responsive setting
each hyperlink and Top-Link element has a new button setting in the Hyperlink Settings area
each headline element has an additional setting to change h-class
in the article settings under layout there is a new container setting, and certain design settings
in the Contao settings - Backend setting there are new settings for default settings

Before creating new articles, change the default container class settings. If you are using the Contao Bootstrap extension, REMOVE ANY CLASS from the container class settings in the layout section, or the containerfluid settings for the articles won't work.

German / Deutsche Anleitung:

Die Erweiterung setzt Bootstrap 5 voraus. Standardmäßig wird das Framework nicht eingebunden. Ist twbs/bootstrap in Version ^5.3.8 installiert, erscheint unter Einstellungen > Bootstrap Designer die standardmäßig deaktivierte Checkbox "Bootstrap lokal einbinden". Beim Cache-Aufbau werden CSS und das JavaScript-Bundle inklusive Popper nach assets/contaobsdesigner-bootstrap kopiert und über public/assets bereitgestellt. Nach Installation oder Updates contao:setup ausführen. Die lokale Einbindung hat Vorrang vor der externen. Ohne installiertes Paket wird die Checkbox ausgeblendet und es werden keine lokalen Bootstrap-URLs erzeugt. Optional lädt die Checkbox "Bootstrap extern einbinden" unter Einstellungen > Bootstrap Designer Bootstrap 5.3.8 CSS und das JavaScript-Bundle inklusive Popper von jsDelivr. Die Option ist standardmäßig deaktiviert und aus Datenschutzgründen nicht empfohlen, da die Browser der Besucher direkt auf das externe CDN zugreifen. Eine lokale Einbindung ist vorzuziehen. Ist Bootstrap bereits im Theme oder durch eine andere Erweiterung eingebunden, muss die Option deaktiviert bleiben. Abstandsoptionen verwenden ms/me und ps/pe; auch xxl wird unterstützt. Gespeicherte Bootstrap-4-Abstandsoptionen werden bei der Ausgabe und beim Laden im Backend automatisch übersetzt und beim Speichern im neuen Format abgelegt. Eigene Abstandsregeln für s1/s2/s3 müssen ebenfalls die neuen Präfixe verwenden.

Die Erweiterung ermöglicht neue Einstellungen im Contao Backend:

jedes Element hat einen neuen Abschnitt "Design"
jedes Bildelement hat eine neue Einstellmöglichkeit für die Responsive Darstellung
jeder Hyperlink / Top-Link hat in den Hyperlink-Einstellungen die Option, den Link in einen Button zu ändern
Jedes Überschrift Element hat unter Design die Option, die h-Klasse des Element zu ändern
in den Artikeleinstellungen unter Layout gibt es die Möglichkeit, den Inhalt des Artikels in einen Container setzen, sowie diverse Design Einstellungen
in den Contao Einstellungen - Backend Einstellungen gibt es neue Optionen für Voreinstellungen

Bevor man die Seitenstruktur beginnt einzurichten, sollte man die Voreinstellung für die Container Klasse auswählen. So erhält jeder neue Artikel z.B. automatisch die Container-Klasse. Wird die Contao Bootstrap verwendet, bitte das Feld Container-Klasse in den Layout-Einstellungen freilassen, damit die Container-Fluid Einstellung funktionieren kann.

Expand with own styling

You can add

.cbsd-text-brand-primary, .text-brand-primary p { color: $brand-primary !important; }
.cbsd-text-brand-secondary, .text-brand-secondary p { color: $brand-secondary !important; }
.cbsd-link-brand-primary, .link-brand-primary p { color: $brand-primary !important; }
.cbsd-link-brand-secondary, .link-brand-secondary p { color: $brand-secondary !important;}

.cbsd-bg-brand-primary { background-color:  $brand-primary !important;}
.cbsd-bg-brand-secondary { background-color:  $brand-secondary !important; }
.cbsd-bg-background { background-color: $body-color !important; }
.cbsd-bg-transparent-brand-primary { background-color: opacify($brand-primary, 0.5) !important; }
.cbsd-bg-transparent-brand-secondary { background-color: opacify($brand-secondary, 0.5) !important; }
.cbsd-bg-transparent-background { background-color: opacify($body-color, 0.5) !important; }
.cbsd-hl-brand-primary h1,.cbsd-hl-brand-primary h2,.cbsd-hl-brand-primary h3,.cbsd-hl-brand-primary h4,.cbsd-hl-brand-primary h5,.cbsd-hl-brand-primary h6 { color: $brand-primary !important; }
.cbsd-hl-brand-secondary h1,.cbsd-hl-brand-secondary h2,.cbsd-hl-brand-secondary h3,.cbsd-hl-brand-secondary h4,.cbsd-hl-brand-secondary h5,.cbsd-hl-brand-secondary h6 { color: $brand-secondary !important; }

to your SCSS to define primary and secondary brand colors.

There are also three unused special classes (s1,s2,s3) you can use for your special margin / padding values.

Notes

due to Contaos link element structure some own classes concerning the hyperlinks had to be added.

sarahsolus / contaobsdesigner

Package info

Security

Statistics

README

Installation

Getting started

Expand with own styling

Notes