CMS Made Simple Forums

Ich bin inzwischen an meiner zweiten Webseite mit CMSMS. Es ist das einzige System, das ich soweit verstanden habe, daß ich damit arbeiten kann... Die anderen sind viel zu kompliziert.

Jetzt möchte ich ein paar Dinge anders machen als bei meiner ersten Webseite, und dann kommen neue Fragen.

1. Ich habe das Grundlayout von CMS, wo bei der Seitenüberschrift und bei den News links jeweils so eine gelbe Box gezeigt wird. Ich konnte leider noch nicht herausfinden, wo das in den CSS steht. Ich möchte nämlich gern ein Bildchen in die gelben Boxen einfügen. Wo kann ich das machen?

2. Ich habe links im Header mein Logo, möchte aber weiter in der Mitte noch zusätzlich Text hinzufügen. Wie mache ich das?

Danke schon mal für Eure Hilfe!

Schau mal im Backend unter Layout->Stylesheets im Stylesheet Module: News nach.
Gleich am Anfang steht dort

div#news {
  margin: 2em 0 1em 1em;  /* margin for the entire div surrounding the news list */
  border: 1px solid #000;
  background: #FFE9AF;
}

Um da jetzt ein Hintergrundbild einzufügen brauchst Du nur folgendes zu ändern:

div#news {
  margin: 2em 0 1em 1em;  /* margin for the entire div surrounding the news list */
  border: 1px solid #000;
  background: url(Pfad_zum_Bild/Bildname) #FFE9AF;
}

Mehr Infos zum Thema Hintergrund und CSS findest Du bei Self HTML

jo, das hatte ich auch schon versucht, aber dann zeigt es leider das Bild nicht in der kleinen gelben Box neben der Überschrift, sondern im Newsbereich drin.

Ah... die gelbe Box meintest Du.
Das ist keine Box.
Das ist ein Rahmen.
Im Stylesheet Layout: Left sidebar + 1 column steht relativ weit unten /* HEADINGS */.
Da werden die Überschriften formatiert.
Alle Überschriften zweiter Ordnung haben alle einen 1 Pixel breiten Rahmen unten und einen 1.1em breiten Rahmen links:

div#content h2 {
color: #294B5F;
font-size: 1.5em;
text-align: left;
/* some air around the text */
padding-left: 0.5em;
padding-bottom: 1px;
/* set borders around header */
border-bottom: 1px solid #e7ab0b;
border-left: 1.1em solid #e7ab0b;
        line-height: 1.5em;
/* and some air under the border */
        margin: 0 0 0.5em 0;
}

Wenn Du das für den News-Bereich anders haben willst, muss Du diese Eigenschaft im News-Stylesheet wieder überschreiben.
Dort steht gleich an zweiter Stelle:

div#news h2 {
  line-height: 2em;
  background: #fff;
}


Wenn Du daraus jetzt z.B. folgendes machst:

div#content div#news h2 {
  line-height: 2em;
  background: url(Pfad_zum_Bild/Bildname) -10px center #fff;
}

dürfte die Hintergrundgrafik nur bei der Überschrift in der News-Box im linken Rahmen sitzen.
Bei der Position der Hintergrundgrafik musst Du evtl. noch ein wenig rumprobieren.
Du kannst dort auch %-Werte oder em-Werte benutzen.

sehr guter Tip, vielen Dank! Jetzt habe ich nur noch ein Problem: Die Grafik wird nur solange angezeigt, wie sie sich noch rechts von dem linken, gelben Block befindet. Je mehr ich sie in diesen gelben Block reinschiebe, desto mehr verschwindet sie hinter gelb. Wenn ich sie an den Platz bringe, wo sie eigentlich sein sollte, kann ich sie nicht mehr sehen, weil das Gelb die Grafik überdeckt. Woran kann das liegen?

Sorry, mein Fehler.
Das kann so leider nicht funktionieren.
Du müsstest die Grafik ja außerhalb der Überschrift platzieren.
Und Hintergrundgrafiken, die über den Rahmen hinausgehen, werden numal nicht mehr angezeigt.
Das Element (die Überschrift) ist dort zu Ende. Da geht einfach nix mehr.
Anderes gilt für Inhalte. (Also das was in der Überschrift steht.) Die können auch mal über den Rand hinaus laufen.

Versuchs mal mit einem Bild im Template.
Im Template steht irgendwo

{* Start News *}
     
        News
          {news number='3' detailpage='news'}
     
{* End News *}

Setz da einfach mal in die Überschrift ein Bild rein:

{* Start News *}
     
        News
          {news number='3' detailpage='news'}
     
{* End News *}

Und gib dann im News-Stylesheet für die Überschrift folgendes ein:

div#news h2 {
  line-height: 2em;
  background: #fff;
}

div#news h2 img {
  margin:0 0.5em 0 -1.5em;
}

Habs grad mal getestet. Sieht dann so aus: http://www.kuehlbornundmoeller.de/test/
Bei den margin-Werten musst Du evtl. noch etwas probieren.

Und zu Deiner zweiten Frage:

Dazu musst Du eine kleine Änderung im Template und im Stylesheet vornehmen.
Im Template steht irgendwo

{* Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet  "For template: Left menu + 1 column" *}
 
        {cms_selflink dir="start" text="$sitename"}
 
 
{* End Header *}

Mach daraus mal das hier:

{* Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet  "For template: Left menu + 1 column" *}
 
        {cms_selflink dir="start" text="$sitename"}
        Blah!
 
 
{* End Header *}

Und im Stylesheet muss Du dann nur noch die Eigenschaften der beiden DIVs "logo" und "header_text" festlegen.
Such mal im Stylesheet Layout: Left sidebar + 1 column nach den Eigenschaften des Headers und ändere das mal in:

/*** header ***
we will hide text and replace it with a image
we need to assign a height for it so that the image wont cut off
*/
div#header {
  height: 80px;    /* adjust according your image size */
  background: #385C72;         
}

div#header div#logo
{
  width: 20%;
  float:left;
}

div#header div#logo h1 a {
/* you can set your own image here */
  background: #385C72 url(images/cms/logo1.gif) no-repeat 0 12px;
  display: block;
  height: 80px;            /* adjust according your image size */
  text-indent: -999em;  /* this hides the text */
  text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

div#header div#header_text
{
  float:left;
  width: 80%;
  text-align:center;
  line-height:80px;
}

Bei mir sieht das dann so aus: http://www.kuehlbornundmoeller.de/test/
Bei der Breite der beiden DIVs "logo" und "header_text" musst Du (wie immer) evtl. noch ein wenig was ändern. Kommt auf die Größe Deines Logos an.
In meinem Beispiel dürfen allerdings die beiden DIVs zusammen nicht breiter sein als der DIV "pagewrapper".
Wenn's breiter ist, rutscht der Text-DIV unter das Logo.
Deshalb hab ich es erstmal mit relativen Größen 20% und 80% probiert.

Vielen herzlichen Dank für die genaue Anleitung! Es klappt wunderbar!!! Super. Danke.