Ergebnis 1 bis 26 von 26

Thema: Gibt es schon Erfahrungen mit Contao und Bootstrap?

  1. #1
    Contao-Nutzer Avatar von rene-ddorf
    Registriert seit
    29.09.2010.
    Ort
    Düsseldorf
    Beiträge
    28

    Standard Gibt es schon Erfahrungen mit Contao und Bootstrap?

    Hello,
    ich informier mich gerade ein wenig über Bootstrap. Es gibt im englischen Forum ja schon einen Eintrag und der Kollege da, hat bei Github mal was angefangen. Es scheint aber so, dass er da nicht mehr weitermacht ... Ich bin mir auch nicht sicher wie man genau drangehen sollte ...
    Ich könnte mir vorstellen, dass man Tristans Theme+ dafür nehmen könnte. Die CSS-Dateien als externe Dateien einchecken. Die Javascripts ebenso. Die müssten dann halt alle wahrscheinlich unter tl_files, nicht wie in der Lösung bei Github im Plugins-Ordner.
    Man hat dann aber immernoch das Problem, dass die CSS-Klassen-Struktur natürlich deutlich anders ist als bei Contao. Da kommt man, glaube ich zumindest, nicht um eine Menge Templateanpassungen herum - was den Nutzen wieder relativieren würde ... Die Klassenzuweisungen werden doch via PHP generiert? Könnte man da nicht irgendwie eingreifen (Bin leider kein PHP-Mann, ich sehe immer nur die Variablen in den Templates)?
    Einige Teile von Bootstrap bräuchte man vielleicht auch gar nicht (das Grid zum Beispiel) ...
    Habt Ihr Euch schonmal damit beschäftigt? Oder Bootstrap sogar schonmal in Contao benutzt irgendwie?
    Viele Grüße
    René

  2. #2
    Wandelndes Contao-Lexikon Avatar von BugBuster
    Registriert seit
    15.06.2009.
    Ort
    Berlin
    Beiträge
    10.521
    User beschenken
    Wunschliste

    Standard Contao Boilerplate

    Hi,
    auf der Konferenz gabs sowas ähnliches: Contao Boilerplate


    https://github.com/menatwork/ck2012-boilerplate
    Grüße, BugBuster
    "view source" is your guide.
    Danke an alle Amazon Wunschlisten Erfüller

  3. #3
    Contao-Nutzer
    Registriert seit
    14.05.2010.
    Beiträge
    8

    Frage Contao Bootstrap

    So, dann teil ich mal meine Erfahrungen mit Contao in Verbindung mit Bootstrap mit: ich kriege es nicht hin

    Hier erstmal meine prinzipielle Vorgehensweise:
    1. Bootstrap heruntergeladen
    2. Bootstrap entpackt nach tl_files/theme_bootstrap_default/bootstrap
    3. Neues Theme erstellt
    4. Keine weiteren CSS erstellt
    5. Die nötigsten Module erstellt (Navigationsmenü, Login Formular)
    6. Ein Standard-Layout erstellt und dort unter Experten-Einstellungen Zusätzliche <head>-Tags hinzugefügt:
    Code:
    <link href="tl_files/theme_bootstrap_default/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
    <script src="tl_files/theme_bootstrap_default/bootstrap/js/bootstrap.min.js"></script>
    Im Quelltext stehen dann auch im <head> die Verweise mit korrekter Pfadangabe zum Bootstrap CSS und JavaScript.

    Das Frontend sieht aber unverändert aus, also kommt Bootstrap nicht zum Tragen :-(

    Ist an der Vorgehensweise erstmal grundsätzlich etwas falsch oder würdet ihr auch so vorgehen?

    Nachtrag: Es macht keinen Unterschied, ob man den Haken bei Das CSS-Framework deaktivieren setzt oder deaktiviert.
    Geändert von droptix (22.08.2012 um 12:33 Uhr)

  4. #4
    Contao-Nutzer
    Registriert seit
    14.05.2010.
    Beiträge
    8

    Standard

    Aaah, man nehme bootstrap.min.css statt der responsive-Variante, dann kann man auch einen Unterschied sehen und getrost den Haken deaktivieren bei Das CSS-Framework deaktivieren.

    So, dann mal ran ans Template editieren... Klar: in der Praxis ist es schon doof, wenn man sich die Standard-Templates verbiegt und Contao in einer späteren Version Änderungen im Template macht. Das würde bedeuten, dass man viele Templates nochmal anpassen muss.

    Nächstes Problem: ich editiere z.B. das Grund-Template fe_page (egal ob fe_page.html5 oder fe_page.xhtml). Die Änderungen sind im Frontend nicht sichtbar, auch nicht im Quelltext. In den Experten-Einstellungen meines Standard-Layouts kann ich aber auch gar kein anderes Template wählen außer fe_page.

    ^^ Mache ich etwas falsch oder habe ich eben einen Bug entdeckt? Ich verwende Contao 2.11.4
    Geändert von droptix (22.08.2012 um 13:21 Uhr)

  5. #5
    Wandelndes Contao-Lexikon Avatar von BugBuster
    Registriert seit
    15.06.2009.
    Ort
    Berlin
    Beiträge
    10.521
    User beschenken
    Wunschliste

    Standard

    Nach Templateänderungen eine Systemwartung ausführen, sonst kommt die Seite oder das Template aus dem Cache bzw. aus dem Original.
    Grüße, BugBuster
    "view source" is your guide.
    Danke an alle Amazon Wunschlisten Erfüller

  6. #6
    Contao-Nutzer Avatar von rene-ddorf
    Registriert seit
    29.09.2010.
    Ort
    Düsseldorf
    Beiträge
    28

    Standard

    Also ich bastel auch wieder gerade etwas damit rum ... Habe ein paar Templates angepasst, bin mir aber nicht sicher, dass das der richtige Weg ist. Das entscheidende Problem ist, dass der html-Quellcode den Bootstrap für viele Dinge voraussetzt natürlich in Contao ganz anders ist. An der ein- oder anderen Stelle kann man einfach eine bootstrap-CSS-Klasse eintragen und dann geht es auch, an anderer Stelle müsste man aber alles umbauen - hmm ... Zum Beispiel geht bootstrap bei checkboxen davon aus dass die mit dem Label verschachtelt sind ...
    Code:
    <label class="checkbox">
        <input type="checkbox"> Remember me
    </label>
    Bei Contao stehen die aber nacheinander. Natürlich könnte man das jetzt das Template umbauen, was aber halt extrem update-unfreundlich wäre und auch viel Arbeit ...
    Ich habe schon darüber nachgedacht, ob man via less oder via php das eine less-datei erzeugt eine Art "Transformationsdatei" baut - Also mit Mixins die bootstrap-Anweisungen in die für Contao nötigen CSS-Selektoren "übersetzt" ...
    JS-Dateien kann man ja via theme+ und jQuery-Plugin integrieren, less-Dateien ebenso via theme+ und phpless ...
    Cool wäre halt, wenn man die bootstrap- und die Contao-Quelle unangetastet lassen könnte. Dann müsste man bei einem Update auf der einen oder anderen Seite nur die "Transformationsdatei" updaten ... Klingt das irgendwie machbar? Hmm - ich forsche mal weiter.

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

    Standard

    Zitat Zitat von rene-ddorf Beitrag anzeigen
    Code:
    <label class="checkbox">
        <input type="checkbox"> Remember me
    </label>
    So etwas ließe sich ja per Javascript DOM-Manipulationen "korrigieren". Ob das allerdings praktikabel ist, kann ich nicht einschätzen. Aber zumindest blieben die Contao-Templates dabei unangetastet.
    Contao-Community-Treff Bayern: http://www.contao-bayern.de

  8. #8
    Contao-Nutzer Avatar von rene-ddorf
    Registriert seit
    29.09.2010.
    Ort
    Düsseldorf
    Beiträge
    28

    Standard

    Ich habe also etwas weiter geforscht ... Eigentlich wäre es ja schön, wenn man nicht während der Laufzeit das Dom-Gerüst umbauen müsste ( ... ich spreche hier natürlich vom Wunschziel ;-))
    Deshalb habe ich mal was versucht mit less ... Rein theoretisch könnte man die normale bootstrap.css nehmen und die via @import in eine bootstrap-contao-bridge.less importieren ... Dort müsste man dann auf alle Klassen der bootstrap.css Zugriff haben und diese dann quasi übersetzen ... Zum Beispiel um einem submit-Button ohne die Klassenzuweisung .btn dessen Eigenschaften zu übergeben sowas wie:
    .submit { .btn; } , also als mixin ...
    Leider scheitert dieser Versuch zur Zeit schon bei dem @import ... Ich benutze dazu Tristans Theme+ und phpless ...
    Es scheint so, dass der Pfad, der da übergeben wird, falsch ist ... Und mit absolutem Pfad ging's leider auch nicht ...
    Ich dachte daran die Dateien anders zu verbinden. Über die Funktion der Zusammenlegung, aber ich glaube, das passiert nach dem Less-Parser.
    In der bootstrap.css (umbenannt zu bootstrap.less) funktioniert die Zuordnung ebenfalls nicht ... Sehr seltsam ... Da die bootstrap.less ja schon eine geparste Datei ist dürfte es eigentlich kein Problem von mehreren verschachtelten Mixins sein. Sprich die über Mixins zugeordneten Klassen enthalten keine anderen Mixins (was der Fall wäre, wenn man die original Bootstrap-Less-Dateien nehmen würde). Ich bin gerade etwas ratlos ... Vielleicht geht es ja einfach auch nicht, kann schon sein, aber irgendwie erscheint es mir rein theoretisch möglich.
    Ich denke, dass man um einige Templateanpassungen (fe_page, navigation usw.) nicht rumkommt. Aber die meisten anderen Elemente für Forms, Tabellen, Buttons usw. ohne Eingriff durch den Nutzer direkt in der Bridge-Datei zu übersetzen wäre schon ein ziemlicher Hammer, da man so sehr schnell das Framework nutzen könnte ( zumal ich gesehen habe, dass es für die anderen CMS eine Anpassung gibt - wobei ich nicht weiss wie weitreichend die jeweils ist, da ich eigentlich keine Lust habe nur deshalb mal Typo oder Joomla oder WP zu installieren ;-)
    Naja, vielleicht hat ja jemand 'ne Idee...
    Gruß
    René

  9. #9
    Contao-Nutzer
    Registriert seit
    14.05.2010.
    Beiträge
    8

    HTML think reverse

    Habe von jemandem gehört, der es genau anders herum angegangen ist: nicht Contao verbiegen, damit es mit Bootstrap funktioniert, sondern er hat Bootstrap angepasst.

    Ich versuch ihn mal zu erreichen, dann kann er seine Erfahrungen hier vielleicht posten.

    P.S. Warum interessiert mich eigentlich das Ganze? Weil Bootstrap einfach gewaltig ausgereift ist und ohne viel Arbeit quasi blitzschnell ein hübsches Layout hervor zaubert... was dazu noch per Knopfdruck "template-bar" (also austauschbar) ist. Außerdem ist die responsive-Sache schon ein sehr wichtiges Feature, das Contao nicht verschlafen sollte. Diskussionen dazu gibt es ja bereits...

  10. #10
    Contao-Nutzer Avatar von djo
    Registriert seit
    30.01.2011.
    Ort
    Waldshut-Tiengen
    Beiträge
    210

    Standard

    Das Könnte interessant sein:

    https://github.com/muckz/Bootstrap-for-Contao
    http://denniserdmann.de/bootstrap-mit-contao-betreiben/


    Sollte ich mal was gebastelt bekommen, meld ich mich. :-)

    Liebe Grüße,
    Daniel
    Geändert von djo (18.04.2013 um 14:15 Uhr)

  11. #11
    Contao-Fan Avatar von aadursun
    Registriert seit
    25.09.2011.
    Beiträge
    543

    Standard

    @djo

    gibt was neues bei Dir zu Bootstrap, kamst du in deinem Vorhaben weiter? Kann man sich was anschauen?

    Viele Grüße
    aadursun

  12. #12
    Contao-Nutzer Avatar von djo
    Registriert seit
    30.01.2011.
    Ort
    Waldshut-Tiengen
    Beiträge
    210

    Standard

    Also, ich habe mal ein wenig experimentiert, hat auch teilweise funktioniert - aber ich muss mich da noch mal intensiv dransetzen.
    Ich teste gerade folgenden Weg:
    Auf der Bootstrap-Seite den Quellcode der Beispielseiten anschauen und die Klassen im Template der fe_page.html5 Bootstrap entsprechend ergänzen. Das gleiche würde ich dann für das Navigationstemplate, Formulare etc. machen. Ich teste das in der RC1 von Contao 3.1 und würde mich melden sobald ich richtig erfolgreich bin.
    Anscheinend soll man die CSS-Files von Bootstrap direkt im fe_page-Template einbinden, da es Probleme mit den gecachten Contaoscripts geben soll.

    Hier wurde was für Contao 2.11 vorbereitet.

    https://github.com/muckz/Bootstrap-for-Contao

    Liebe Grüße,
    Daniel
    Geändert von djo (11.05.2013 um 13:10 Uhr)

  13. #13
    Contao-Nutzer
    Registriert seit
    21.05.2013.
    Beiträge
    16

    Standard

    Sry, falsches Thema, Post bitte löschen
    Geändert von bpoiss (21.05.2013 um 23:07 Uhr)

  14. #14
    Contao-Fan Avatar von kayyy
    Registriert seit
    01.07.2009.
    Beiträge
    457
    Partner-ID
    8987

    Standard

    Wo liegt denn genau das Problem ?

    Natürlich reicht es nicht aus, nur die Bootstrap CSS Dateien einzubinden.

    Ich bin gerade dabei meine dritte Seite mithilfe von Bootstrap und Contao umzusetzen.

  15. #15
    Contao-Nutzer
    Registriert seit
    21.05.2013.
    Beiträge
    16

    Standard

    Ich denke das Problem wird bei den meisten daran liegen, dass z.B. die Bootstrap Navigation andere Klassennamen verwendet als die standard Navigation von Contao, siehe Thema: Bootstrap Navigation DropDown. Die Bootstrap dateien will ich nicht verändern, daher habe ich das Problem so gelöst, dass ich die Templates angepasst habe, jedoch finde ich das sehr umständlich.

  16. #16
    Contao-Fan Avatar von kayyy
    Registriert seit
    01.07.2009.
    Beiträge
    457
    Partner-ID
    8987

    Multimedia

    Zitat Zitat von bpoiss Beitrag anzeigen
    Ich denke das Problem wird bei den meisten daran liegen, dass z.B. die Bootstrap Navigation andere Klassennamen verwendet als die standard Navigation von Contao, siehe Thema: Bootstrap Navigation DropDown. Die Bootstrap dateien will ich nicht verändern, daher habe ich das Problem so gelöst, dass ich die Templates angepasst habe, jedoch finde ich das sehr umständlich.
    Naja wie soll es auch sonst gehen
    Die Template Dateien müssen ebend angepasst werden. Ist doch nicht alles copy & paste

    Allerdings gibt es hier glaube ich ein Problem mit dem Dropdown Menü, hier müsste man im template eine php if Abfrage machen.
    "Wenn level1, dann zeige das an, wenn level2 diesen code".

  17. #17
    Contao-Nutzer
    Registriert seit
    21.05.2013.
    Beiträge
    16

    Standard

    Zitat Zitat von kayyy Beitrag anzeigen
    Allerdings gibt es hier glaube ich ein Problem mit dem Dropdown Menü, hier müsste man im template eine php if Abfrage machen.
    "Wenn level1, dann zeige das an, wenn level2 diesen code".
    Genau das habe ich gemacht.

    PHP-Code:
    <ul class="<?php echo $this->level; if($this->level == level_1) echo ' nav'; else if($this->level == level_2) echo ' dropdown-menu'?>"> 
    <?php foreach ($this->items as $item): ?> 
    <?php if ($item['isActive']): ?> 
      <li class="<?php echo $item['class']; if(strpos($item['class'], 'submenu') !== false) echo ' dropdown'?>"> 
        <?php if(strpos($item['class'], 'submenu') !== false): ?> 
            <a class="dropdown-toggle <?php echo $item['class']; ?>" data-toggle="dropdown"> 
              <?php echo $item['link']; ?> 
              <b class="caret"></b> 
        <?php else: ?> 
            <a class="<?php echo $item['class']; ?>"> 
              <?php echo $item['link']; ?> 
            </a> 
        <?php endif; ?> 
               
        </a> 
        <?php echo $item['subitems']; ?> 
      </li> 
    <?php else: ?> 
    <li<?php if ($item['class']): ?>  
      class="<?php echo $item['class'];  
        if(
    strpos($item['class'], 'submenu') !== false) echo ' dropdown'?>
      <?php endif; ?>
       
      <a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> 
        class="<?php echo $item['class']; if(strpos($item['class'], 'submenu') !== false) echo ' dropdown-toggle'?>"  
        <?php if(strpos($item['class'], 'submenu') !== false) echo 'data-toggle="dropdown"'?> 
        <?php endif; ?><?php if ($item['accesskey'] != ''): ?> 
        accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?> 
        <?php if(strpos($item['class'], 'submenu') !== false): ?> 
      <b class="caret"></b> 
        <?php endif; ?> 
      </a><?php echo $item['subitems']; ?> 
      </li> 
    <?php endif; ?> 
    <?php endforeach; ?> 
    </ul>
    Sieht allerdings jetzt nicht mehr sehr übersichtlich aus, schon garnicht in dem Editor von Contao. Das Template funktioniert so für mich, allerdings auch nur wenn meine Seitenstruktur nicht mehr als 2 Level hat, für 3 Level müsste man den Code nochmal um ein Stück erweitern. Allerdings habe ich mich dazu entschieden bei künftigen Contao-Seiten ohne Bootstrap zu arbeiten, und die Navigation so wie sie standardmäßig im Template ist, mit eigenen css Anweisungen zu stylen.

  18. #18
    Contao-Fan Avatar von kayyy
    Registriert seit
    01.07.2009.
    Beiträge
    457
    Partner-ID
    8987

    Standard

    Zitat Zitat von bpoiss Beitrag anzeigen

    Sieht allerdings jetzt nicht mehr sehr übersichtlich aus, schon garnicht in dem Editor von Contao. Das Template funktioniert so für mich, allerdings auch nur wenn meine Seitenstruktur nicht mehr als 2 Level hat, für 3 Level müsste man den Code nochmal um ein Stück erweitern. Allerdings habe ich mich dazu entschieden bei künftigen Contao-Seiten ohne Bootstrap zu arbeiten, und die Navigation so wie sie standardmäßig im Template ist, mit eigenen css Anweisungen zu stylen.
    Ich habe mit Bootstrap keinerlei Probleme, läuft alles wunderbar und geht schnell.
    Ich arbeite aber derzeit an einem Contao Bootstrap Theme für die Community.

    Wird man sich dann später auf Github downloaden können.

  19. #19
    Contao-Fan Avatar von aadursun
    Registriert seit
    25.09.2011.
    Beiträge
    543

    Standard

    @kayyy

    kannst du uns 1-2 URLs senden; das wäre klasse von Dir.

    Was meinst du, wann das Theme im Github landen würde?

    Viele Grüße
    aadursun

  20. #20
    Contao-Fan Avatar von kayyy
    Registriert seit
    01.07.2009.
    Beiträge
    457
    Partner-ID
    8987

    Standard

    Hier ist mal ein Layout, was allerdings noch in Arbeit ist:
    http://www.pixelianer.com/neu/

    Das Bootstrap Theme wird denke ich bis ende diesen Monat dauern, bis es auf Github veröffentlich wird.
    Ich versuche möglichst alles so umzuschreiben, damit Bootstrap perfekt integriert wird.

    So müssen eben auch viele Templates umgeschrieben werden wie breadcrumb, nav etc.

  21. #21
    Contao-Nutzer
    Registriert seit
    18.06.2013.
    Beiträge
    2

    Standard

    Hey, bin sehr interessiert an dem Template, jetzt mit Bootstrap 3 vor der Tür, wäre da auch
    eine Kompatibilität in die Richtung denkbar?

    Liebe Grüße
    Robert

  22. #22
    Contao-Nutzer
    Registriert seit
    23.01.2012.
    Beiträge
    13

    Standard

    Zitat Zitat von kayyy Beitrag anzeigen
    Das Bootstrap Theme wird denke ich bis ende diesen Monat dauern, bis es auf Github veröffentlich wird.
    Ich versuche möglichst alles so umzuschreiben, damit Bootstrap perfekt integriert wird.

    So müssen eben auch viele Templates umgeschrieben werden wie breadcrumb, nav etc.
    Hi

    Gibts schon Neuigkeiten?

    mfg

  23. #23
    Contao-Fan Avatar von kayyy
    Registriert seit
    01.07.2009.
    Beiträge
    457
    Partner-ID
    8987

    Standard

    Das freie Bootstrap Theme wird mit unserer neuen Seite in den nächsten 1 bis 2 Wochen released.

  24. #24
    Contao-Fan
    Registriert seit
    22.12.2012.
    Beiträge
    325

    Standard

    Zitat Zitat von kayyy Beitrag anzeigen
    Das freie Bootstrap Theme wird mit unserer neuen Seite in den nächsten 1 bis 2 Wochen released.
    gibt es schon was zu sehen ?

  25. #25
    Contao-Nutzer
    Registriert seit
    23.01.2012.
    Beiträge
    13

    Standard

    Zitat Zitat von Slind Beitrag anzeigen
    gibt es schon was zu sehen ?
    Schau auch mal hier vorbei.

  26. #26
    Contao-Fan Avatar von kayyy
    Registriert seit
    01.07.2009.
    Beiträge
    457
    Partner-ID
    8987

    Standard

    Zitat Zitat von Slind Beitrag anzeigen
    gibt es schon was zu sehen ?
    Ich schreibe gerade hier das Tutorial. Nachdem Tutorial gibt es dann auch das Bootstrap Theme als Download.

    http://www.pixelianer.com/tutorials-...bootstrap.html
    Forum Thema: https://community.contao.org/de/show...338#post277338

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
  •