Page 1 of 1

Template verkleinern

Posted: Wed May 07, 2008 4:13 pm
by Tina23
Hallo, ich verwende das Standardtemplate "CSS menu top 2 columns". Ist es möglich die Textspalte bzw. das ganze Template etwas zu verkleinern? Ich finde, das die Spalte zu breit ist und ein etwas längerer Text sich schlecht lesen lässt. Weiss jemand wie ich im Texteingabefeld Bilder, Links... mit einbinden kann? Habe schon einen WYSIWYG-Editor installiert, aber finde keine Möglichkeit diesen zu aktivieren. Danke für die Hilfe!

Re: Template verkleinern

Posted: Wed May 07, 2008 4:40 pm
by NaN
Schau mal ins Stylesheet für das Template.
Zu finden im Admin-Bereich unter Layout->Stylesheets (Layout: Top menu + 2 columns).
Dort steht irgendwo

Code: Select all


div#main {
   margin-left: 29%; /* this will give room for sidebar to be on the left side, make sure this space is bigger than sidebar width */
   margin-right: 2%; /* and some air on the right */
}

div#sidebar {
   float: left;  /* set sidebar on the left side. Change to right to float it right instead. */
   width: 26%;    /* sidebar width, if you change this please also change #main margins */
   display: inline;  /* FIX ie doublemargin bug */
   margin-left: 0;
}

/* if sidebar doesnt include menu but content add class="hascontent" */
div#sidebar.hascontent {
   padding: 0 1%;
   width: 24%;  /* make width smaller if there's padding, or it will get too wide for the floated divs in IE */
}
 
div#sidebar steht hier für den linken Bereich.
div#main steht für den rechten (größeren) Bereich.
Mit dem Attribut "width" kannst Du die Breiten dieser Inhaltsbereiche anpassen.

Re: Template verkleinern

Posted: Wed May 07, 2008 7:44 pm
by Tina23
Vielen Dank!
Ich möchte das *ganze* Template verkleiner. Die Sidebar soll eine Breite von 150px und der Hauptbereich von 400px haben. Geht das irgendwie?

Re: Template verkleinern

Posted: Wed May 07, 2008 9:27 pm
by NaN
Selbstverständlich.
Das gesamte Layout wird durch Stylesheets formatiert.
Diese kannst Du ändern wie Du willst.
Allerdings sind ein paar Grundkenntnisse in Sachen HTML bzw. CSS nötig.
Schau Dir dazu auch mal die Link-Liste aus diesem Thema an:

http://forum.cmsmadesimple.org/index.ph ... 812.0.html

Du musst Dir nur mal Dein Template genau anschauen.
Dort wird mit Hilfe von (leider nur englischen) Kommentaren genau beschrieben was wo im Template definiert ist.
Das ganze Template ist in einem DIV mit der ID "pagewrapper".
Im Stylesheet des Templates findest Du dazu folgende Formatierung:

Code: Select all


/* center wrapper, min max width */
div#pagewrapper {
   border: 1px solid black;
   margin: 0 auto;     /* this centers wrapper */
   max-width: 80em; /* IE wont understand these, so we will use javascript magick */
   min-width: 60em;
   background-color: #fff;;
   color: black;
}

Der "Pagewrapper" hat also eine maximale und eine minimale Breite.
Somit kann sich die Seite bis zu einem gewissen Maß an die Fenstergröße anpassen.
D.h. Du musst im Prinzip nur die Werte für min-width bzw. max-width anpassen.
Du kannst stattdessen auch nur width definieren.
Dann hat das Layout eine feste Breite.