CSS-Dateien in TL - Wo Wie Warum - incl. suckerfish, TinyMCE

[Andreas]

Und wenn du beides nimmst?

[Sarvo]

also ich hab das bei mir im IE 7 so gefixt (ie hack) :

Ich hab dem Übergeordneten Container einen höheren z-index zugeordnet.

in meinem Fall war das #header

[Maik]

Hi,

...komisch - habe die Änderungen zurückgesetzt und jetzt scheint´s zu klappen ...

Werde das später noch am heimischen Rechner in der Virtualbox austesten ...

[Sarvo]

Bei mir funktionierts nun auch bei allen Browsern.

Aber ich hab noch was anderes gefunden

beim IE 6 verrutscht der SUCHEN Button beim Suchfeld unter das Textfeld

[Maik]

Hi Sarvo, danke für den Hinweis - da muss noch was gemacht werden.

Andreas: Nun scheint es zu funktionieren. Meine Virtualbox reklamiert nichts (XP mit IE7) ...

[Andreas]

Und durch welche Änderung funktioniert es jetzt?

[Thomas]

display:none;

Hat aber scheinbar den Nachteil, dass die Barrierefreiheit nicht mehr gegeben ist und die Submenüs nicht mehr da sind.

[Schlauchbeutelmaschine]

Ich habe eine Extension entwickelt mit der die Einbindung von externen Stylesheets erleichert werden soll.
Falls Ihr Zeit zum Testen habt würde ich mich über Feedback freuen.

[Zwergenmeister]

Hallo TL-Gemeinde,

erstelle grade meine erste Seite mit einem CMS System, hab mich für Typolight entschieden und mir auch das Buch gekauf, gelesen und mit dem Template experimentiert. Möchte aber definitiv KEIN 08/15 Template!!! Mehr Informationen zu eigenen Templates sind ja RAR in dem Buch.

Hab nach ein paar Stunden suche jetzt ja zwei Möglichkeiten zur Auswahl irgendwie anzufangen.

1. Neues Grid960/Prozent System von LEO + Basis.css / editiert über BE

oder

2. YAML per Hand importieren ? Anleitung/Video gelessen aber ein bisschen Aufwändig / Extensions sind dafür ja vorhanden zum einbinden. (Das Framework ist ja einfach zu verstehen als Anfänger) Wie gut ist das ganze und die Extensions?

Möchte alles so Pflegeleicht wie Möglich haben und Updatesicher nich das durch das Live Update alles sich ändert und ich jedes mal an einer Stelle basteln muss.

Was ist der Beste Weg ? Möchte gerne auch ein Dropdown Menü wie aus Typolight.org unterbringen. Nur Wie ?


Noch was hat jemand vielleciht einen guten Buch Tipp für CSS Einsteiger LvL ... ???

Vielen Dank für jede Hilfe

[MacKP]

Hallo Zwergenmeister,
viele Fragen.. wobei die meisten nicht in diesen Thread passen...
oder sich mit ein wenig Suche erledigt hätten.

1. und 2. geht.
Für Yaml empfehle ich _nicht_ die Erweiterung die das komplett in TL reinkloppt, aus schon genannten gründen.

Aber: nimm doch einfach das TL CSS-Framework. Damit kannst du vieles erreichen und deine Internetseite komplett individuell aussehen lassen. Deswegen steht zu eigenen Templates auch nicht viel im Buch, weils das nicht braucht.
Der Rest ist alles CSS.

Dropdownmenü hast du hier ein Tutorial wie das geht. Sogar ein genaues CSS. Mehr brauch man nicht.

Buch Tipp: CSS Layouts (nicht nur Yaml) / Box Moddel / Bulletproof WebDesign

Viele Grüße

[scube]

Vielen Dank für die Info in diesem Thread.

Hier meine "Lösung":

<style type="text/css" media="screen">
<!--/*--><![CDATA[/*><!--*/
#header { height:120px; }
#left { width:200px; }
#main {  margin-left:200px; }
/*]]>*/-->
</style>
<link rel="stylesheet" href="system/typolight.css" type="text/css" media="screen" />
<!--[if lte IE 7]><link rel="stylesheet" href="system/iefixes.css" type="text/css" media="screen" /><![endif]-->
<link rel="stylesheet" type="text/css" media="screen, projection" href="tl_files/css/basic.css" />
<link rel="stylesheet" type="text/css" media="screen, projection" href="tl_files/css/gridpx.css" />

<link rel="stylesheet" type="text/css" media="screen, projection" href="tl_files/css/elements.css" />
<link rel="stylesheet" type="text/css" media="screen, projection" href="tl_files/css/form.css" />
<link rel="stylesheet" type="text/css" media="screen, projection" href="tl_files/css/navigation.css" />
<link rel="stylesheet" type="text/css" media="print" href="tl_files/css/print.css" />

Ist die Reihenfolge der CSS korrekt?

[Andreas]

Hi scube,

jo, ich denke das ist ok. Und wenns dann noch in allen Browsern so aussieht wie du es möchtest, ist ja alles klar. Besser wäre es natürlich, ganz zum Schluss die CSS in eine Datei zusammen zu legen. Mache ich aus Bequemlichkeit meistens nicht, aber besser für die Performance wäre es schon. Gibt auch irgendeine Erweiterung dafür, die sogar komprimiert.

Andreas

achso, und danke für das Lob

[pmmueller]

Erst einmal vielen Dank für deinen Beitrag. Er hat beim Verstehen von CSS und TYPOlight wirklich geholfen. Kurze Anmerkung:

1. Im Seitentemplate fe_page.tpl
Hardcodiert wird hier im HEAD über ein LINK die Datei plugins/slimbox/css/slimbox.css importiert, damit die JavaScript-Großansicht der Bilder mit Slimbox (das ist ein Lightbox-Clone und erfordert Mootools) ihr typisches Aussehen und Verhalten bekommt. Ohne diese CSS-Datei funktioniert die Slimbox nicht. Wer weiß, dass er keine Slimbox in seiner Website einsetzen wird, kann diese Zeile aus dem Templ. entfernen.

Seit der 2.8er ist die hardkodierte Zeile zum Laden von slimbox.css nicht mehr in fe_page.tpl enthalten. Wenn man im Seitenlayout bei den MooTools templates moo_mediabox oder moo_slimbox ankreuzt, werden die benötigten Stylesheets über <?php echo $this->stylesheets; ?> automatisch mitgeladen.

[Andreas]

Hallo pmmueller,

danke für den Hinweis und dein Lob. Hatte ich auch schon gesehen und in meinen Updates aus dem fe_page.tpl entfernt, aber solange sich hier keiner meldet, gerät der Thread bei mir immer in Vergessenheit.

Ich verweise im 1. Post jetzt erstmal auf deinen Hinweis. Später werde ich im 1. Post mal alle alten Sachen rausschmeißen und genau auf TL 2.8.x überprüfen.

Gruß, Andreas

[sum40]

Ich habe ein Problem. Und zwar wenn Ihr auf diese Website geht, werdet ihr im IE8 feststellen, dass das Klappmenü gleich wieder verschwindet sobald man auf die "Unterlinks" gehen will.

Ich habe festgestellt an welchem Code es liegt. Und zwar an folgendem:

meiner

#suckerfish ul.level_1 a,
#suckerfish ul.level_1 span {
	display: block;
	width: auto; /** * adjust value if you have padding and/or borders */
	font-size: 12px;
	color: #9CF;
	border-bottom: none;
	padding: 0 10px 0 10px;
/** * formating comes here
	padding: _px;
	border: _px solid red;
  background: silver;
 */
}

original

#suckerfish ul.level_1 a,
#suckerfish ul.level_1 span {
	display: block;
	width: 140px; /** * adjust value if you have padding and/or borders */
	font-size: 22px;
/** * formating comes here
	padding: _px;
	border: _px solid red;
  background: silver;
 */
}

Ich weiss aber nicht wie ich den Fehler beheben könnte. Wenn ich meinen durch den originalen ersetzte, funktioniert es, allerdings stimmt die Darstellung überhaupt nicht.

Wenn ich eine feste Breite vergebe, funktioniert es auch. Also liegt es daran. Doch es muss doch irgendwie mit einer automatischen Breite gehen, nicht?

[Andreas]

Die suckerfish_x.css sind angepasst an das TYPOlight framework. Wenn du andere Strukturen benutzt kann alles mögliche passieren, da die browserübergreifende Funktion sehr empfindlich auf kleinste Formatierungsänderungen reagiert. Versuche dich an das TL-Framework rückwärts anzunähern. In deinem Fall kannst du auch mal versuchen den doppelten Border durch eine Hintergrundgrafik zu ersetzen. Bitte auch vorher Quellcode validieren und Fehler korrigieren. Du kannst auch mal die default.css deaktivieren, denn ohne sie funktioniert es und dann die default.css schrittweise wieder aufbauen.

[sum40]

Danke für deinen Tipp. Allerdings kann ich dir nicht ganz zustimmen. Habe die default.css deaktiviert gehabt und es ging dann auch nicht.

edit:
Habe den Border auf 0px gestellt und siehe da: Es geht. Werde es also mit dem Hintergrundbild machen müssen. Danke.

[swinde]

Hallo Andreas, ich benutze die CSS Datei "navigation_neu_alpha" auch wenn sie Alpha ist!
Danke dafür!
In der Zeile 7

/** * all current (active) pages, and hover states (so it looks like current pages) */
.mod_navigation a:focus,
.mod_navigation a:hover,
.mod_navigation a:active,
.mod_navigation a.trail:focus,
.mod_navigation a.trail:hover,
.mod_navigation a.trail:active,
.mod_navigation span,
.subnavtitle a:focus,
.subnavtitle a:hover,
.subnavtitle a:active,
.subnavtitle span,
.mod_newsmenu a:focus,
.mod_newsmenu a:hover,
.mod_newsmenu a:active,
.mod_newsmenu span,
.mod_changelanguage a:focus,
.mod_changelanguage a:hover,
.mod_changelanguage a:active,
.mod_changelanguage span {
  background-image: none;
  background-color: #FCFCFB;
  color: #A40000;
  border-color: #EEEEEC;
  text-decoration: none;
}

sind allerdings zu viele Selektoren drin, TL schneidet nach dem Importieren die Hälfte davon weg. Dadurch funktioniert z.B. kein aktiver Link im Submenü mehr.

Viele Grüße Steffen

[Andreas]

Ich ändere das jetzt aber nicht. Diese Dateien sind ja dafür gedacht, dass man nicht bei Null anfängt und schon mal die wichtigsten Selektoren sieht. Du findest bestimmt einen Weg sie zu importieren, vielleicht drittelst du sie mal in meiner Datei. Ansonsten kannst du einen Bug im CSS-Editor melden

[Jenna]

Hallo Andreas,

ich häng mich hier mal an den Thread an, ein ganz grosses Danke! für die Anleitung.

Habs damit hinbekommen, das meine content.css im tinyMCE verfügbar ist, hat zwar 3 Std. gedauert bis ich die Zusammenhänge kapiert habe, aber das war es wert.

Vielen Dank für die Anleitung, hat mir super weiter geholfen.

[Andreas]

Danke, das freut mich. Ist ja schon ein wenig älter der Thread. Ich denke ich werde ihn auch nicht mehr aktualisieren. Die nächsten Tutorials werde ich ins Inoffizielle Contao-Wiki einstellen.

Gruß Andreas

[JanMalte]

Wie macht ihr das denn dann mit den Bildern, bzw den Pfadangaben. Wenn man erst mit lokalen Dateien arbeitet, müssen ja vor der Übergabe mit dem Import ins Backend alle Pfade im CSS angepasst werden.

[pmmueller]

Wie macht ihr das denn dann mit den Bildern, bzw den Pfadangaben. Wenn man erst mit lokalen Dateien arbeitet, müssen ja vor der Übergabe mit dem Import ins Backend alle Pfade im CSS angepasst werden.

Wieso? Du speicherst Stylesheets und Bilder unterhalb von /tl_files/ irgendwo, das ist lokal und auf dem Webspace identisch.

[JanMalte]

Ja, wenn die Stylesheets als solche bleiben ist das klar. Aber mir ging es um das Vorgehen, wenn die Stylesheets für den Kunden nachher per Backend editierbar sein sollen und daher nicht mehr unter tl_files/ liegen. Oder habe ich das im ersten Beitrag falsch verstanden?

[pmmueller]

Ja, wenn die Stylesheets als solche bleiben ist das klar. Aber mir ging es um das Vorgehen, wenn die Stylesheets für den Kunden nachher per Backend editierbar sein sollen und daher nicht mehr unter tl_files/ liegen. Oder habe ich das im ersten Beitrag falsch verstanden?

Nach dem Importieren von extern nach intern musst du in den Stylesheets sowieso einiges checken und dazu gehört dann auch die Änderung der Pfadangabe für Hintergrundbilder. Das stimmt. Bis 2.9.5 liegen die Stylesheets dann ja im Root-Ordner, ab 2.10 wohl in /system/scripts/.

[Andreas]

Stimmt. Da könnte man z.B. auch vor dem Import mit Search&Replace alle Pfade von "img/" nach tl_files/css/img/" ändern.

ps Der Thread hier ist sowieso nicht mehr aktuell. In Sachen CSS hat sich in Contao und auch in der CSS-Welt einiges geändert, allerdings sind einige Punkte auch gleich geblieben.