hallo in die runde,
wie erreiche ist, dass mein main.css auch so im quelltext
verlinkt wird und nicht ein zusammengesetztes css á la 02d0c8cb178bc.css entsteht?
das muss man doch irgendwo ausschalten können, oder?
lg.
alex
Druckbare Version
hallo in die runde,
wie erreiche ist, dass mein main.css auch so im quelltext
verlinkt wird und nicht ein zusammengesetztes css á la 02d0c8cb178bc.css entsteht?
das muss man doch irgendwo ausschalten können, oder?
lg.
alex
Nur über den Debug Modus. Und ansonsten über zusätzliche <head> Tags, wo du die Datei manuell einbindest.
Allerdings frage ich mich welchen Sinn oder Grund Du dafür hast?
Es ist doch gut, dass es so gelöst ist wie es ist.
@Samuell - Wenn man CSS-Dateien manuell mit seinem Editor bearbeitet braucht man die einzelne Datei im FE
Da ich permanent an CSS-Dateien arbeite, finde ich das für mich auch nicht zufriedenstellend, dass ich da jedesmal den Debugmodus einschalten muss. Leider arbeiten die Entscheider da anders und so konnte ich mein Feature-Request, dass "Externe Stylesheets" einzeln geladen werden, wenn ich im BE eingeloggt bin, nie durchsetzen.HTML-Code:<link href="files/css/meineDatei.css" rel="stylesheet">
Seit längerer Zeit lade ich meine CSS und JS-Resourcen deshalb über eine eigene Datei, welche ich mit {{file::load-resources.html5}} im Feld Zusätzliche <head>-Tags einbinde.
templates/load-resources.html5 (abgespeckte Version)
PHP-Code:<?php
/**
* Load combined or minified ressources only when no user is logged in
* Info: Ressources with |static gets combined
*/
$static = '|static';
$min = '.min';
$cssPath = 'files/css/';
$jsPath = 'files/js/';
/**
* If a user is logged in:
* Empty the $static and $min varible
* Also remove |static from extensions CSS and JS
*/
if(sha1(session_id().(!Config::get('disableIpCheck') ? Environment::get('ip') : '').'BE_USER_AUTH') == Input::cookie('BE_USER_AUTH'))
{
if(is_array($GLOBALS['TL_CSS']))
{
foreach($GLOBALS['TL_CSS'] as &$value)
{
$value = str_replace($static, '', $value);
}
}
$static = '';
$min = '';
}
/** CSS */
// Use the $min variable if you also have a minified version, e.g. myfile.min.css
$GLOBALS['TL_USER_CSS'][] = $cssPath.'normalize'.$min.'.css'.$static;
$GLOBALS['TL_USER_CSS'][] = $cssPath.'tinymce.css'.$static;
/** JS */
// Use the $min variable if you also have a minified version, e.g. myfile.min.js
$GLOBALS['TL_JAVASCRIPT'][] = $jsPath.'misc.js'.$static;
$GLOBALS['TL_JAVASCRIPT'][] = $jsPath.'myfile'.$min.'.js'.$static;
?>
@ Andreas: Danke für das Schildern Deines Arbeitsablaufs.
Ich binde meine Dateien, bzw. meine Datei auch als externe Resource ein. Jedoch hat es mich beim Fehlersuchen bisher noch nicht gestört, dass alles zusammengefasst ist.
Trotz einer minifizierten scss klappt das Fehlerkorrigieren bisher ausreichend gut.
Vielleicht einfach Geschmackssache :-)
Ich hab mir - quasi - ein Theme-Stylesheet über die Layout-Einstellungen im Theme eingebunden. Das kann ich dann einfach (per FTP) überschreiben, und schon sind auch meine Styles aktuell.
@gaxweb: Darum geht es hier nicht. Es geht darum, dass wenn du über "Externe Stylesheets" eine CSS-Datei einbindest, dass diese dann in den Combiner kommt - z.B. assets/css/e30849125d72.css und von dort geladen wird. Nur wenn du den Debug-Modus aktivierst wird sie direkt geladen - z.B. files/css/my-style.css.
Ok. Warum das Leute stört erschließt sich mir nicht (sofern man den Cache deaktiviert hat), aber jeder wie er meint. :)
Das wird sich dir dann erschließen, wenn du intensiv mit eigenen CSS-Dateien arbeitest und mit den Dev-Tools des Browsers auf Lösungssuche nach bestimmten Probleme oder Anpassungen in Kundenprojekten gehst.
Irgend wie bin ich hier jetzt nicht ganz durchgestiegen*lach*
Ich bin auch noch recht unbedarft was Contao angeht...
Irgend wie bin ich da auch ein bisschen... naja*lach* Die CSS Auszeichnungen werden zum einen in der "laxout.css" gespeichert, zum anderen finde ich die gleichen Werte aber auch in der Datenbank... Also übers Backend alles einzelnd eintragen... Neeeeeeeee
Themes » firstside » Stylesheets » layout
Aber wenn ich über FTP auf die besagt CSS Datei zugreife, etwas änder und es speicher, dann passiert nix. Die Datei ist geändert, aber im Browser passiert einfach gar nichts. Habe ich irgend wo vergessen einen Haken zu setzen? wo ist mein Fehler?
Danke für eure Hilfe
Die Datei, die du da änderst, wird gar nicht eingebunden. Die wird automatisch aus den DB / Backendwerten erzeugt für jedes Stylesheet im internen Editor. Sie wird auch jedes Mal überschrieben, wenn das CSS neu erzeugt wird. Und danach wird sie dann mit allen anderen CSS-Dateien in einer Datei mit kryptischem Namen zusammengeführt. Und diese Datei, aus der alle Leerzeichen entfernt sind, wird dann in deinem HTML-Quelltext eingebunden.
Ok das schon mal sehr dienlich. Gibt es denn irgend wie ne Möglichkeit das alles zu importieren? Oder gibt es einen css Editor? Weil immer für jeden Senator so ein neues Ding starten, wenn ich da ein komplettes Layout baue sitze ich da ja unendlich lang dran. ^^
Gesendet von meinem E6853 mit Tapatalk
P.s. Ist diese Css Datei dann nicht eigentlich auch datenmüll, oder hat die noch irgend einen tieferen Sinn?
Gesendet von meinem E6853 mit Tapatalk
Du kannst auch weiterhin normal CSS schreiben. Oder sogar SASS/Less wenn du möchtest. Im Seitenlayout kannst du dazu dann deine Dateien auswählen (die dann in /files liegen müssen).
Von daher brauchst du dir da jetzt nicht so einen Stress machen. Weitere Infos gibts über eine Suche deiner Wahl.
Die Generierte CSS-Datei ist keine Datenmüll. Das ist die Zusammengeführte CSS-Datei aus den Dateien/Daten, die du angibst.
Viele Grüße
Mal ein schneller Versuch einer Auflistung der Möglichkeiten von CSS-Dateien mit Contao:
Bezeichnung Quelle Ziel Ziel mit Debug Änderung per FTP wird übernommen Contao CSS-Framework assets/contao/css assets/css/ - kombiniert wie Quelle - einzeln nein Interne Stylesheets Datenbank assets/css/ - kombiniert assets/css/ - einzeln nein Externe Stylesheets files/[Pfad] assets/css/ - kombiniert wie Quelle - einzeln nur wenn im BE eingeloggt Layout HEAD <link rel="stylesheet" src="[Pfad]" ... wie Quelle wie Quelle ja Template $GLOBALS['TL_CSS'] = [Pfad[|static]]; wie Quelle, mit |static assets/css/ - kombiniert wie Quelle - einzeln nur ohne |static o. nur wenn im BE eingeloggt
Anhang 18046
das ist auf jeden Fall eine Möglichkeit die funktioniert!
:D
@Andreas
Nach einer Lösung für genau das Problem suche ich bereits seit einiger Zeit.
Deinen Code habe ich auch gleich probiert (Contao 3.5.17) und er funktioniert - zumindest zu Teil.
zB swipe.css wird separat eingebunden und nicht mehr über zB "assets/css/c1b9fb4073a1.css".
Auch das externe Stylesheet wird separat eingebunden, wenn ich eingeloggt bin.
zB "$GLOBALS['TL_USER_CSS'][] = $cssPath.'styles.css'.$static; "
ABER in der zusammengefassten Datei "assets/css/..." bleibt diese extern eingebundene Datei auch stehen und wird nicht wie zB swipe.css dort nicht mehr eingebunden.
Ist das bei dir auch so, oder habe ich was falsch gemacht?
Nein, ich habe nur eine CSS wenn ich ausgeloggt bin und alle CSS-Dateien einzeln, wenn ich eingeloggt bin.
Mach mal zwei Dumps in der Datei, einmal oben und einmal unten und sieh dir die Ausgabe eingeloggt und ausgeloggt an.
Ich habe mein Script allerdings mitlerweile aufgemotzt. Ich entferne jetzt auch ||static von den Variablen. Dann berücksichtige ich jetzt auch TL_FRAMEWORK_CSS und TL_USER_CSS. Weiterhin schreibe ich dann alle gefundenen CSS-Dateien nur noch in die TL_CSS. Dann berücksichtige ich auch .scss-Dateien. Auch kontrolliere ich core und extension CSS-Dateien auf ein fehlendes |static, welches ich dann hinzufüge, wenn ich nicht eingeloggt bin. Insgesamt sieht das dann in etwa so aus.PHP-Code:$arrDebug = array();
$arrDebug['TL_CSS'] = $GLOBALS['TL_CSS'];
$arrDebug['TL_JAVASCRIPT'] = $GLOBALS['TL_JAVASCRIPT'];
$arrDebug['TL_FRAMEWORK_CSS'] = $GLOBALS['TL_FRAMEWORK_CSS'];
$arrDebug['TL_USER_CSS'] = $GLOBALS['TL_USER_CSS'];
$arrDebug['TL_HEAD'] = $GLOBALS['TL_HEAD'];
$arrDebug['TL_BODY'] = $GLOBALS['TL_BODY'];
dump($arrDebug);
PHP-Code:<?php
/**
* Load combined or minified ressources only when no user is logged in
* Info: Ressources with |static gets combined
* You also can use |async to render the async attribute for JS
*/
$static = '|static';
$arrStatic = array('||static', $static);
$min = '.min';
$cssPath = 'files/css/'; // edit your path to css files
$jsPath = 'files/js/'; // edit your path to js files
// Fetch all core and extension CSS resources and rebuild a new $GLOBALS['TL_CSS']
$TL_FRAMEWORK_CSS = is_array($GLOBALS['TL_FRAMEWORK_CSS']) ? $GLOBALS['TL_FRAMEWORK_CSS'] : array();
$TL_CSS = is_array($GLOBALS['TL_CSS']) ? $GLOBALS['TL_CSS'] : array();
$TL_USER_CSS = is_array($GLOBALS['TL_USER_CSS']) ? $GLOBALS['TL_USER_CSS'] : array();
$GLOBALS['TL_CSS'] = array_merge($TL_FRAMEWORK_CSS, $TL_CSS, $TL_USER_CSS);
$GLOBALS['TL_FRAMEWORK_CSS'] = array(); // empty
$GLOBALS['TL_USER_CSS'] = array(); // empty
/**
* If a user is logged in:
* Set $beUserLoggedIn to true
* Empty the $static and $min varible
* Also remove |static from extensions CSS and JS
*/
if(sha1(session_id().(!Config::get('disableIpCheck') ? Environment::get('ip') : '').'BE_USER_AUTH') == Input::cookie('BE_USER_AUTH'))
{
$beUserLoggedIn = true;
// remove |static from CSS when logged in
foreach($GLOBALS['TL_CSS'] as $k => $v)
{
// not from SCSS
if(strpos($v, '.scss') === false)
{
$GLOBALS['TL_CSS'][$k] = str_replace($arrStatic, '', $v);
}
}
// remove |static from JS when logged in
if(is_array($GLOBALS['TL_JAVASCRIPT']))
{
foreach($GLOBALS['TL_JAVASCRIPT'] as $k => $v)
{
$GLOBALS['TL_JAVASCRIPT'][$k] = str_replace($arrStatic, '', $v);
}
}
$static = '';
$min = '';
}
else // add static to all CSS and JS if not logged in
{
foreach($GLOBALS['TL_CSS'] as $k => $v)
{
if(strpos($v, $static) === false)
{
$GLOBALS['TL_CSS'][$k] = $v.$static;
}
}
if(is_array($GLOBALS['TL_JAVASCRIPT']))
{
foreach($GLOBALS['TL_JAVASCRIPT'] as $k => $v)
{
if(strpos($v, $static) === false)
{
$GLOBALS['TL_JAVASCRIPT'][$k] = $v.$static;
}
}
}
}
/** Edit your resources below this line */
// my CSS
$GLOBALS['TL_CSS'][] = $cssPath.'normalize.css'.$static;
$GLOBALS['TL_CSS'][] = $cssPath.'basic.css'.$static;
$GLOBALS['TL_CSS'][] = $cssPath.'layout.css'.$static;
$GLOBALS['TL_CSS'][] = $cssPath.'custom.css'.$static;
$GLOBALS['TL_CSS'][] = $cssPath.'tinymce.css'.$static;
// my JS
$GLOBALS['TL_JAVASCRIPT'][] = $jsPath.'misc.js'.$static;
@Andreas
Absolut spitze.
Mit deinem aufgemotzten Skript klapp es super.
Da frage ich mich ernsthaft, warum das nicht im Core ist.
Zum debuggen und arbeiten absolut Pflicht.
Vielen Dank dir dafür.
Freut mich, dass es funktioniert hat. Ja mit dieser Einbindung macht das Arbeiten an den Dateien echt Spaß.