Ergebnis 1 bis 29 von 29

Thema: 4.4.x eigene CSS für Backend wird nicht geladen

  1. #1
    Contao-Fan Avatar von jenda
    Registriert seit
    20.06.2009.
    Ort
    Berlin
    Beiträge
    417

    Standard 4.4.x eigene CSS für Backend wird nicht geladen

    Hallo,

    leider habe ich ein Problem mit dem Pfad zu eigener CSS-Datei für Backend. Ich habe in der be_main-Vorlage folgende Zeile eingetragen.

    HTML-Code:
    <link rel="stylesheet" href="<?= TL_FILES_URL ?>files/backend/backend.css">
    Dabei kommt allerdings vor den Pfad noch das Sprachkürzel de. Dadurch kann die CSS-Datei also nicht geladen bzw. gefunden werden. Wie kann ich es lösen? Danke für jeden Hinweis.

    Gibt es sonst eine Möglichkeit über callback, einem HTML-Tag im Backend eine CSS-Klasse zuzuweisen? Falls ja, wie muss ich vorgehen?

    Liebe Grüße,

    Jan
    Geändert von jenda (06.07.2017 um 15:42 Uhr)

  2. #2
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    18.544
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von jenda Beitrag anzeigen
    Dabei kommt allerdings vor den Pfad noch die Sprachkürzel de. Dadurch kann sie also nicht geladen werden. Wie kann ich es lösen? Danke für jeden Hinweis.
    Das stimmt nicht, hier passiert folgendes:

    1. Der Browser versucht http://example.org/files/backend/backend.css zu laden.
    2. Der Webserver findet keine Datei die so heißt und delegiert daher an die app.php weiter.
    3. Contao fängt diese URL mit der contao_catch_all route ab.
    4. Da prepend_locale aktiviert ist, leitet Contao diese URL automatisch auf …/de/…
    5. Contao findet dann unter dieser URL keine Seite und gibt einen 404 Status zurück.


    Hast du den Ordner "backend" auch ganz sicher freigegeben?

  3. #3
    Contao-Fan Avatar von jenda
    Registriert seit
    20.06.2009.
    Ort
    Berlin
    Beiträge
    417

    Standard

    Ja, sorry, es lag wieder nur daran, dass ich den Ordner nicht veröffentlicht habe. Ich bin halt doch noch sehr frisch bei der Contao-4-Nutzung. Vielen Dank. Jetzt funktioniert es.

    @Spooky weißt du vielleicht, wie ich das hier noch lösen kann?

    Und gibt es sonst eine Möglichkeit über callback, einem HTML-Tag im Backend eine CSS-Klasse zuzuweisen? Falls ja, wie muss ich vorgehen, wenn ich meine eigene Erweiterung erstelle?
    Geändert von jenda (06.07.2017 um 15:54 Uhr)

  4. #4
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    18.544
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von jenda Beitrag anzeigen
    Und gibt es sonst eine Möglichkeit über callback, einem HTML-Tag im Backend eine CSS-Klasse zuzuweisen? Falls ja, wie muss ich vorgehen, wenn ich meine eigene Erweiterung erstelle?
    Was genau meinst du damit? Ein eigenes Backend CSS kannst du über die config.php laden lassen. zB:
    PHP-Code:
    if (TL_MODE == 'BE')
    {
        
    $GLOBALS['TL_JAVASCRIPT'][] = 'system/modules/my_extension/public/backend.css';


  5. #5
    Contao-Fan Avatar von jenda
    Registriert seit
    20.06.2009.
    Ort
    Berlin
    Beiträge
    417

    Standard

    Zum Beispiel wird im Backend für das Element Galerie die zusätzliche CSS-Klasse sgallery für das ul-Tag ausgeliefert, um die Bilder nebeneinander darzustellen. Für mich wäre es manchmal interessant und einfacher, die schon bestehenden CSS-Klassen im Backend für eigene Erweiterung zu nehmen, um den Backendstyle zu nutzen. Dafür müsste ich natürlich die HTML-Tags ansprechen können, um ihnen eine CSS-Klasse zuweisen zu können.

  6. #6
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    18.544
    User beschenken
    Wunschliste

    Standard

    Was genau meinst du mit "HTML-Tags ansprechen"? Per jQuery? Oder willst du einfach nur die Ausgabe ändern? Wenn ja, dann müsstest du dir ein eigenes be_… Template anlegen - wobei du da vielleicht nicht weit kommen wirst, da dort nicht viel Infos zur Verfügung stehen.

  7. #7
    Contao-Fan Avatar von jenda
    Registriert seit
    20.06.2009.
    Ort
    Berlin
    Beiträge
    417

    Standard

    Klar, ich könnte das auch per jQuery machen. Ich dachte an eine PHP-Lösung, wie das Contao für das INhaltselement Galerie hat.

    in widgets/FileTree.php steht z.B. das hier

    PHP-Code:
    <ul id="sort_'.$this->strId.'" class="'.trim(($blnHasOrder ? 'sortable ' : '').($this->isGallery ? 'sgallery' : '')).'">'; 
    Ich habe gedacht, dass man den HTML-Tags im Backend auch auf eine ähnliche Art und Weise eine CSS-Klasse zuweisen könnte. Ich denke aber, dass es einfache mithilfe einer jQuery-Anweisung wird, oder?

  8. #8
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    18.544
    User beschenken
    Wunschliste

    Standard

    Damit diese sgallery Klasse ausgegeben wird, musst du im eval Array im DCA isGallery auf true setzen. Siehe https://github.com/contao/core-bundl...tent.php#L1689

  9. #9
    Contao-Fan Avatar von jenda
    Registriert seit
    20.06.2009.
    Ort
    Berlin
    Beiträge
    417

    Standard

    Ach, wieder etwas Tolles und Nützliches gelernt. Vielen lieben Dank.

  10. #10
    Contao-Nutzer Avatar von Nightwing
    Registriert seit
    29.05.2013.
    Beiträge
    92

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    [ ... ] Ein eigenes Backend CSS kannst du über die config.php laden lassen. zB:
    PHP-Code:
    if (TL_MODE == 'BE')
    {
        
    $GLOBALS['TL_JAVASCRIPT'][] = 'system/modules/my_extension/public/backend.css';

    Die besagte config.php wäre wo genau zu finden?

    Muss ich zwingend den Ordner backend erstellen, oder kann ich auch meine eigene Ordnerstruktur (= files/layout/css/ ) beibehalten?
    Meine Version: 4.6.12
    Danke vorab

    ToM

  11. #11
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    18.544
    User beschenken
    Wunschliste

    Standard

    Unter Resources/contao/config/config.php deines Bundles bzw. unter app/

  12. #12
    Contao-Fan Avatar von PaddySD
    Registriert seit
    26.10.2016.
    Ort
    Andechs
    Beiträge
    521

    Standard

    In dem von Dir erstellten BE-Modul. Du weisst schon, dass es hier nicht um Frontend geht?

    EDIT: zu langsam

  13. #13
    Contao-Nutzer Avatar von Nightwing
    Registriert seit
    29.05.2013.
    Beiträge
    92

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Unter Resources/contao/config/config.php deines Bundles bzw. unter app/
    Unter app hab ich nur eine parameters.yml --> sprich die config.php einfach erstellen?

    Zitat Zitat von PaddySD Beitrag anzeigen
    In dem von Dir erstellten BE-Modul. Du weisst schon, dass es hier nicht um Frontend geht?
    Scho klar, Backend. Wie meinen mit Modul? Ich will doch nur eine *.css anlegen fürs Backend, zu Hilf
    Im Template hab ich meinen Eintrag eingefügt, aber ich hätte es gerne ohne hardcoding...

    ToM

  14. #14
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    18.544
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von Nightwing Beitrag anzeigen
    Unter app hab ich nur eine parameters.yml --> sprich die config.php einfach erstellen?
    Ja, die ganze Ordnerstruktur.

  15. #15
    Contao-Nutzer Avatar von Nightwing
    Registriert seit
    29.05.2013.
    Beiträge
    92

    Standard

    Moment, Spooky, ich muss Dich kurz nerven:

    Unter app/config/config.php speichern, oder unter app/contao/config/config.php speichern?

    Inhalt config.php:
    PHP-Code:
    <?php

    if (TL_MODE == 'BE')
    {
        
    $GLOBALS['TL_JAVASCRIPT'][] = 'files/layout/css/backend.css';
    }
    Inhalt files/layout/css/backend.css:
    PHP-Code:
    /* Hintergrund und globales Layout */
    body {
        
    font-family:UbuntuArialsans-serif;
        
    font-size:0.9em;
        
    background#424242 url("files/layout/background.png") center center no-repeat fixed;
        /* WebKit */ 
    -webkit-background-sizecover;
        
    /* Firefox */ -moz-background-sizecover;
        
    /* Opera */ -o-background-sizecover;
        
    /* Standard */ background-sizecover;
        
    overflow-yscroll;

    In der Seitenstruktur, muss ich da die backend.css mit Haken aktivieren? Ich hab sie in das vorhandene Theme importiert, zum Zwecke der Bearbeitung übers Backend...
    Muss ich jetzt sowas wie Systemwartung, Produktionscache löschen?
    Funktionieren tut nämlich noch nix?

    ToM

  16. #16
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    18.544
    User beschenken
    Wunschliste

    Standard

    Der Pfad lautet wie gesagt Resources/contao/config/config.php. Wenn du das unter app/ machst lautet der vollständige Pfad natürlich app/Resources/contao/config/config.php

  17. #17
    Contao-Nutzer Avatar von Nightwing
    Registriert seit
    29.05.2013.
    Beiträge
    92

    Standard

    Vielen Dank, so funktioniert es fast. Musste noch das hier TL_JAVASCRIPT ersetzen mit TL_CSS

    Eine letzte Frage hierzu: welche CSS Klasse nutzt man bei Contao 4 für das Hintergrundbild / die Hintergrundfarbe im Backend?
    body hat die Eigenart, ein PopUp Fenster, (z.B. im Dateisystem, Info einer Datei) dort jede zweite Zeile zu verändern plus ein Bild einzufügen...

    ToM
    Angehängte Grafiken Angehängte Grafiken

  18. #18
    Contao-Urgestein Avatar von folkfreund
    Registriert seit
    09.04.2010.
    Ort
    Dortmund
    Beiträge
    1.614

    Standard

    Guckst du mit den Browsertools:

    Im Popup greift dieses CSS:
    Code:
    .tl_show tr:nth-child(even) td {
        background: #f6f6f8;
    }
    Du kannst z.B. in deinem CSS als background "transparent" angeben, dann verschwinden die Balken.
    www.folkfreun.de - Treffpunkt für Folkmusiker, Folktänzer, Veranstalter und alle Freunde von trad. Folkmusik

  19. #19
    Contao-Nutzer Avatar von Nightwing
    Registriert seit
    29.05.2013.
    Beiträge
    92

    Standard

    Zitat Zitat von folkfreund Beitrag anzeigen
    Guckst du mit den Browsertools:
    Danke, aber ich tu mir mit den ganzen Verschachtelungen (der Verschachtelung) nicht unbedingt leicht...
    aaaber: es isch vollbracht, naja fast:

    PHP-Code:
    /* Hintergrund und globales Layout */
    body {
        
    height:100%;
        
    font:.95em Ubuntu,Arial,sans-serif;
        
    background#424242 url("../background.png") center center no-repeat fixed;
        /* WebKit */ 
    -webkit-background-sizecover;
        
    /* Firefox */ -moz-background-sizecover;
        
    /* Opera */ -o-background-sizecover;
        
    /* Standard */ background-sizecover;
    }

    /* Scrollbar dauerhaft anzeigen */
    html {
        
    background#ffffff;
        
    overflow-yscroll;
    }

    /* Pop Ups ohne Background */
    .popup #container {
        
    background#ffffff;

    Ich muss nur noch das html entschärfen, das es auf der Loginseite nicht greift...

    ToM
    Angehängte Grafiken Angehängte Grafiken
    Geändert von Nightwing (11.01.2019 um 20:43 Uhr)

  20. #20
    Contao-Urgestein Avatar von folkfreund
    Registriert seit
    09.04.2010.
    Ort
    Dortmund
    Beiträge
    1.614

    Standard

    Zitat Zitat von Nightwing Beitrag anzeigen
    Danke, aber ich tu mir mit den ganzen Verschachtelungen (der Verschachtelung) nicht unbedingt leicht...
    Dafür gibt es doch den Button "Select an element in the page to inspect it" (so heißt es zumindest in Chrome, ganz oben links in den DevTools), bei Firefox gibt's das auch.

    Was du mit "html entschärfen" meinst verstehe ich nicht. Aber du kriegst das schon hin .
    www.folkfreun.de - Treffpunkt für Folkmusiker, Folktänzer, Veranstalter und alle Freunde von trad. Folkmusik

  21. #21
    Contao-Nutzer Avatar von Nightwing
    Registriert seit
    29.05.2013.
    Beiträge
    92

    Standard

    Ja, isch mir bekannt. Aber ich bekomms edd hin...
    Hab Dir mal Bilder gemacht. Es ist auch nur das Info Popup in der Dateiverwaltung betroffen, bei z.B. Artikel, Seitenstruktur, eztc. ist alles so, wie gewünscht.

    Hier 3 Bilder: Bild 1 --> passt | Bild 2 --> so ist es mit im letzten Post geposteter css | Bild 3 --> das meinte ich mit html entschärfen, sodass der background Eintrag nur fürs Popup funktioniert, da sonst im Loginbereich das backgroundbild weg ist...

    1.PNG 2.PNG 3.PNG

    Da scheint es laut Siteinspector ja nicht viel zu geben, oder muss ich da irgendwas mit einer Pseudoklasse machen?

    ToM
    Geändert von Nightwing (14.01.2019 um 15:33 Uhr)

  22. #22
    Contao-Urgestein Avatar von folkfreund
    Registriert seit
    09.04.2010.
    Ort
    Dortmund
    Beiträge
    1.614

    Standard

    Dann schau doch mal, wo in deinem Beispiel 2 die weißen Balken her kommen.
    Oder poste einen Link zu der Seite.
    www.folkfreun.de - Treffpunkt für Folkmusiker, Folktänzer, Veranstalter und alle Freunde von trad. Folkmusik

  23. #23
    Contao-Nutzer Avatar von Nightwing
    Registriert seit
    29.05.2013.
    Beiträge
    92

    Standard

    Gerne, denn ich finde nix...
    URL: http://neu.nightwing.eu/contao/login
    .htaccess User: 1111
    .htaccess Password: 123456

    Danke für Deine Mühe!

    ToM

  24. #24
    Contao-Urgestein Avatar von folkfreund
    Registriert seit
    09.04.2010.
    Ort
    Dortmund
    Beiträge
    1.614

    Standard

    Aktuell greift für den #container auf der Login-Seite dieses CSS:
    Code:
    #container {
        margin: 15em 10px 0;
    }
    Der Background wird nur so groß wie der Inhalt dargestellt. Da nur das kleine Formular erscheint fehlt der untere Teil des Hintergrunds. Oben fehlts, da der Dialog per margin nach unten geschoben wird.

    Vermutlich wird die Klasse 'cf' nur für den Login-Dialog vergeben - kann das jemand bestätigen?
    In diesem Fall könntest du folgendes in dein CSS schreiben:
    Code:
    #container .cf {
        min-height: 100vh;
        margin: 0;
        padding: 15em 10px 0;
    }
    Also den #container auf volle Screenhöhe vergrößern, den margin von oben entfernen und den Dialog stattdessen per padding nach unten rücken.
    www.folkfreun.de - Treffpunkt für Folkmusiker, Folktänzer, Veranstalter und alle Freunde von trad. Folkmusik

  25. #25
    Contao-Nutzer Avatar von Nightwing
    Registriert seit
    29.05.2013.
    Beiträge
    92

    Standard

    Zitat Zitat von folkfreund Beitrag anzeigen
    Aktuell greift für den #container auf der Login-Seite dieses CSS:

    Vermutlich wird die Klasse 'cf' nur für den Login-Dialog vergeben - kann das jemand bestätigen?
    In diesem Fall könntest du folgendes in dein CSS schreiben:
    Code:
    #container .cf {
        min-height: 100vh;
        margin: 0;
        padding: 15em 10px 0;
    }
    Faszinierend, wie ein so kleines Problem doch ganz schöne Problemchen eröffnet...
    Dein Code ohne Leerzeichen bei der ID / Klasse funktioniert auf der Loginseite super: #container.cf
    Nachteil daran: im Backend wird sämtlicher Inhalt auch nach unten geschoben und irgendwoher holt er sich nen background...

    Hier ein Bild dazu: 4.PNG

    Das dürfte gefühlt aber nur noch ne Kleinigkeit sein?

    ToM

    PS: Login Backend: 1111 // 112233445566

  26. #26
    Contao-Urgestein Avatar von folkfreund
    Registriert seit
    09.04.2010.
    Ort
    Dortmund
    Beiträge
    1.614

    Standard

    Stimmt, das Leerzeichen darf natürlich nicht sein, da die Klasse ja dem Container zugewiesen ist.

    Aber es sieht danach aus, dass die Klasse .cf eben nicht nur dem Logindialog zugewiesen wird sondern im Backend immer. Damit ist die Grundvoraussetzung für meine Idee nicht gegeben - und aus.

    Wenn du die padding-Einstellungen (ehemals margin) weglässt, dann klebt das login am oberen Rand, aber vielleicht sieht ja sonst alles gut aus?
    Ich kann gerade nicht bei dir nachsehen...
    www.folkfreun.de - Treffpunkt für Folkmusiker, Folktänzer, Veranstalter und alle Freunde von trad. Folkmusik

  27. #27
    Contao-Nutzer Avatar von Nightwing
    Registriert seit
    29.05.2013.
    Beiträge
    92

    Standard

    Die Loginbox hab ich gerade mit .formbody in ihre ursprüngliche Lage gesetzt.
    So wie es nun ausschaut, funktioniert alles.
    Herzlichen Dank Dir!

    Hier mein fertiges css, um einen background im Backend zu Nutzen:

    PHP-Code:
    /* Hintergrund und globales Layout */
    body {
        
    height:100%;
        
    font:.95em Ubuntu,Arial,sans-serif;
        
    background#424242 url("../background.png") center center no-repeat fixed;
        /* WebKit */ 
    -webkit-background-sizecover;
        
    /* Firefox */ -moz-background-sizecover;
        
    /* Opera */ -o-background-sizecover;
        
    /* Standard */ background-sizecover;
    }

    /* Scrollbar dauerhaft anzeigen */
    html {
        
    background#ffffff;
        
    overflow-yscroll;
    }

    /* Pop Ups ohne Background */
    .popup #container {
        
    background#ffffff;
    }

    /* Loginseite Background voller Viewport */
    #container.cf {
        
    min-height100vh;
        
    margin0;
    }

    /* Loginbox nicht ganz oben */
    .tl_login_form {
        
    margin15em 10px 0;

    ToM

    Edit: Code korrigiert
    Geändert von Nightwing (14.01.2019 um 15:30 Uhr)

  28. #28
    Contao-Urgestein Avatar von folkfreund
    Registriert seit
    09.04.2010.
    Ort
    Dortmund
    Beiträge
    1.614

    Standard

    Schön!

    .formbody mag aber auch noch an anderen Stellen gesetzt werden. Besser wäre da wohl, wenn du .tl_login_form verwendest (das wird nur dem form-tag beim login zugewiesen).
    www.folkfreun.de - Treffpunkt für Folkmusiker, Folktänzer, Veranstalter und alle Freunde von trad. Folkmusik

  29. #29
    Contao-Nutzer Avatar von Nightwing
    Registriert seit
    29.05.2013.
    Beiträge
    92

    Standard

    Vielen Dank, funktioniert einwandfrei!
    Zu gegebener Zeit werden wieder css Fragen kommen
    Erstmal die Seite von 2.11.17 auf 4.6.12 portieren...

    ToM

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
  •