Frage zur Template Bearbeitung (Grid 960)

[Big Cheese]

Hallo zusammen

Zunächst mal herzliche Gratulation zu der gelungenen neuen Webs Version! Diese hat wirklich meine entferntesten Erwartungen übertroffen
Nun möchte ich das Template an meine Bedürfnisse anpassen. Da ich mich mit der 960 Grid noch nie befasst habe, gleich mal eine erste Frage. Wie bearbeitet man das Template am besten? Ich verwende den Dreamweaver und habe mal die index.html geladen. Nun sollte ich wohl noch die entsprechende css importieren. Ist das so richtig, oder wie geht man am besten vor?

Gruss Big Cheese

[Doc Olson]

Voraussetzung ist natürlich, dass Du Dich mit HTML und CSS auskennst. Dir DAS hier zu erklären, würde hier den Rahmen sprengen. Logisch.

Also, davon ausgehend, empfehle ich Dir die Lektüre der Tutorials auf http://960.gs/. Es ist nicht schwer und es gibt auch nicht wirklich viel Neues zu verstehen.

Unterm Strich bleibt dann noch die Rückfrage: was möchtest Du erreichen? Ohne dieses Wissen, ist es schwierig, Dir zu sagen, was Du tun musst.

Bzgl. Dreamweaver: ich weiss nicht, inwiefern das Tool mit dem System klar kommt. Die CSS-Dateien werden ja dynamisch per Smarty-Plugin geladen, ich bezweifle, dass DW das beherrscht.

Ich traue WYSIWYG-Editoren eh nicht über den Weg, ich habe da immer das Gefühl, nicht die totale Kontrolle zu haben. Daher arbeite ich nur mit reinen Text-Editoren. Meistens mache ich das mit der IDE Netbeans (gibt's für lau). Für kleine schnelle Aktionen ist Notepad++ sehr geil.

[Xantiva]

Was ganz wichtig ist: Lasst die Finger von den Framework Dateien (grid.css) Wenn mal etwas nicht so in das Grid passen sollte und man definiv etwas ändern muss, dann lieber mit einer eigenen Klasse die anderen Einstellungen überschreiben.

Grundsätzlich:
Ein Container kann 12 oder 16 "Spalten" aufgeteilt werden. Darin positionierst Du "grid_x", wobei X für die Anzahl der Spalten steht, wie breit das ganze werden soll. Das erste und letzte Div sollten noch mit alpha bzw. omega gekennzeichnet sein.
container_16
grid_4 alpha | grid_8 | grid_4 omega

Mit der Klasse clear wird das "floaten" zurückgesetzt.

Damit liest sich das Template vielleicht schon mal etwas leichter, entbindet aber nicht von der Lektüre der Tutorials

[jeedee]

Was ganz wichtig ist: Lasst die Finger von den Framework Dateien (reset.css und 960.css)

in welchen ordner sollen die liegen, bei mir ist nur die grid.css drin und natürlich lasse ich die finger davon, besteht auch keine notwendigkeit da was zu ändern, das geht mit den classen wunderbar

grüssle jeedee

[Xantiva]

Danke, hab's angepasst. DocOlson hatte die zusammengefasst. Ich habe noch beide in meinem Template drin.

[Kopernikus]

Ich habe zum Thema Grid auch noch kurz eine Frage.

Ich möchte gerne die grid_16 von 700px auf 900px erweitern. Nun halte ich mich natürlich an Xantiva's Ermahungen, die grid.css keinesfalls zu ändern.

Code: Alles auswählen

.container_16 
.grid_16 {
width: 940px;
}

Doch wie genau müsste diese neue Klasse aussehen, damit diese die grid_16 überschreibt?

EDIT: Ich meine natürlich die grid_16 und nicht 12. Hab diesen Beitrag entsprechend geändert

[yogi]

Hi,

da mußt Du das gesammte System anpassen, denn sonst passen ja die anderen Spaltenbreiten nicht mehr.

am besten beim GridSystem selbst nachschauen - da gibt es auch einen "Custom CSS Generator". Das ist vermutlich genau dass was Du suchst.

[Kopernikus]

Oje, dass es derart kompliziert wird, hätte ich nicht vermutet. Ich möchte ja ausschliesslich den Bereich auf der Frontseite vollständig nutzen können (siehe Screenshot - der blaue Bereich sollte einfach bis an den Rand erweitert werden). Mehr will ich überhaupt nicht. Der "Custom CSS Generator" ist zwar ganz nett, doch ich denke nur mit copy paste ist es da nicht gemacht.

[Kopernikus]

Ich denke es geht einfacher. Ich habe dieses Problem ja nur auf der Frontpage, bei welcher ich sämtliche Spalten ausgeblendet habe. Dort ist das Grid 12 mit 700px natürlich zu schmal. Wähle ich eine Kategorie an, wird die linke Spalte wieder dazugeschaltet und die 700px im Grid 12 passen perfekt.

Nun werde ich einfach eine neue Klasse für die Frontseite eröffnen und diese z.B. unter .frontpage mit 900px definieren. Ich denke da kann ich kaum etwas zerstören. Oder?

Gruss Kopernikus

[Xantiva]

Hi Kopernikus,

Ich möchte gerne die grid_16 von 700px auf 900px erweitern. Nun halte ich mich natürlich an Xantiva's Ermahungen, die grid.css keinesfalls zu ändern.

Wieso hat das grid_16 bei Dir überhaupt 700px? Im originalen grid.css ist sie schon 940px!

Code: Alles auswählen

.container_16 .grid_16 {
	width: 940px;
}