CSS wirkt nicht im Theme

Hallo,

bitte Hilfe bei eine Anfängerfrage:
die Stile meines CSS sind auf den Webseiten einfach nicht sichtbar.

Meine Vorgehensweise:

• Seite XY mit Startpunkt und Unterseiten (inkl. Navigation) erstellt
• Theme erstellt
• im Theme eine Layout Z erstellt und im Layout auch Module eingebunden (Module sind auch sichtbar)
• der Seite XY das Seitenlayout Z zugewiesen
• im Theme ein Stylesheet (screen) angelegt und
  Code:

  ---

  body {background-color: #000}

  ---

  eingefügt.

… aber diese Stilanweisung und alle anderen Stile des CSS werden auf den Seiten einfach nicht angewendet.
Was habe ich vergessen?
Vielen Dank im Voraus für Eure Tipps!
Alex

Hallo Alex, willkommen im Contao Forum.

Was mir in deiner Auflistung noch fehlt:
CS-Dokument im Seitenlayout aktiviert.
Nur dann wird ein intern angelegtes CSS auch "ausgeliefert" und sichtbar.

Fehlt dieser Schritt oder nur nicht beschrieben?

Zitat:

---

Zitat von planepix

Hallo Alex, willkommen im Contao Forum.

Was mir in deiner Auflistung noch fehlt:
CS-Dokument im Seitenlayout aktiviert.
Nur dann wird ein intern angelegtes CSS auch "ausgeliefert" und sichtbar.

Fehlt dieser Schritt oder nur nicht beschrieben?

---

Danke für den Hinweis. Ja, das Stylesheet hatte ich im Layout ausgewählt/aktiviert.

Das Theme funktioniert insoweit, dass z.B. man die angegebene Breite des Layouts (statisch) angewendet wird und alle eingebundenen Module sichtbar sind. Nur das Stylesheet kommt nicht zur Anwendung.

Hallo Alex,

gibt es ein Link zur Website?
Ggf. kommt man so zur Lösung.

Zitat:

---

Zitat von planepix

Hallo Alex,

gibt es ein Link zur Website?
Ggf. kommt man so zur Lösung.

---

Leider nein, das Projekt ist nur lokal (MAMP).
Viele Grüße

Ok.

Wenn du einmal den Quelltext mit Firefox und Firebug analysierst:
Findest Du dann das CSS wieder im Quellcode?

Code:

---

@media screen
{
/* Style sheet Name-des-CSS*/
body{ ...

---

Zitat:

---

Zitat von planepix

Ok.

Wenn du einmal den Quelltext mit Firefox und Firebug analysierst:
Findest Du dann das CSS wieder im Quellcode?

Code:

---

@media screen
{
/* Style sheet Name-des-CSS*/
body{ ...

---

---

Ich finde mehrere css:

Code:

---

<link rel="stylesheet" href="system/scripts/45fe0dc5ba5b.css" media="all">
<!--[Theme 01 Standard]><link rel="stylesheet" href="system/scripts/th01_scr.css" media="all,screen"><![endif]-->
<script src="system/scripts/e53a815ab435.js"></script>
<!--[if lt IE 9]><script src="plugins/html5shim/html5-3.js"></script><![endif]-->

---

Das 45fe0dc5ba5b.css kenne ich nicht. Mein th01_scr.css wirkt nicht, obwohl es doch im Quellcode steht. Das verstehe ich nicht :-(
Vielen Dank schon mal bis hierher für die Hilfe!

Woher kommt denn <!--[Theme 01 Standard]>? Hast du das dorthin geschrieben oder macht das irgendeine Erweiterung?

Jupp das hab ich mich auch gefragt.
Oder ist das ein externes CSS das manuell eingebunden ist?
Ggf. sogar via Anpassung der fe_page.*?

Offline ist es immer schwierig da Tipps zu geben.
(K)eine chance das online zu stellen?

Zitat:

---

Zitat von Gecko

Woher kommt denn <!--[Theme 01 Standard]>? Hast du das dorthin geschrieben oder macht das irgendeine Erweiterung?

---

Ich hatte noch keine Erweiterung installiert. Theme01 habe ich (ganz kreativ) mein Theme genannt, und es als Standard-Theme definiert. Das müsste Contao so hineingeschrieben haben.

Zitat:

---

Zitat von planepix

Jupp das hab ich mich auch gefragt.
Oder ist das ein externes CSS das manuell eingebunden ist?
Ggf. sogar via Anpassung der fe_page.*?

Offline ist es immer schwierig da Tipps zu geben.
(K)eine chance das online zu stellen?

---

Ich traue mich noch nicht, externe CSS einzubinden oder sogar ein Template zu verändern.

Online stellen kann ich das nicht so schnell, da ich noch keinen Webserver dafür gemietet hab'. Und wenn ich das schon am Anfang nicht auf die Reihe kriege … :-(
Vielleicht sollte ich Contao neu installieren und nochmals von vorne anfangen.

Vielen herzlichen Dank für die Unterstützung!

Schau Dir doch einfach mal das CSS an, das in dem automatisch generierten File drin steht. Den müsstest Du ja eigentlich lesen können.

Neu aufsetzen bringt Dich übrigens hier kaum weiter, denn das ist ja kein systemischer Fehler von Contao, sondern eine Einstellungssache.

Ruf Deine Seite mal im Browser auf, dann mach eine Kopie des Quellcodes und häng das hier an. Ausserdem rufst Du den Link zu Deiner CSS-Datei direkt im Browser auf

Code:

---

http://meineSuperLokaleSeite.local/system/scripts/45fe0dc5ba5b.css

---

und kopierst den erhaltenen Code ebenfalls hier rein.

Hallo zu aller erst mal,
bin hier ganz frisch und so geht es mir auch mit Contao, da bin ich auch ganz frisch.

Habe in der Areit schon contaoseiten gepflegt, aber das System war schon aufgesetzt.

Baue gerade meine neue Seite. Das mache ich nach der Buchanleitung von Peter Müller.

Alles hat funktioniert bis zur Vergabe der Farben und Rahmenlinien für einzelne Divs. Wie es scheint übernimmt bzw. gibt die Seite immer nur die Werte für Body aus. Sprich entsprechende Farbe und fonteinstellungen. Farbhintergründe für den Wrapper oder den Header gibt er nicht aus, Rahmenlinien auch nicht. Habe es gestern abend mit firefox probiert, heute mit safari, mit dem Ergebnis: nix außer body werte.

Mal die technischen Angaben:

URL: http://www.jahn-film.de
Contaoversion: 2.11.5
Contaoinstallation mit one-click Installation bei Alfahosting
PHP 5.2

Werde langsam ein bißchen irre, möchte eigentlich gerne mit dem CMS arbeiten und nicht wieder statische Webseiten basteln. Falls Ihr noch mehr Angaben benötigt, Scrennshots oder ähnliches mache ich das gerne. Finde komischerweise auch die Erweiterung csseditor nicht. Vielleicht ist es ja ein Problem bei Alfahosting? Dafür kenne ich mich nun wiederum zu wenig mit Servereinstellungen aus!
Please help!!!!

Deine Selektoren sind falsch. Du benutzt wrapper, meinst aber #wrapper (du willst das Element mit der ID, deshalb die Raute). Siehe http://jendryschik.de/wsdev/einfuehrung/css/selektoren

Hallo dein CSS ist komplett falsch

HTML-Code:

---

header{}

---

ist in deinem Fall kein HTML-Element sondern eine Id
das musst du so zuweisen

HTML-Code:

---

#header{}

---

genauso bei container etc. Schau dir dazu nochmals CSS mit den Selektoren an.

Edit: Zu lahm gewesen.

Danke für die Hilfe,

Ich glaub ich hab es begriffen. Klar body ist keine ID sondern eben body bei allen anderen muss ich zusehen die Raute für die ID zu setzen. Gott oh Gott, komme mir gerade wie der Superanfänger vor.

Danke für die Hinweise. ICh teste gleich mal.

Schön zu sehen, dass es Foren gibt die so toll fnktionieren!

Zitat:

---

Zitat von Alexandra

I<!--[Theme 01 Standard]><link rel="stylesheet" href="system/scripts/th01_scr.css" media="all,screen"><![endif]-->

---

Hier meine Vermutung:

• Du hast ein Stylesheet namens th01_scr angelegt (richtig)
• Du hast im Feld Conditional Comment den Text "Theme 01 Standard" geschrieben (falsch).

Dein Stylesheet wird wie ein Conditional Comment ausgeliefert, nur dass die Bedingung natürlich nicht sinnvoll ist. Alle Browser ignorieren das, weil es für sie wie ein HTML-Kommentar aussieht. CCs sind keine normalen Kommentare, sondern dazu da, um Stylesheets an bestimmte Versionen vom Internet Explorer auszuliefern (Conditional Comment in Little Boxes).

Zitat:

---

Zitat von der Wolf

Klar body ist keine ID sondern eben body bei allen anderen muss ich zusehen die Raute für die ID zu setzen. Gott oh Gott, komme mir gerade wie der Superanfänger vor.

---

Welcome to Contao, und schön, dass das Problem gelöst ist.

Vielleicht zur Auffrischung: Ein Selektor wählt das zu gestaltende Kästchen aus und die folgenden Abschnitte über IDs, Klassen und dergleichen ;-)

Hallo Herr Müller,

ja klar, eigentlich kann ich das auch. Habe schon einige Webseiten gebaut, aber der Workflow in Contao ist doch erstmal ungewohnt, wenn man von Phase5 oder Dreamweaver herkommt.
Am gewöhnungsbedürftigsten ist aber, dass man den HTML Quellcode immer nur über den Browserumweg mit Quelltext anzeigen anschauen kann. Da muss ich ich mich erst umstellen, und dann passieren genau solche Lapsusdinger.
Aber ich glaube es wird langsam und Ihr Buch ist echt tipptopp gerade für den Einstieg.

Vielen Dank

Zitat:

---

Zitat von Paddy0174

Schau Dir doch einfach mal das CSS an, das in dem automatisch generierten File drin steht. Den müsstest Du ja eigentlich lesen können.

Neu aufsetzen bringt Dich übrigens hier kaum weiter, denn das ist ja kein systemischer Fehler von Contao, sondern eine Einstellungssache.

Ruf Deine Seite mal im Browser auf, dann mach eine Kopie des Quellcodes und häng das hier an. Ausserdem rufst Du den Link zu Deiner CSS-Datei direkt im Browser auf

Code:

---

http://meineSuperLokaleSeite.local/system/scripts/45fe0dc5ba5b.css

---

und kopierst den erhaltenen Code ebenfalls hier rein.

---

Hier Teile des HTML-Seitencodes:

HTML-Code:

---

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<!--

        This website is powered by Contao Open Source CMS :: Licensed under GNU/LGPL
        Copyright ©2005-2012 by Leo Feyer :: Extensions are copyright of their respective owners
        Visit the project website at http://www.contao.org for more information

//-->
<title>Startseite</title>
<base href="http://www.example.com">
<meta name="robots" content="index,follow">
<meta name="description" content="Willkommen bei …">
<meta name="keywords" content="contao">
<style media="screen">
#wrapper{width:960px;margin:0 auto;}
#header{height:100px;}
#left{width:220px;}
#main{margin-left:220px;}
#footer{height:150px;}
</style>
<link rel="stylesheet" href="system/scripts/45fe0dc5ba5b.css" media="all">
<!--[Theme 01 Standard]><link rel="stylesheet" href="system/scripts/th01_scr.css" media="all,screen"><![endif]-->
<script src="system/scripts/e53a815ab435.js"></script>
<!--[if lt IE 9]><script src="plugins/html5shim/html5-3.js"></script><![endif]-->
</head>
<body id="top" class="mac safari sf6">

<div id="wrapper">

<header id="header">
<div class="inside">

<!-- indexer::stop -->
<div id="logo"><a href="" title="Logo"><img src="tl_files/bilder/logo.gif" width="300" height="70" alt="Logo" /></a></div>
<!-- indexer::continue -->
<!-- indexer::stop -->
<div class="mod_randomImage block">

<figure class="image_container">
<img src="tl_files/bilder/Bild.jpg" width="1024" height="173" alt="Bild">
</figure>

</div>
<!-- indexer::continue -->
 
</div>
</header>
usw.

---

Hier das CSS der (nicht von mir erstellten) 45fe0dc5ba5b.css:

HTML-Code:

---

@media screen{
/* Contao Open Source CMS :: Copyright (C) 2005-2012 Leo Feyer :: LGPL license */
body{margin:0;padding:0;font-size:100.01%;text-align:left;position:relative}select,input,textarea{font-size:99%}form{margin:0;padding:0}img{border:0}#left{float:left}#right{float:right}#main{width:auto;position:relative}.inside{position:relative;text-align:left}.block{overflow:hidden}.clear,#clear{height:0.1px;font-size:0.1px;line-height:0.1px;clear:both}.invisible{width:0;height:0;left:-1000px;top:-1000px;position:absolute;overflow:hidden;display:inline}.custom{display:block;text-align:left}.custom:after{content:".";display:block;height:0;clear:both;visibility:hidden}*+html #main{position:static}header,footer,nav,section,aside,article,figure,figcaption{display:block}
}
@media all{
/* mediaboxAdvanced - black theme */
#mbOverlay{position:fixed;z-index:9998;top:0;left:0;width:100%;height:100%;background-color:#000;cursor:pointer}#mbOverlay.mbOverlayFF{background:transparent url("../../plugins/mediabox/1.4.6/images/80.png") repeat}#mbOverlay.mbOverlayIE{position:absolute}#mbCenter{position:absolute;z-index:9999;left:50%;overflow:hidden;background-color:#000;-webkit-border-radius:10px;-khtml-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-box-shadow:0 5px 20px rgba(0,0,0,0.50);-khtml-box-shadow:0 5px 20px rgba(0,0,0,0.50);-moz-box-shadow:0 5px 20px rgba(0,0,0,0.50);box-shadow:0 5px 20px rgba(0,0,0,0.50);-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#000000')";filter:progid:DXImageTransform.Microsoft.Shadow(Strength=5,Direction=180,Color='#000000')}#mbCenter.mbLoading{background:#000 url("../../plugins/mediabox/1.4.6/images/loading.gif") no-repeat center;-webkit-box-shadow:none;-khtml-box-shadow:none;-moz-box-shadow:none;box-shadow:none}#mbImage{position:relative;left:0;top:0;font-family:Myriad,Verdana,Arial,Helvetica,sans-serif;line-height:20px;font-size:12px;color:#fff;text-align:left;background-position:center center;background-repeat:no-repeat;padding:10px}#mbBottom{min-height:20px;font-family:Myriad,Verdana,Arial,Helvetica,sans-serif;line-height:20px;font-size:12px;color:#999;text-align:left;padding:0 10px 10px}#mbTitle,#mbPrevLink,#mbNextLink,#mbCloseLink{display:inline;color:#fff;font-weight:bold;line-height:20px;font-size:12px}#mbNumber{display:inline;color:#999;line-height:14px;font-size:10px;margin:auto 10px}#mbCaption{display:block;color:#999;line-height:14px;font-size:10px}#mbPrevLink,#mbNextLink,#mbCloseLink{float:right;outline:0;margin:0 0 0 10px;font-weight:normal}#mbPrevLink b,#mbNextLink b,#mbCloseLink b{color:#eee;font-weight:bold;text-decoration:underline}#mbPrevLink big,#mbNextLink big,#mbCloseLink big{color:#eee;font-size:16px;line-height:14px;font-weight:bold}#mbBottom a,#mbBottom a:link,#mbBottom a:visited{text-decoration:none;color:#ddd}#mbBottom a:hover,#mbBottom a:active{text-decoration:underline;color:#fff}#mbError{position:relative;font-family:Myriad,Verdana,Arial,Helvetica,sans-serif;line-height:20px;font-size:12px;color:#fff;text-align:center;border:10px solid #700;padding:10px 10px 10px;margin:20px;-webkit-border-radius:5px;-khtml-border-radius:5px;-moz-border-radius:5px;border-radius:5px}#mbError a,#mbError a:link,#mbError a:visited,#mbError a:hover,#mbError a:active{color:#d00;font-weight:bold;text-decoration:underline}
}

---

Mein eigenes CSS ist im Entwicklerfenster (Safari) oder Firebug überhaupt nicht aufzufinden. Darin enthalten ist lediglich eine Anweisung für Hintergrundfarbe (Cyan, damit es gleich sichtbar ist) und Schrift (Verdana) - allein das wird auf der Seite schon nicht dargestellt.

Vielleicht ist Dir dieser Post durchgerutscht, aber da vermute auch ich den Fehler...

Zitat:

---

Zitat von pmmueller

Hier meine Vermutung:

• Du hast ein Stylesheet namens th01_scr angelegt (richtig)
• Du hast im Feld Conditional Comment den Text "Theme 01 Standard" geschrieben (falsch).

Dein Stylesheet wird wie ein Conditional Comment ausgeliefert, nur dass die Bedingung natürlich nicht sinnvoll ist. Alle Browser ignorieren das, weil es für sie wie ein HTML-Kommentar aussieht. CCs sind keine normalen Kommentare, sondern dazu da, um Stylesheets an bestimmte Versionen vom Internet Explorer auszuliefern (Conditional Comment in Little Boxes).

---

Hast Du das geprüft? :)

Zitat:

---

Zitat von Paddy0174

Vielleicht ist Dir dieser Post durchgerutscht, aber da vermute auch ich den Fehler...

Hast Du das geprüft? :)

---

Dankeschön für den Hinweis. Den Kommentar hatte ich dummerweise übersehen. Werde gleich darauf antworten.

Zitat:

---

Zitat von pmmueller

Hier meine Vermutung:

• Du hast ein Stylesheet namens th01_scr angelegt (richtig)
• Du hast im Feld Conditional Comment den Text "Theme 01 Standard" geschrieben (falsch).

Dein Stylesheet wird wie ein Conditional Comment ausgeliefert, nur dass die Bedingung natürlich nicht sinnvoll ist. Alle Browser ignorieren das, weil es für sie wie ein HTML-Kommentar aussieht. CCs sind keine normalen Kommentare, sondern dazu da, um Stylesheets an bestimmte Versionen vom Internet Explorer auszuliefern (Conditional Comment in Little Boxes).

---

Ich habe bewusst keine Conditional Comments definiert. Wo finde ich bitte das Feld, in dem ich den Text "Theme 01 Standard" als Conditional Comment definiert habe? Danke für die Hilfe.

P.S.
Sind Sie es wirklich: Little Boxes? Mit Ihren Büchern habe ich HTML und CSS neu kennen gelernt!

Zitat:

---

Zitat von Alexandra

Ich habe bewusst keine Conditional Comments definiert. Wo finde ich bitte das Feld, in dem ich den Text "Theme 01 Standard" als Conditional Comment definiert habe?

---

Bei den Eigenschaften des Stylesheets. Da wo auch der Medientyp all, screen definiert wurde. Da ist rechts darüber ein Textfeld für Conditional Comments.

Zitat:

---

Zitat von Alexandra

Sind Sie es wirklich: Little Boxes? Mit Ihren Büchern habe ich HTML und CSS neu kennen gelernt!

---

Ja, und danke für das Kompliment ;)

Problem gelöst.

Ich hatte in das Feld “Conditional Comments” etwas eingetragen, das eigentlich nur als normaler „Kommentar“ dienen sollte :o

Vielen Dank für die Hilfe!

Na, dann habe ich ja richtig geraten.

Viel Spaß noch mit Contao ;)