StyleSheets Wie beginnen?

**theo** · 19.11.2009, 09:57

Hallo

Ich habe es schon mal geschafft ein Layout mit einem Template zu basteln.
Nun wird im Beitrag "Wichtig für Beginner: Kein eigenes Template!"
davon abgeraten. Leider steht dort nicht, wie man alternativ vorgehen sollte.

Wenn man davon ausgeht, dass ich in etwa das hier gemacht habe:
http://de.contaowiki.org/typolight/T...ustomTemplates
(obwohl mein Menu jetzt nicht so sauber und rot aussieht sondern ziemlich unformatiert).

Wie weiter?
Meine Annahme war, dass ich nun im importierten xBasic die CSS-Vorlagen für die id's header, footer, main etc. finde und anpassen kann.
Da ist aber nichts ensprechendes. Muss ich die selbst einfügen?
Bin ich grundsätzlich auf dem Holzweg?

Vielen Dank

**Corazon** · 19.11.2009, 10:20

ne ganz auf dem holzweg biste nicht..
#main #left #header#footer etc. werden durch die einstellungen im seitenlayout generiert..

so die kannst du dir wenn du FF und firebug installiert hast gut anschauen und damit spielen.. wenn du dann dein änderungen mit firebug gemacht hast dann kannst du die dann in deine passende css datei eintragen..
wenn du das #main zb nicht findest .. dann legt du es einfach in der css datei an..

hoffe ich habe nicht zukompliert geschrieben

**theo** · 19.11.2009, 10:48

Danke, aber ich blicke noch nicht ganz durch.

Wo muss ich diese Änderungen eintragen?
Wenn ich die in xBasic eintrage, dann ändert sich schon was, aber ist das richtig?

Es gibt ja auch noch die Einstellungen aus dem Layout, diese werden direkt in die Page geschrieben:
z.B.

Code:

<!--/*--><![CDATA[/*><!--*/
#header { height:80; }
#left { width:500; }
#main {  margin-left:500; }
#footer { height:60; }
/*]]>*/-->

Da komme ich aber nicht ran um weitere Eigenschaften festzulegen, oder?

Ich kann schon irgendwas wurschteln, aber ich möchte es richtig machen, und deshalb frage ich.
Für Templates gibt's ein Video, aber diese soll man ja scheint's nicht benutzen.

Danke

**Sebastian** · 19.11.2009, 11:11

HI

genau, benutze die Templates lieber nicht! Du kannst diese vorgefertigten Stylesheets importieren, die sind allerdings nicht mehr aktuell (irgendwo im Forum gibt es Updates). Diese kannst du dann anpassen, verschlanken oder erweitern.

Oder du legst komplett eigene Stylesheets an. Das ist empfehlenswert, wenn du dich mit CSS gut auskennst.

Andreas hat außerdem ein CSS-Handbuch angelegt. Lesen!

Sebastian

**theo** · 19.11.2009, 12:04

Danke
Also ich hab's jetzt mal so gemacht.

Ich habe die neuen Stylesheets von deinem Link ins Seitenlayout eingebaut.
basic, elements, navigation.
Dann habe ich das CSS im Header der Seite (s. oben) in ein externes css im folder tl_files/css gepackt.
Danach habe ich alle Formatierungen im Layout (Kopfzeile, Fusszeile, Linke Spalte) auf leer gesetzt, sodass der CSS Header nicht mehr erscheint.

In "Zusätzliche <head>-Tags" habe ich folgendes geschrieben:
<link rel="stylesheet" href="/tl_files/css/mai36_1.css" type="text/css" media="all" />

Nun scheint das Layout langsam auf mich zu hören ;-)

Ist das nun der "empfohlene Weg"?
Wenn ja warum? Wozu gibt es denn die Stylesheet-bearbeitung im Backend?
Das ist gar nicht so einfach zu durchschauen.

Danke!

**Sebastian** · 19.11.2009, 12:08

HI

die Stylesheets kannst du im Backend importieren, verändern, komplett neue erstellen, etc. So kannst du die Formatdefinitionen einfach auswählen, hast einen Farbwähler, etc. zur Verfügung. Wenn dir dein eigener Weg lieber ist, verwende das Backend nicht und bearbeite die Dateien über FTP oder SSH.

Mir ist die integrierte Lösung lieber, aber das ist eben Geschmackssache.

Sebastian

**theo** · 19.11.2009, 18:49

So, habe ein bisschen rumprobiert.

Wieder mal zwei Fragen:

Ich kriege ein bestimmtes Verhalten mit CSS nur hin, wenn ich folgendes bei einem Menu (in einem Test-HTML) einfüge:

Code:

<div class="mod_navigation block" id="untermenu">
<ul class="level_1">
<li class="first last"><a href="index.php/unterseite.html" title="Eine Unterseite" class="first last" onclick="this.blur();">Unterseite</a></li>
</ul>
<p style="clear:left"></p> <!-- HIER EINGEFUEGT
</div>

Wie bring ich das dem Backend bei? Brauche ich doch ein angepasstes Template?

Zweite Frage
Das typolight.css enthält die Anweisung
.block{ overflow:hidden; }

Das kommt mir auch in die Quere.
Hat es negative Konsequenzen, wenn ich das einfach in meinem CSS mit
.block { overflow:visible; }
überschreibe? Es wird wohl einen Grund geben, dass es da ist.

Vielen Dank