Contao-Camp 2024
Ergebnis 1 bis 13 von 13

Thema: Import von Bootstrap-basierten Layouts

  1. #1
    Contao-Fan
    Registriert seit
    02.08.2009.
    Ort
    Westfalen
    Beiträge
    639

    Frage 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
    ‎"The basic drives of humans are few: to get enough food, to find shelter, and to keep debt off the balance sheet."

  2. #2
    AG Pressearbeit
    Community-Moderator
    Buchautor 'Contao für Webdesigner'
    Avatar von planepix
    Registriert seit
    05.06.2009.
    Ort
    Stuttgart
    Beiträge
    6.464
    Partner-ID
    107
    Contao-Projekt unterstützen

    Support Contao

    Standard

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

    Damit kannst du ein auf Bootstrap basierendes Layout aufbauen.
    ---------------------------------
    Beste Grüße planepix
    Contao für Webdesigner (Website), Twitter: @contaowebdesign
    weitzeldesign
    Contao-Sprechstunde
    Contao Schulungen: https://www.weitzeldesign.com/cms-co...chulungen.html
    Contao Jahrbuch: www.contao-jahrbuch.de
    Contao Agenturtag: www.contao-agenturtag.de
    Contao Stammtisch Stuttgart: www.contao-stammtisch-stuttgart.de
    Contao 4 Erfahrungen als Gitbook: https://app.gitbook.com/@planepix/s/...-mit-contao-4/
    Contao 4 & Manager Hosterhinweise: https://github.com/contao/contao-manager/wiki

    Schon wieder ein Update?
    Glücklich sind die, die den Wert erkennen – und wertschätzen.
    „Muss man machen wie beim Zahnarzt. Der bestraft einen auch mit hohen Rechnungen wenn man die Pflege vernachlässigt.”

  3. #3
    Contao-Fan
    Registriert seit
    02.08.2009.
    Ort
    Westfalen
    Beiträge
    639

    Frage

    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
    ‎"The basic drives of humans are few: to get enough food, to find shelter, and to keep debt off the balance sheet."

  4. #4
    Administratorin Avatar von lucina
    Registriert seit
    19.06.2009.
    Ort
    Kiel (DE)
    Beiträge
    7.328
    Partner-ID
    152
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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

  5. #5
    Contao-Urgestein Avatar von fiedsch
    Registriert seit
    09.07.2009.
    Ort
    München
    Beiträge
    2.935

    Standard

    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.
    Contao-Community-Treff Bayern: http://www.contao-bayern.de

  6. #6
    Contao-Fan
    Registriert seit
    02.08.2009.
    Ort
    Westfalen
    Beiträge
    639

    Frage

    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
    ‎"The basic drives of humans are few: to get enough food, to find shelter, and to keep debt off the balance sheet."

  7. #7
    Administratorin Avatar von lucina
    Registriert seit
    19.06.2009.
    Ort
    Kiel (DE)
    Beiträge
    7.328
    Partner-ID
    152
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.

  8. #8
    Contao-Fan
    Registriert seit
    02.08.2009.
    Ort
    Westfalen
    Beiträge
    639

    Frage

    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
    ‎"The basic drives of humans are few: to get enough food, to find shelter, and to keep debt off the balance sheet."

  9. #9
    Administratorin Avatar von lucina
    Registriert seit
    19.06.2009.
    Ort
    Kiel (DE)
    Beiträge
    7.328
    Partner-ID
    152
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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

  10. #10
    Contao-Fan
    Registriert seit
    02.08.2009.
    Ort
    Westfalen
    Beiträge
    639

    Frage

    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
    ‎"The basic drives of humans are few: to get enough food, to find shelter, and to keep debt off the balance sheet."

  11. #11
    Contao-Fan
    Registriert seit
    02.08.2009.
    Ort
    Westfalen
    Beiträge
    639

    Frage

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

    Gruß
    Alexander
    ‎"The basic drives of humans are few: to get enough food, to find shelter, and to keep debt off the balance sheet."

  12. #12
    Administratorin Avatar von lucina
    Registriert seit
    19.06.2009.
    Ort
    Kiel (DE)
    Beiträge
    7.328
    Partner-ID
    152
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

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

  13. #13
    Contao-Fan
    Registriert seit
    02.08.2009.
    Ort
    Westfalen
    Beiträge
    639

    Daumen hoch

    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
    ‎"The basic drives of humans are few: to get enough food, to find shelter, and to keep debt off the balance sheet."

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •