CSS - Reihenfolge

**karo68** · 10.02.2015, 12:01

Hallo,

ich möchte die bootstrap.min.css über contao-theme-plus einbinden. Zusätzlich habe ich eine internes stylesheet, um die bootstrap-Klasssen zu überschreiben. Daher soll das interne stylesheet nach (und nicht vor) der bootstrap.min.css geladen werden. Ist es irgendwie möglich, die Reihenfolge festzulegen, wenn ich contao-theme-plus benutze?

Gruß
Karsten

**monaco** · 04.06.2015, 23:02

Hallo,

ich habe ein ähnliches Problem. Habe auch die bootstrap-css wie folgt eingebunden:

PHP-Code:


<link href="assets/components/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">

Zudem habe ich eine eigene interne CSS-Datei definiert. Leider werden aber die Vorgaben dieser nicht überschrieben.

Wo kann ich denn die entsprechende Reihenfolge der CSS-Dateien definieren, damit das Überschreiben klappt?

**monaco** · 05.06.2015, 12:10

Kann es sein, dass eine interne CSS-Datei die eingebundene CSS-Datei im head-Bereich wie in meinem Beispiel

PHP-Code:


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

nicht überschreibt?

**tab** · 05.06.2015, 12:23

Das interne CSS ist ja ebenfalls im <head> eingebunden. Insofern wird es wohl drauf ankommen, was da im <head> zuerst drinsteht im fe_page Template bzw nachher im Seitenquelltext. Das hier sollte die Zeile in fe_page sein, welche die von Contao zusammengefassten Stylesheets einbindet.

PHP-Code:


  <?php echo $this->stylesheets; ?>

**Spooky** · 05.06.2015, 12:53

Zitat von monaco

ich habe ein ähnliches Problem. Habe auch die bootstrap-css wie folgt eingebunden:

PHP-Code:


<link href="assets/components/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">

Warum machst du das überhaupt so? Warum befindet sich die bootstrap.min.css dort? Wenn du die Datei schon lokal hast, wieso bindest du sie über "Zusätzliche head-Tags" ein, statt bei den Stylesheets?

Zitat von monaco

Zudem habe ich eine eigene interne CSS-Datei definiert. Leider werden aber die Vorgaben dieser nicht überschrieben.

Wo kann ich denn die entsprechende Reihenfolge der CSS-Dateien definieren, damit das Überschreiben klappt?

Ob eine CSS Definition überschrieben wird oder nicht hängt von der Specifity ab und von der Reihenfolge. Im fe_page Template findest du im <head> folgendes:

PHP-Code:


  <?php echo $this->viewport; ?>

  <?php echo $this->framework; ?>

  <?php echo $this->stylesheets; ?>

  <?php echo $this->mooScripts; ?>

  <?php echo $this->head; ?>

Bei <?php echo $this->stylesheets; ?> werden die im Layout definierten Stylesheets ausgegeben, bei <?php echo $this->head; ?> werden unter anderem die Sachen ausgegeben, die du bei "Zusätzliche head-Tags" angegeben hast. Daher wird dein einternes Stylesheet auch vor der von dir definierten bootstrap.min.css ausgegeben.

**monaco** · 05.06.2015, 13:04

oh je, danke für den Hinweis tab und spooky. Ich habe das falsche Template ausgewählt.

Jetzt funktionierst!

**Doro** · 17.06.2015, 11:07

ich würd das gerne nochmal zusammenfassen und meine 2cents dazu geben,
da ich in das Problem auch reingelaufen bin und ich glaube ich weiss auch warum

Zitat von Spooky

Warum machst du das überhaupt so? Warum befindet sich die bootstrap.min.css dort? Wenn du die Datei schon lokal hast, wieso bindest du sie über "Zusätzliche head-Tags" ein, statt bei den Stylesheets?

als Dummy bin ich auch den Weg gegangen und hab mir das Video auf Vimeo angesehen.
Dort wird es genau so gezeigt, die components/bootstrap in den assets ordner und über die Zusätzlichen <head>-Tags einbinden.

Dadurch ist aber ein Ändern der Ladereihenfolge im Template wirkungslos, denn dann ist die Ladereihenfolge eben so festgelegt, dass die eigenen/custom.css immer von bootstrap überschrieben werden.
spät

kam mir dann die Erkenntnis, dass die bootstrap.min.css eben lokal eingebunden werden sollte, sodass sie mit den eigenen CSS-Anweisungen überschrieben werden kann.

**karo68** · 17.06.2015, 11:24

also ich habe es jetzt folgendermaßen gelöst:
Ich kopiere die bootstrap.min.css in mein file-Verzeichnis und binde diese dann als externes Stylesheet ein. Dann wähle ich "externe stylesheets zuerst laden" aus. Somit kann ich die CSS-Anweisungen dann überschreiben, s. Anhang.
bootstrap-css.jpg

**Doro** · 17.06.2015, 11:39

ja genau so habe ich es dann jetzt auch gemacht, nachdem ich mich erstmal verlaufen hatte:-)

**mj1985** · 17.06.2015, 15:50

Wieso so kompliziert?

Wenn ihr das aktuelle Contao-Bundle nutzt, dann müsst ihr doch sowieso die components/bootstrap laden oder ein externes Stylesheet einbinden.
Danach geht ihr wie folgt vor, Bootstrap als CSS-Datei über Theme+ einbinden, danach ein weiteres CSS einbinden (eurer eigenes).
Über Theme+ -> Neues CSS (File) -> Quelle: Assets. Dann im Unterordner CSS eure CSS-Datei auswählen.
Nun habt ihr in Theme+ CSS zwei Einträge, erst Bootstrap, dann euer CSS.

**Doro** · 18.06.2015, 07:49

nöööh, hat sich ja niemand beschwert dass es kompliziert sei lieber mj1985
mir war nur deutlich geworden warum ich, und offenbar vor mir monaco, in das Problem mit der Ladereihenfolge geraten sind.
und ich hatte gedacht, bevor es jemand anderem ebenso ergeht, fasse ich es mal zusammen, war eigentlich nur gut gemeint und überhaupt keine Beschwerde.
Nix weiter:-)

**webstar** · 26.06.2015, 08:18

Das Video zeigt einfach nur eine Variante um schnell an einen Prototypen zu kommen.

Bei realen Projekten würde ich nie auf die Components-Variante zurückgreifen, sondern Im Theme-Ordner mit einer individuell angepassten Variante arbeiten. Dank Less oder Sass lassen sich ja sehr leicht Teilkomponenten verwenden und über die Variablen das Standardverhalten schon leicht anpassen.

Wenn die Dateien kann im Theme-Ordner unter files liegen, lassen sich die Dateien auch wieder über den Contao-Weg einbinden. Auch wenn für mich hier immer Theme+ zum Einsatz kommt.

Thema: CSS - Reihenfolge

Themen-Optionen

Thema durchsuchen

CSS - Reihenfolge

Aktive Benutzer

Aktive Benutzer

Berechtigungen