custom.css und ihre Auswirkungen

    Hallo Leute,


    auf die Gefahr hinauf, dass ich mich hier vollkommen blamiere, aber ich seh den Wald vor lauter Bäumen nicht mehr hmm


    Aufgabe:
    Ich möchte gerne in meinem Template, das ich von Templatemonster habe, einige Änderungen an Schriften, Abständen, Farben usw. vornehmen.
    Ich beschäftige mich seit einigen Stunden damit und wollte, da dies empfohlen wird, nicht die template.css direkt ändern sondern den Weg über eine custom.css gehen, damit im Updatefall nicht alles zurückgesetzt wird.


    Bereits geschehen:
    Ich habe die custom.css erfolgreich angelegt und auch den Code, der zu ändern ist, reinkopiert und geändert.


    Problem:
    Wie schaffe ich es nun, dass Joomla weiß, dass es auf die geänderte custom.css zugreifen soll und nicht auf die vorhandene template.css?
    Soll heißen; Änderung erledigt, Wirkung im Frontend gleich null.


    Die HP ist übrigens noch nicht online.


    Vielen Dank schonmal für eure Bemühungen!!!


    Liebe Grüße

    Markus

    Es wird zunächst die template.css geladen und zum Schluss die custom.css (bzw. user.css in Verbindung mit Protostar).

    Da die custom.css zum Schluss geladen wird, werden die Einstellungen der template.css überschrieben, sofern bereits entsprechende Einstellungen existieren.

    Ob die Einbindung der custom.css automatisch erfolgt, gilt zu Überprüfen! Nutze F12 und schau, ob die custom.css geladen wird.

    Früher musste man das in die index.php selber reinschreiben, mittlerweile läuft das automatisch. Sie muss halt nur im richtigen Verzeichnis abgelegt werden.

    Bei manchen Templates/Frameworks muss man die Nutzung der custom.csss irgendwo noch aktivieren (Haken setzen)!


    Und dran denken, den Joomla- und Browser-Cache zu leeren!

    1) Hast du geprüft für dein spezifisches Template, dass die Datei wirklich custom.css heißt und nicht user.css oder ganz anders.

    2) dass das Template überhaupt eine solche Datei unterstützt und lädt (solltest du im Seitenquelltext der Seite dann ja irgendwo finden).

    3) Es liegt vermutlich ein Missverständnis vor. Diese Datei lädt eine zusätzliche Datei und ersetzt die template.css nicht. Die Anweisungen in der eigenen Datei müssen also so formuliert sein, dass sie die template.css "overrulen". Normalerweise ist das gegeben, wenn man exakt die selben Selektoren verwendet wie in der template.css. Eine Gewähr dafür gibt es aber nicht (je nach Ladereihenfolge).


    Aber das kannst du dann auch im Inspektor (Untersuchen) der meisten Browser prüfen, ob deine eigenen Regeln eventuell nicht "hart genug" gesetzt sind.


    Zitat von smartec

    Die HP ist übrigens noch nicht online.

    Das ist schade, weil alles weitere Gestocher ist ;) Wir können es nicht wissen...

    Vielen Dank für eure Antworten!

    Ich hab nun "auf gut Glück" versucht, die custom.css zu ändern in eine user.css.

    So wie ich das sehe, wird weder die Eine noch die Andere geladen.


    Ob mein Template überhaupt eine "fremde" .css unterstützt, ist eine gute Frage.
    Die Dokumentation zum Template ist leider sehr allgemein gehalten und bezieht sich wenig bis garnicht auf mein Template.
    Hier gehts zur Anleitung


    Was kann schlimmstenfalls passieren, wenn ich direkt in der template.css meine Änderungen vornehme und nach jeder Änderung (so viele sind es ja jetzt nicht) eine Sicherungskopie erstelle?


    Danke und liebe Grüße
    Markus

    Zitat von smartec

    Ob mein Template überhaupt eine "fremde" .css unterstützt, ist eine gute Frage.

    Mit einem Link zum Template bzw. zur Template-Demo könnte man es evtl, herausfinden.


    Zitat von smartec

    Was kann schlimmstenfalls passieren, wenn ich direkt in der template.css meine Änderungen vornehme und nach jeder Änderung (so viele sind es ja jetzt nicht) eine Sicherungskopie erstelle?

    Normalerweise nicht wirklich viel, solange es kein Update vom Template gibt.

    Zitat von smartec

    Was kann schlimmstenfalls passieren, wenn ich direkt in der template.css meine Änderungen vornehme und nach jeder Änderung (so viele sind es ja jetzt nicht) eine Sicherungskopie erstelle?

    Nichts schlimmes. Im unwahrscheinlichen Falle, dass für Dein Template ein Update veröffentlicht wird und Du dieses installierst, würden Deine Änderungen überschrieben. Üblicherweise behilft man sich mit einer Kopie des Templates im Backend.

    Zitat von anka

    Mit einem Link zum Template bzw. zur Template-Demo könnte man es evtl, herausfinden.

    Hier bitteschön: Template

    Zitat von Dudlhofer

    Nichts schlimmes. Im unwahrscheinlichen Falle, dass für Dein Template ein Update veröffentlicht wird und Du dieses installierst, würden Deine Änderungen überschrieben. Üblicherweise behilft man sich mit einer Kopie des Templates im Backend.

    Das war auch meine Idee. Wenn ich jedesmal ein Backup von der geänderten template.css mache, kann ja im Grunde nix passieren.


    Zitat von Elwood

    In welchem Ordner hat du die user.css erstellt?


    Wie sieht den der kopierte Code aus, den du geändert hast?

    Im Ordner /css/


    Das war der Code den ich ändern wollte, insbesondere die Schriftfarbe:

    h3 {

    color: #373d43;

    font-size: 36px;

    line-height: 40px;

    text-transform: uppercase;

    }



    Ich bin euch wirklich sehr dankbar für eure Zeit und Hilfe!!!

    Re:Later hatte es schon erwähnt.


    Besser wäre, du schiebst die Seite auf den Server und erstellst eine Subdomain.


    Somit könnten wir dir für jede Änderung eine konkrete Antwort geben, da du ja noch mehr

    Änderungen durchführen möchtest.

    Da unter der Domain die Seite sowieso noch keiner kennt, habe ich sie mal online gestellt.

    zur Homepage


    Wenn es um die Änderungen direkt in der template.css geht, tauchen auch schon die ersten Fragen auf ;)


    Direkt auf der Startseite möchte ich beispielsweise die Überschrift "UNSERE LEISTUNGEN" ändern. Genauer gesagt Farbe und Schriftgröße.
    Mach ich solche Änderungen direkt in der template.css, oder sind dort nur globale Änderungen möglich? Also wirken sich die Änderungen, die ich in der template.css vornehme auf alle H3 Überschriften aus, oder ist ein gezieltes Einstellen möglich?


    Wie immer, ein herzliches Dankeschön an alle, die mir weiterhelfen!

    Wenn Du die Entwickler-Tools Deines Browsers zu Hilfe nimmst, kannst Du exakt bestimmen, mit welchem Selektor Du arbeiten musst/kannst. Ich klicke dazu immer mit der rechten Maustaste auf das Element das ich ändern möchte (also z.B. auf "Unsere Leistungen") und wähle dann "Untersuchen" im Chrome, bzw. "Element untersuchen" im FF. In Deinem Fall sehe ich dann, dass die besagte Überschrift mit "h3.moduleTitle" selektiert werden kann, wobei das dann alle Modul-Überschriften betreffen dürfte. Wenn Du nur die Überschrift dieses einen Moduls ändern möchtest, dann kannst Du im Modul eine eigene Modulklasse angeben, die Du dann in der template.css separat definieren kannst.

    Zitat von Dudlhofer

    Wenn Du nur die Überschrift dieses einen Moduls ändern möchtest, dann kannst Du im Modul eine eigene Modulklasse angeben, die Du dann in der template.css separat definieren kannst.

    Danke für eure Antworten!


    Dudlhofer, genau darum geht´s! Ich möchte eben nur einzelne DInge ändern und nicht alles global.
    Ich befürchte, das Anlegen von Modulklassen übersteigt momentan meine Fähigkeiten bei weitem pardon

    Muss mich da bei Gelegenheit mal reinlesen.

    Zitat von smartec

    Dudlhofer, genau darum geht´s! Ich möchte eben nur einzelne DInge ändern und nicht alles global.

    Das kommt halt alles auf den ganz konkreten Fall drauf an. Aber in aller Regel ist es doch so, dass man ein einheitliches Erscheinungsbild haben möchte. Und wenn eine h3-Modulüberschrift nicht passt, dann ist es doch meistens bei den anderen auch der Fall, so dass eine globale Änderung auch Sinn machen kann. Zu viele unterschiedliche Schriften oder Schriftgrößen auf einer Seite könnten für "Unruhe" sorgen.


    Aber das Einarbeiten in die eigenen Modulklassen geht auch relativ schnell.