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

Zitat:

---

Zitat von jenda

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?

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?

Zitat:

---

Zitat von jenda

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';
} 


---

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.

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.

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?

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

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

Zitat:

---

Zitat von Spooky

[ ... ] 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

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

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

EDIT: zu langsam

Zitat:

---

Zitat von Spooky

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

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 :D
Im Template hab ich meinen Eintrag eingefügt, aber ich hätte es gerne ohne hardcoding...

ToM

Zitat:

---

Zitat von Nightwing

Unter app hab ich nur eine parameters.yml --> sprich die config.php einfach erstellen?

---

Ja, die ganze Ordnerstruktur.

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:Ubuntu, Arial, sans-serif;
    font-size:0.9em;
    background: #424242 url("files/layout/background.png") center center no-repeat fixed;
    /* WebKit */ -webkit-background-size: cover;
    /* Firefox */ -moz-background-size: cover;
    /* Opera */ -o-background-size: cover;
    /* Standard */ background-size: cover;
    overflow-y: scroll;
} 


---

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

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

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

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.

Zitat:

---

Zitat von folkfreund

Guckst du mit den Browsertools:

---

Danke, aber ich tu mir mit den ganzen Verschachtelungen (der Verschachtelung) nicht unbedingt leicht...:rolleyes:
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-size: cover;
    /* Firefox */ -moz-background-size: cover;
    /* Opera */ -o-background-size: cover;
    /* Standard */ background-size: cover;
}

/* Scrollbar dauerhaft anzeigen */
html {
    background: #ffffff;
    overflow-y: scroll;
}

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


---

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

ToM

Zitat:

---

Zitat von Nightwing

Danke, aber ich tu mir mit den ganzen Verschachtelungen (der Verschachtelung) nicht unbedingt leicht...:rolleyes:

---

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 ;).

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...

Anhang 21780 Anhang 21781 Anhang 21782

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

ToM

Dann schau doch mal, wo in deinem Beispiel 2 die weißen Balken her kommen.
Oder poste einen Link zu der Seite.

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

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.

Zitat:

---

Zitat von folkfreund

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: Anhang 21789

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

ToM

PS: Login Backend: 1111 // 112233445566 ;)

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...

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-size: cover;
    /* Firefox */ -moz-background-size: cover;
    /* Opera */ -o-background-size: cover;
    /* Standard */ background-size: cover;
}

/* Scrollbar dauerhaft anzeigen */
html {
    background: #ffffff;
    overflow-y: scroll;
}

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

/* Loginseite Background voller Viewport */
#container.cf {
    min-height: 100vh;
    margin: 0;
}

/* Loginbox nicht ganz oben */
.tl_login_form {
    margin: 15em 10px 0;
} 


---

ToM

Edit: Code korrigiert

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).

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

Guten morgen!

Ein Problemchen mit einem anderen popup ist noch aufgetaucht: Popup bei Templates, Inhalte vergleichen.
Ein Rand mit dem Hintergrundbild bleibt, den ich jedoch wioe bei allen anderen gerne weiss hätte.
Folgende CSS wirken laut Webinspektor:

Code:

---

div#container.cf

#container.cf

body.win.xxx.xxx

div.simple-modal-body

---

Problem, siehe meine CSS einen Post höher: #container.cf ist schon vergeben...
Wie spreche ich nun per CSS das Element an?

ToM

Das Problem dürfte hier sein, dass der Inhalt in einem iframe steckt und der DOM-Pfad identisch ist und sich via CSS auch nicht festlegen lässt, dass die Eigenschaft nur für den Container innerhalb des Modals (Popups) greifen soll.

Meine erste Idee war:

Code:

---

body:not(#top) div#container.cf

---

Das body-Element der eigentlichen Seite hat die ID "top", der body des iframes nicht. Leider hat der body der Login-Seite keine ID, insofern wäre das wohl leider auch keine Hilfe. Ohne dass html, body oder container sich irgendwie unterscheiden, wüsste ich keine Möglichkeit, wie Du den Hintergrund des Containers im Modal anpassen kannst ohne dass es sich auf den Hintergrund des Containers auf der Login-Seite auswirkt; neben der Login-Seite dürften dann wohl auch noch andere Seiten ohne "top"-ID sein, z. B. der Installer. Vielleicht wäre es eine Option, hier ein Template (ich kann dir leider nicht sagen, welches) anzupassen, damit der body oder der Container innerhalb des Modals eine ID/Klasse bekommen, um das Element exklusiv ansprechen zu können.

Danke für die ausführliche Antwort. Ja, irgendwas in die Richtung habe ich schon befürchtet...
Naja, ich werd mir was überlegen.

Gibt es eigentlich für die neue Version auch sowas wie ein CSS ABC, da hab ich irgendwoher eins für Version 2.11 rumfahren:

HTML-Code:

---

/** Layout **/
body {}
#left {}
#top_image {}
 
 
/** Article **/
.ce_text,
.teaser
div.error,
p.error {}
.mod_article .back {}
.mod_article .more {}
 
/** Breadcrumb **/
.mod_breadcrumb {}
 
/** Gallery **/
.ce_gallery .caption {}
 
 
/** Article **/
.mod_article .pdf_link {}
.mod_article .pdf_link a {}
 
 
/** Lost password **/
.mod_lostPassword {}
.mod_lostPassword td {}
.mod_lostPassword .text,
.mod_lostPassword .password {}
.mod_lostPassword .captcha {}
.mod_lostPassword .captcha_text {}
 
/** Listing **/
.ce_list ul {}
.ce_list li {}
 
/** Navigation **/
.mod_navigation {}
.mod_navigation ul {}
.mod_navigation li {}
.mod_navigation .level_2 {}
.mod_navigation .level_2 li {}
.mod_navigation a,
.mod_navigation li,
.mod_navigation span {}
.mod_navigation .level_2 a,
.mod_navigation .level_2 li,
.mod_navigation .level_2 span {}
 
/** Accordion **/
.ce_accordion {}
.toggler {}
.toggler_first {}
.toggler_first:hover {}
.accordion div {}
 
/** Login form **/
.mod_login {}
.mod_login label {}
.mod_login .checkbox_container {}
.mod_login .checkbox_container label {}
.mod_login .submit_container {}
#request_password {}
#request_password a {}
 
/** News **/
.mod_newsmenu,
.mod_eventmenu {}
#breaking_news {}
.mod_newsmenu ul,
.mod_newsmenu li,
.mod_eventmenu ul,
.mod_eventmenu li {}
.mod_newsmenu .year,
.mod_eventmenu .year {}
.mod_newslist p {}
.mod_newsreader .back {}
.mod_newslist .info,
.mod_newsreader .info {}
.mod_newslist .layout_short {}
.mod_newsreader .ce_text {}
.mod_article,
.mod_newsreader {}
.mod_newsreader h2 {}
.mod_newsreader .comment_default {}
.mod_newsreader .comment {}
.mod_newsreader .reply {}
.mod_newsreader .form {}
.mod_newsreader .widget {}
.mod_newsreader .textarea {}
 
/** Search **/
.mod_search {}
.mod_search .text {}
.mod_search .radio_container {}
.mod_search .radio_container label {}
.mod_search .header {}
.mod_search h3 {}
.mod_search .context {}
.mod_search .url {}
.mod_search .relevance {}
.mod_search .highlight {}
 
/** Calendar **/
table.calendar {}
table.calendar .head {}
table.calendar .current {}
table.calendar .label {}
table.calendar td {}
table.calendar td.weekend {}
table.calendar .today {}
table.calendar .empty,
table.calendar .empty .header {}
table.calendar td .header {}
table.calendar td .event a {}
 
/** Mini calendar **/
#minicalendar {}
table.minicalendar {}
table.minicalendar td {}
table.minicalendar td,
table.minicalendar .active a {}
table.minicalendar .weekend {}
table.minicalendar .today {}
table.minicalendar .label {}
table.minicalendar .head {}
table.minicalendar .current {}
 
/** Events **/
.mod_eventlist {}
.mod_eventlist .header {}
.mod_eventlist .header.first {}
.mod_eventlist .event {}
.mod_eventlist .time {}
.mod_eventreader .info {}
.mod_eventreader .recurring {}
.mod_eventreader .ce_text {}
.mod_eventreader .back {}
 
/** Personal data **/
.mod_personalData {}
.mod_personalData fieldset {}
 
*+html .mod_personalData fieldset {}
.mod_personalData legend {}
.mod_personalData .submit_container {}
*+html .mod_personalData .submit_container {}
.mod_personalData td {}
.mod_personalData .text,
.mod_personalData .password {}
.mod_personalData select {}
*+html .mod_personalData select {}
fieldset.radio_container,
fieldset.checkbox_container {}
 
/** Tables **/
.ce_table {}
.ce_table td {}
 
/** Listing **/
*+html .ce_list li {}
 
/** Tables **/
.ce_table th {}
.ce_table th a {}
 
 
/** Pagination **/
.pagination li {}
 
/** Tables **/
#tps td {}
 
/** Pagination **/
.pagination {}
 
/** Tables **/
#tps .col_0 {}
 
/** Pagination **/
.pagination p {}
 
/** Tables **/
#tps .explanation {}
 
/** Pagination **/
.pagination ul {}

---

ToM