Wie man oxstyle benutzt?

Hallo Zusammen,

baue gerade neue Seiten für mein Shop und dabei benötige ich auch ein paar eigene Design durch CSS. Da ich die originale oxid.css nicht ändern möchte, benutze ich immer eine eigene CSS.

Ein Problem taucht dann auf, wenn ich ein Style aus oxid.css überschreiben möchte (nur für ein bestimmte Templatedatei, nicht generell), ist dies nicht einfach realisierbar, da ich die Reihenfolge nicht bestimmen kann, in der CSS-Dateien in Html importiert werden. Beispiel:

In einer Template-Datei am Ende importiere ich mein CSS und das ganze Footer:
"
[{oxstyle include=“glext/glxxx.css”}]

[{include file=“layout/page.tpl” blHideBreadcrumb=“true”}]
"

Es funktioniert nicht, da oxid.css nach meinem CSS importiert wird und somit überschreibt mein Design, statt von mein Design überschrieben wird. Wie kann ich OXID mitteilen, ich möchte das CSS z.B. ganz am Ende importieren? Danke.

VG, Ge

in /layout/page.tpl wird die /layout/base.tpl eingebunden - und dort wird die oxid.css aufgerufen

also die Zeilen vertauschen, dann sollte es gehen

[QUOTE=Hebsacker;69643]in /layout/page.tpl wird die /layout/base.tpl eingebunden - und dort wird die oxid.css aufgerufen

also die Zeilen vertauschen, dann sollte es gehen[/QUOTE]

Hi Ray,
genau das wollte ich vermeiden - deshalb auch die Zeilen direkt in meiner Template-Datei. Da mein CSS soll auch nur für eine Templatedatei gelten, mache es kaum Sinn, direkt in base.tpl auszutauschen.

Habe gesehen das für oxscript eine attribute “priority” existiert, leider scheint bei oxstyle so eine attribute nicht unterstützt wird. Gibt es auch einen anderen Weg, ohne base.tpl zu ändern?

VG, Ge

Am elegantesten würde ich es finden, wenn du die CSS-Datei in den Header schreibst - denn da gehören sie schließlich hin. Damit sie dann nur auf bestimmten Seiten geladen werden, könntest du if-Abfragen auf die aufgerufene Seiten einfügen.

Alternativ, aber ein wenig kritisch - da sich die Regeln nicht mehr so gut überschreiben lassen:
Wenn du hinter deinen CSS-Deklarationen !important notierst, kannst du auch die Werte von nachfolgenden CSS Dateien überschreiben.

Beispiel:


.klasse {
font-weight: bold !important;
}

Oder du veränderst die Reihenfolge der Regelabarbeitung durch spezifischere Deklarationen. http://www.css4you.de/wscss/css06.html#b

ich meinte so:

"
[{include file=“layout/page.tpl” blHideBreadcrumb=“true”}]

[{oxstyle include=“glext/glxxx.css”}]

"

damit wird doch Dein CSS nach der oxid.css aufgerufen, die dort enthaltene Style-Anweisungen werden doch dann nach der oxid.css eingelesen - oder hab ich jetzt einen Denkfehler?

Oder machs doch in Deinem neuen Template so:

[{include file=“layout/page.tpl” blHideBreadcrumb=“true” altcss=“glxxx.css”}]

und schreib dann in die base.tpl (um Zeile 48)

[{block name="base_style"}]
    [{oxstyle include="css/reset.css"}]
    [{oxstyle include="css/oxid.css"}]
  [{if $altcss}]		
    [{oxstyle include="css/[{$altcss}]"}]
  [{/if}]

[QUOTE=Hebsacker;69646]ich meinte so:

"
[{include file=“layout/page.tpl” blHideBreadcrumb=“true”}]

[{oxstyle include=“glext/glxxx.css”}]

"

damit wird doch Dein CSS nach der oxid.css aufgerufen, die dort enthaltene Style-Anweisungen werden doch dann nach der oxid.css eingelesen - oder hab ich jetzt einen Denkfehler?

Oder machs doch in Deinem neuen Template so:

[{include file=“layout/page.tpl” blHideBreadcrumb=“true” altcss=“glxxx.css”}]

und schreib dann in die base.tpl (um Zeile 48)

[{block name="base_style"}]
    [{oxstyle include="css/reset.css"}]
    [{oxstyle include="css/oxid.css"}]
  [{if $altcss}]		
    [{oxstyle include="css/[{$altcss}]"}]
  [{/if}]

[/QUOTE]

Hi Ray, vielen Dank für die Lösungsvorschläge, der Erste hat nicht funktioniert, mein CSS wird da einfach ignoriert. Aber der Zweite hat wunderbar funktioniert, bis auf einen: statt “[{oxstyle include=“css/[{$altcss}]”}]” muss ich natürlich [{oxstyle include=“css/$altcss”}] schreiben.

Vielen Dank nochmal.

Gruss, Ge:o

[QUOTE=Carolin;69645]Am elegantesten würde ich es finden, wenn du die CSS-Datei in den Header schreibst - denn da gehören sie schließlich hin. Damit sie dann nur auf bestimmten Seiten geladen werden, könntest du if-Abfragen auf die aufgerufene Seiten einfügen.

Alternativ, aber ein wenig kritisch - da sich die Regeln nicht mehr so gut überschreiben lassen:
Wenn du hinter deinen CSS-Deklarationen !important notierst, kannst du auch die Werte von nachfolgenden CSS Dateien überschreiben.

Beispiel:


.klasse {
font-weight: bold !important;
}

Oder du veränderst die Reihenfolge der Regelabarbeitung durch spezifischere Deklarationen. http://www.css4you.de/wscss/css06.html#b[/QUOTE]

Hi Carolin,

danke für den Vorschlag. Der sollte auch funktionieren und ich habe mich doch für Rays Lösung entschieden, da ich sowieso base.tpl schon geändert habe. Aber trotzdem danke.

VG, Ge