Import von Bootstrap-basierten Layouts

Hallo Gemeinde,

nach über 1 Jahr Abstinenz komme ich wieder dazu, mich meinem vormals liebgewonnenen Hobby Contao zuzuwenden.
Für eine private Seite mit Freunden würde ich gerne ein Layout verwenden, welches ich oft bei Bootstrap gesehen habe (eigentlich verwenden alle von mir gefundenen Designer, die solch ein Layout verwenden, Bootstrap).

Es geht um folgenden Layouttyp, auch gerne als "Admin-Dashboard" bezeichnet:
https://themes.getbootstrap.com/prod...oard-template/

Mein Vorhaben wäre es, genanntes oder ähnliches Layout käuflich zu erwerben und dann auf der dort erhaltenen Basis ein Layout für meine Contao-Seite nachzubauen.

Hat jemand mit so etwas schon einmal Erfahrung gesammelt und hat eine ungefähre Vorstellung, die er mir beschreiben könnte, welchen Aufwand dies bedeuten könnte?
Welche Schritte muss man mit Contao hier gehen?
Grundlegende Frage, das ist mir klar, aber die Forensuche hat mich bei meinen Suchbegriffe nicht zum gewünschen Erfolg geführt :-).

Viele Grüße aus Westfalen
Alexander

Hallo Alexander,
kennst du https://github.com/contao-bootstrap/bundle?

Damit kannst du ein auf Bootstrap basierendes Layout aufbauen.

Hi planepix,

danke dir.
Die Erweiterung sagt, dass es nicht das eigentliche Framework implementiert?
Was macht die Erweiterung konkret? Was kann ich über Contao dann einfacher nutzen? Habe mir die readthedocs durchgelesen, bin aber nicht so recht schlau draus geworden. Kann mir jemand mit Erfahrung helfen?

Danke & Grüße
Alexander

Die Erweiterung stellt den Rahmen für die Nutzung von Bootstrap zur Verfügung.

Du kannst damit
- Bootstrap in beliebiger Version damit selbst einbinden
- ein Layout mit angepassten Sections erstellen
- individuelle Themedateien (wie beispielsweise aus Deiner Vorlage) einbinden
- Grideinstellungen definieren und nutzen
- Formularlayouts / Bootstrap nutzen

Sehr, sehr flexibel. Erwartet aber ein wenig Vorwissen über die Funktionsweise von Contao und den Aufbau von Bootstrap-Layouts.


Gesendet von iPhone mit Tapatalk

Der contao-bootstrap/navbar z.B. stellt ein Modul bereit, das eine Contao Navigation kapselt und damit das HTML erzeugt, das Bootstrap für eine Navigation erwartet. Du könntest das sicher auch über eigene Anpassungen der entsprecheden Contao Templates erreichen, aber so musst selbst nichts mehr anpassen.

Guten "Morgen" miteinander,

vielen Dank für eure Antworten.
Bedeutet also, dass die zur Verfügung stehenden Bootstrap-Erweiterungen für Contao den Output auf Bootstrap-freundliche Weise verändern. Dadurch ist dem Admin dann die semi-manuelle Anlage von Bootsrap-getreuen Layout möglich, korrekt?

Zusammengefasst:

• Admin installiert die Contao-Bootstrap-Extensions, die er in seinem Layout/ auf seiner Seite verwenden will.
• Für jede installierte Extensions stehen dann bei den jeweiligen Contao-Element (Tabs, Navigation, etc.) Templates bereit, welche der Admin auswählen kann (z. B. fe_bootsrap beim Seitenlayout), um einen Bootstrap-konformen Output von Contrao direkt erzeugen zu lassen.
• Mittels der "Bootstrap-Library" kann der Admin dann die erzeugten Frontend-Elemente so gestalten, wie es das Bootstrap-Framework vorsieht (Beispiel).

Das ist nun eine sehr "mechanische" Aufzählung von mir, kommt der Realität aber nah?

Würde in meinem konkreten Ausgangsfall bedeuten, ich erwerbe ein entsprechendes Layout, installiere die Extensions, die ich zur Abbildung des Layouts benötige (soweit verfügbar) und kann dann aus dem gekauften Layout heraus die Container etc. als eigene Inhaltsbereiche usw. im Contao-Seitenlayout einbauen/übernehmen, die CSS-Files importieren und mit entsprechenden Inhalten/Modulen füllen. ** An dieser Stelle erwarte ich nun das bittere Erwachen :-) **

Beste Grüße
Alexander

Im Prinzip ja. Wobei ich beim Wort 'Kauf' dann doch aufmerke, weil ich da schon ein paar hässliche Dinge (wie das Umschreiben von Bootstrap-Standardklassen auf sowas wie .element123456789yxcvb-obfuscated erlebt habe - was dann wirklich mühsam wird).

Bei einigermassen korrekt aufgebauten BT-Layouts schaut das so aus:

• Layout, Typ Bootstrap anlegen
• Ins Layout den Bootstrap-CSS-Core und themespzifisches CSS übernehmen, Reihenfolge beachten
• Bootstrap-Variablen ggf. setzen
• Ins Layout BT-JS sowie themespezifisches JS übernehmen
• Module anlegen
• Module ins Layout einbinden

... wobei man sich bei vorgefertigten BT-Layouts dann nochmal jeweils anschauen sollte, was die für Sections brauchen. Die kann man ja dann auch anlegen und entsprechend Artikel bestücken.

Anders geht's auch: Beispielsweise Theme lokal mittels SASS in ein Projekt einfügen, CSS kompilieren lassen und dann ins CMS einbinden.

Es gibt noch mehr Möglichkeiten und Workflows.

Hi lucina,

danke für deinen Beitrag.

Ich habe heute den ganzen Tag damit verbracht, das Grund-Layout in Contao umzusetzen. Recht erfolglos leider.
Grds. habe ich die Extensions verstanden. Ein Bootstrap konformes Layout bekomme ich hin. Was ich nicht hinbekomme, sind sticky Sidebar und sticky Header.
Ich möchte eine Sidebare links haben, ein Header, der über das gesamte Layout geht und dann halt die Hauptzeile. Alles ok, alles in Ordnung, nur halt nicht sticky.

Hat jemand einen Rat für mich, wie ich das hinbekomme? Auch mit der Documentation und den Examples von getbootstrap bekomme ich dies net gewuppt.

Beste Grüße
Alexander

Du benötigst https://getbootstrap.com/docs/4.0/co...bar/#placement und hier dann vermutlich '.sticky-top'. Vermutlich für beides, aber das hängt möglicherweise vom Aufbau Deines Layouts ab.

Edit: Beispiel https://www.codeply.com/go/O9GMYBer4l oder auch https://codepen.io/robee/pen/QyNJaq

Hi lucina,

erneut herzlichen Dank für deine Hilfe. Bitte entschuldiuge das spoäte "Danke".

Was die Lösung des Problems angeht, zweifel ich langsam an meiner Zurechenbarkeit. Ich habe mein Layout zu Testzwecken zunächst wieder vollkommen eingeschränkt (keine Sidebars, nur Header und Main). Folgenden HTML-COde gebe ich derzeit aufg derf Seite aus.
Wenn ich scrolle, verschwindet der Header unmittelbar.

HTML-Code:

---

<html lang="en"><head>
      <meta charset="utf-8">
    <title>Testeite - viel Text</title>
    <base href="domain>
          <meta name="robots" content="index,follow">
      <meta name="description" content="">
      <meta name="generator" content="Contao Open Source CMS">
      <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

          <!--[if lt IE 9]><script src="assets/html5shiv/js/html5shiv-printshiv.min.js"></script><![endif]-->
     
</head>
<body id="top" class="win firefox gecko fx67" itemscope="" itemtype="http://schema.org/WebPage">
    <div id="wrapper">
                        <header id="header" itemscope="" itemtype="http://schema.org/WPHeader">
            <div class="inside navbar-fixed-top navbar-default">
<div class="container-fluid">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Website Name</a>
  </div>
  <div>
    <ul class="nav navbar-nav navbar-right">
      <li class="active"><a href="#intro">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
</div>            </div>
          </header>
              <div class="container-fluid" id="container">
                      <main id="main" itemscope="" itemtype="http://schema.org/WebPageElement" itemprop="mainContentOfPage">
              <div class="inside">
  <div class="mod_article first last block" id="article-15">
<div class="ce_text first last block">
            <h1>Viel Text</h1>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
      </div>
              </div>
                          </main>   
                  </div>     
    </div>
</body></html>

---

Den Code für die Navbar habe ich aus deinem guten Beispiel von codepen genommen. Dort klappt es auch; bei mir dann leider wieder nicht.

Jemand Lust auf Tomaten? Gerne von meinen Augen nehmen.

Grüße
Alexander

Hat irgendjemand noch einen Tipp für mich? Hat es ggf. etwas mit dem Contao-Layout am Hut?

Gruß
Alexander

Ich persönlich tue mich eher schwer damit, ohne eine Link konkrete Tipps zu geben, sorry.

Danke für eure Unterstützung. Ich habe mir nun ein entsprechendes Layout gekauft und das Template dann schlicht angepasst sowie die css importiert. Funktioniert für meine Zwecke bisher wunderbar.

Danke nochmal.

Grüße
Alexander