Home Navigationspfeil Doku und Anleitung Navigationspfeil Logo anpassen

Logo und Farben anpassen

Sie haben CMBasic gerade erst installiert und sind nicht zufrieden mit dem Layout? Sie verfügen nicht gerade über rasend gute CSS-Kenntnisse und wollen zumindest die Logografik anpassen? Hier verraten wir Ihnen kurz, wie das geht!

Wo liegt die Logografik?

... in Ihrem CSS-Ordner! Zumindeset gilt die Aussage von den von mir bereitgestellten Templates standard, new, new16 und gruenau. Je nach Templatewahl heißt dieser Template-Ordner standard (Version 1.4) bzw. new, new16 oder gruenau (Version 1.6.1) und liegt unterhalb des Ordners css.

Die Grafik selber heißt bei den erstgenannten Templates verlauf_logo.jpg und ist 1000 x 100 Pixel groß. Sie hat von der Breite her also Reserven, wird in der Standardinstallation jedoch rechts und unten "abgedeckt". Das gelingt, weil sie mit der Stilsprache CSS in den Hintergrund eingebunden wird.

Beim Template gruenau jedoch heißt die Grafik logogruenau.jpg und misst 810 x 205 Pixel. Aber auch hier wird sie per CSS in den Hintergrund eingebunden.

Wie wird die Datei eingebunden?

Schauen Sie doch einmal in die Stildatei cmbasic.css. Das Einbinden des Logos geschieht in folgender Stilregel:

#logo {
  text-align: left;
  height: 70px;
  width: 100%;
  color: black;
  background-color: white;
  background-image: url('verlauf_logo.jpg');
  background-repeat: repeat-y;
  margin-bottom: 10px;
}

Beim Template gruenau sieht die entsprechend wichtige Zeile jedoch etwas anders aus:

  background-image: url("logogruenau.jpg");

Bei allen genannten Templates gilt: Die entsprechende Zeile beginnt mit background-image. Und der Name der Grafik befindet sich in Gänsefüßchen innerhalb der runden Klammern. (Ob es einfache oder doppelte Gänsefüßchen sind, spielt keine Rolle.)

Sie wünschen eine andere Abbildung? Beispielsweise die ebenfalls mitgelieferte verlauf_logo_pur.jpg oder gar die verlauf_logo2.jpg usw.? Setzen Sie einfach den gewünschten Namen in den runden Klammern hinter url ein. Einzige Voraussetzung: Diese Grafik liegt in Ihrem css-Ordner, im Beispiel unter standard.

Logografiken im Ordner CSS Im Ordner des Templates liegen in aller Regel mehrere Dummy-Logografiken.

Natürlich können Sie auch den Dateinamen belassen. Ersetzen Sie die mitgelieferte Grafik durch Ihre eigene.

Und wie ändere ich die Farben?

Sie wollen die Farben der Vorlage ändern und kennen sich nicht so gut in CSS aus? Das ist nicht ganz so einfach! Soviel am Rande: Sie müssen die Eigenschaften color (Farbe) background-color (Hintergrundfarbe) und gelegentlich auch border-color (Rahmenfarbe) anpassen. Geben Sie hinter diesen Eigenschaftsnamen die gewünschten Werte an.

Sie können auch red, green oder blue eintragen. Oder einen dieser Hexadezimalwerte, den Sie beispielsweise aus Ihrem Bildbearbeitungsprogramm auslesen können.

Hier ein paar Farb-Beispiele mit Erläuterung:

color: gray; (Farbe grau)
background-color: #EEEEEE; (Hintergrund hellgrau)
background-color: transparent; (Hintergrund durchscheinend, transparent)
border-color: #CD3326; (Randfarbe in Rotton)

Ich rate: Versuch macht klug. Spielen Sie etwas mit den Werten herum und aktualisieren Sie die Ansicht. So kommen Sie hoffentlich schnell dahinter, in welcher Stilregel welche Farbeigenschaften gesteuert werden.

Profis bearbeiten natürlich gleich die Templatedatei und die CSS-Datei und schaffen Ihr ganz eigenes Layout. Hinweise dafür gebe ich Ihnen im Beitrag zum Erstellen eines eigenen Layouts.

© CMBasic.de