Contao-Camp 2024
Ergebnis 1 bis 4 von 4

Thema: [Beispiel/Theme] Contao Bootstrap mit OnePageWebsite

  1. #1
    Contao-Nutzer
    Registriert seit
    12.01.2013.
    Beiträge
    6

    HTML [Beispiel/Theme] Contao Bootstrap mit OnePageWebsite

    (Gerne kann dieser Beitrag "sticky" gesetzt werden)

    Ich habe bereits einige Erfahrungen mit Contao und Bootstrap.
    Bisher habe ich allerdings Bootstrap nicht mit Contao verknüpft.

    Daher habe ich nun eine Beispielwebseite mit Contao und Bootstrap erstellt.

    Basis ist das Boilerplate Template http://www.novo-online.de/blog/2014/...bsite-vorlage/
    von Christian Düll aka @chrizdee hier im Forum

    Zusätzlich wurde der Composer Client installiert und das Contao Bootrap Bundle http://contao-bootstrap.netzmacht.de/
    von David Molineus aka @webstar hier im Forum

    Da ich mit Bootstrap bisher nur OnePage Seiten erstellt habe ist auch für Contao das Modul OnePageWebsite (Version 2.2.2) direkt aus GitHub installiert worden (Kein Composer !!!) https://github.com/timgatzky/onepage...ases/tag/2.2.2
    von Tim Gatzky aka @Tim G hier im Forum

    Alle diese Erweiterungen wurden über den composer client installiert um IMHO komfortabler mit Contao zu arbeiten
    "bugbuster/backend_user_online": ">=3.2.0.0,<3.3-dev",
    "contao-bootstrap/bundle": ">=1.0.0.0,<1.1-dev",
    "contao-community-alliance/composer-client": "~0.12",
    "contao-legacy/backupdb": ">=3.2.2.9013,<3.3-dev",
    "contao-legacy/be_improved_theme": ">=0.4.0.7008-RC,<0.5-dev@RC",
    "contao-legacy/be_piwikcharts": ">=1.5.0.9010,<1.6-dev",
    "contao-legacy/frontend_editor": ">=2.2.6.9003,<2.3-dev",
    "contao-legacy/inserttags": ">=1.9.2.9011,<1.10-dev",
    "contao-legacy/themelinks": ">=3.2.0.9008,<3.3-dev",
    "contao-legacy/xcontaobackup": ">=1.3.1.6002-RC,<1.4-dev@RC",
    "netzmacht/contao-font-awesome": ">=4.5.0.0,<4.6-dev",
    "terminal42/contao-calendarfield": ">=1.7.2.0,<1.8-dev",
    "terminal42/contao-changelanguage": ">=2.2.10.0,<2.3-dev"

    Dropdown der Navbar ist aktiviert und als Referenz wurde die originale Bootstrapdoku eingebunden.

    Bild :
    Bild 145.png

    Lizenz zur Nutzung des Templates :
    http://creativecommons.org/licenses/by/4.0/
    88x31.png
    Author : TRC Software und Webdesign (contao-template@trc-webdesign.de)

    Wenn das Template weiterhilft freue ich mich über ein Danke in dem Forum und gerne auch via Paypal an paypal@trc-webdesign.de

    Downloadlinks :
    im nächsten Beitrag
    Geändert von trcwebdesign (22.01.2016 um 18:58 Uhr)

  2. #2
    Contao-Nutzer
    Registriert seit
    12.01.2013.
    Beiträge
    6

    Standard Downloadlinks

    Contao-Version 3.5.6 (LTS)

    Zugangsdaten zur Contao Administration

    Benutzer: admin
    Passwort: adminadmin

    Hinweise (siehe auch : https://github.com/chrizdee/chrizdee...bootstrap_less)

    Die Inhalte des Header, Sidebar und Footer werden zentral und für den Redakteur einfach pflegbar, unter Menü Inhalte > Template-Elemente verwaltet und per insert_article dem Layout zugewiesen.
    Die Einbindung individueller CSS- und Javascript-Dateien erfolgt über die Datei /templates/inc.head_tags.php. In meinem persönlichen Workflow hat sich dies als recht praktisch erwiesen, da man die Datei immer im Editor geöffnet lassen und ergänzen kann.
    Individueller Javascript-Code wird über die Datei /files/layout/js/app.js verwaltet. CSS wird mittels LESS geschrieben und kommt bei mir immer in die Datei /files/layout/css/style.less.
    Weiterhin verwendet diese Vorlage Bootstrap 3.3.6.

    (Das Basistemplate und Layout wurde von mir angepasst damit Bootstrap und OnePageWebsite zusammen funktionieren)

    Gemäss den Forenregeln bitte folgendes beachten : https://contao.org/de/news/sicherhei...ao-themes.html
    Theme CTO (über die Exportfunktion in Contao erstellt):
    bootstrap-default.cto

    SQL Dump (mit Contao Backup erstellt) :
    Database_bootstrap.sql.txt

    Website Template (mit Contao Backup erstellt)
    Bootstrap-Website.sql.txt

    Template Files (Bitte in {contao-root} entpacken)
    templates.zip

    Layout Files für das Template (Bitte in {contao-root}/files entpacken)
    layout.zip

    composer.phar
    composer.phar.txt
    Geändert von trcwebdesign (22.01.2016 um 23:11 Uhr)

  3. #3
    Contao-Nutzer
    Registriert seit
    12.01.2013.
    Beiträge
    6

    Standard Schritt für Schritt Installationsanleitung

    Schritt für Schritt Installation :

    1. Ordner auf dem webspace erstellen
    Code:
    mkdir bootstrap-template
    2. Contao 3.5.6 installieren
    Code:
    wget https://download.contao.org/3.5.6/zip
    mv zip contao-3.5.6.zip
    unzip contao-3.5.6.zip
    rm contao-3.5.6.zip
    mv contao-3.5.6/* .
    rm contao-3.5.6.zip
    3. Template und Layout "installieren"
    Code:
    Hochladen https://community.contao.org/de/attachment.php?attachmentid=17174&d=1453489326
    unzip templates.zip
    rm templates.zip
    cd files
    Hochladen https://community.contao.org/de/attachment.php?attachmentid=17173&d=1453488759
    unzip layout.zip
    rm layout.zip
    4. SQL Website template hinzufügen (noch nicht installieren)
    Code:
    Hochladen https://community.contao.org/de/attachment.php?attachmentid=17172&d=1453488602
    cd templates
    mv Bootstrap-Website.sql.txt Bootstrap-Website.sql
    5. Contao Install tool aufrufen (KEIN TEMPLATE AUSWÄHLEN)
    Im Browser aufrufen contao-bootstrap-template/contao/install.php
    Den composer client installieren. Installiert ist 0.16.2 composer.phar
    contao-bootstrap-template/contao/main.php?do=repository_catalog&view=composer
    Optional !
    Falls es zu Fehlern kommt (open_base_dir restriction) die composer.phar aus den Downloadlinks verwenden und
    hierhin kopieren
    Code:
    cd composer/
    Hochladen https://community.contao.org/de/attachment.php?attachmentid=17175&d=1453498594
    cp composer.phar.txt composer.phar
    6. In das Backend einloggen
    In der Migration - Upgrade packages to composer
    For prodcution use
    do migration
    Im Package management
    Settings - Expert mode

    Unter require folgendes einfügen :

    Code:
        "require": {
            "bugbuster/backend_user_online": ">=3.2.0.0,<3.3-dev",
            "contao-bootstrap/bundle": ">=1.0.0.0,<1.1-dev",
            "contao-community-alliance/composer-client": "~0.12",
            "contao-legacy/backupdb": ">=3.2.2.9013,<3.3-dev",
            "contao-legacy/be_improved_theme": ">=0.4.0.7008-RC,<0.5-dev@RC",
            "contao-legacy/be_piwikcharts": ">=1.5.0.9010,<1.6-dev",
            "contao-legacy/frontend_editor": ">=2.2.6.9003,<2.3-dev",
            "contao-legacy/inserttags": ">=1.9.2.9011,<1.10-dev",
            "contao-legacy/themelinks": ">=3.2.0.9008,<3.3-dev",
            "contao-legacy/xcontaobackup": ">=1.3.1.6002-RC,<1.4-dev@RC",
            "netzmacht/contao-font-awesome": ">=4.5.0.0,<4.6-dev",
            "terminal42/contao-calendarfield": ">=1.7.2.0,<1.8-dev",
            "terminal42/contao-changelanguage": ">=2.2.10.0,<2.3-dev"
        },
    Dann auf Update packages
    und Database update


    7. OnePageWebsite installieren (manuell)
    Code:
    cd system/modules
    wget https://github.com/timgatzky/onepagewebsite/archive/2.2.2.zip
    unzip 2.2.2.zip
    mv onepagewebsite-2.2.2/system/modules/* .
    rm onepagewebsite-2.2.2/* -rf 
    rmdir onepagewebsite-2.2.2
    rm 2.2.2.zip
    Update database

    8. htaccess anpassen
    Code:
      # Note that not all environments support mod_rewrite and mod_cache.
      ##
      RewriteCond %{REQUEST_FILENAME} !\.(htm|php|js|css|map|htc|png|gif|jpe?g|ico|xml|csv|txt|swf|flv|mp4|webm|ogv|mp3|ogg|oga|eot|otf|tt[cf]|woff2?|svgz?|pdf|gz)$
    # RewriteCond %{REQUEST_FILENAME} !-f
    # RewriteRule .*\.html$ index.php [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !contao
    RewriteRule .*\/$ /bootstrap-template/index.php [L]
    Achtung : Durch die HTACCESS darf kein Artikel oder Seite/Alias das Wort contao beinhalten weil sonst der Rewrite nicht funktioniert !
    Dies gilt auch für den Artikel Contao Bootstrap Demo mit dem Alias contao-bootstrap-demo. Bitte diesen umbenennen in c-bootstrap-demo dann wird auch die Seite aufgerufen.

    9. Website template installieren
    Im Browser aufrufen contao-bootstrap-template/contao/install.php
    Das Template Bootstrap-Website.sql importieren

    10. Backend login
    Benutzer : admin
    Passwort : adminadmin
    Unter Settings
    - das URL-Suffix auf / setzen
    - Urls umschreiben
    Optional : "Backend Theme Verbesserungen systemweit verwenden" aktivieren

    Jetzt ist es geschafft !
    Geändert von trcwebdesign (22.01.2016 um 22:49 Uhr)

  4. #4
    Contao-Nutzer Avatar von chrizdee
    Registriert seit
    24.08.2009.
    Ort
    Reichenschwand
    Beiträge
    73

    Standard

    Schön, dass Dir meine Website-Vorlage gefällt

    Viele Grüße und weiterhin frohes Schaffen
    Chris

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
  •