Dokumentation der JIMDO-CSS


Bei jeder brandneuen JIMDO-Page sind Muster-HTML, - CSS und -DATEIEN bereits in der Schnittstelle hinterlegt.

 

Diese wird hier - unterbrochen von einigen Hinweisen oder Tipps in den grauen Boxen - einmal stark bereinigt dargestellt.

 

body {background: #333333 url(bg.gif) no-repeat top left;
padding:35px 0 0 0;margin:0;
font: 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;}

 

In diesem Quellcode wird dem Body direkt eine Standard-Schriftart, -Größe etc. mitgegeben. Ich empfehle feste Schriftdefinitionen nur zu vergeben, wenn eine benutzerseitige Änderung (z.B. über Style) grundsätzlich unerwünscht ist.

 

Für die Fließtexte body, p und die Überschriften h1 bis h3 etc. empfehle ich grundsätzlich keine Schriften, Farben etc. zuzuteilen, damit diese über den Bereich „Style“ ohne Eingriff in den Quellcode benutzseitig verändert werden können.

 

Das grundsätzliche Text-Linkverhalten mit den Pseudoklassen :hover oder a:link, a:visited etc. würde ich aber zumindest für den Aspekt text-decoration, font-weight etc. definieren.

 

#container {margin:0 auto;width:834px;background:white;}

 

Eine Mischung aus Farbtypzuweisungen wie background:white, color:#ffffff, border:1px solid rgb (255,255,255) ist zu vermeiden. Halten Sie sich am besten einheitlich an entweder die Hex- oder RGB(a)- Werte:

 

#header {padding:17px;}
#header h1, #header a {padding:0; font-family:"Helvetica","Lucida Sans Unicode",Tahoma,Verdana,Arial,Helvetica,sans-serif; font-size: 30px;

font-weight:normal;text-decoration:none;line-height: 1.3em;

color:#666666;text-align:right;} #header a:hover {text-decoration:none; }

 

 

Aus SEO-Sicht wird die h1-Schrift je Unterseite nur einmal vergeben. Ich empfehle im Header keine h1- Überschrift zu platzieren, da sie immer mit einer h1 im Fließtext, Blog etc. im dargestellten Content konkurrieren wird.

 

Selbst wenn man die Überschrift hier als #header .headueberschrift definiert, ist eine CSS-Definition der Schriftfamilie, des Linkverhaltens etc. hier auf jeden Fall angebracht.

 

#navigation {float:left;width:220px; padding:17px;} 

 

#navigation regelt an dieser Stelle nur das Aussehen des Navigationscontainers, nicht das Navigationsverhalten.

 

#sidebar {padding-top:10px;}

 

Denken Sie beim DIV #sidebar daran, dass die hier abgelegten Inhalte zunächst einmal auf jeder Unterseite sichtbar sind.

 

#content {float:right;width:530px; padding:17px;}

 

#content ist die ein extrem wichtiger Bereich Ihrer CSSDatei. Hier wird einmal nahezu alles stattfinden, was der User in seine JIMDO-Page einpflegt und seinem Besucher präsentiert. Texte, Bilder, Galerien, Videos, Shopartikel etc.

 

Den Contentbereich - sofern kreativ nicht anders verpflichtet - ausreichend breit und mit möglichst neutralem (am besten weissem) Hintergrund auszustatten, da nicht freigestellte Bilder, Widgets etc. problematisch auf zum, Beispiel buntem oder halbdurchsichtigem Hintergrund wirken können.

 

#footer {clear:both;margin-top:10px;
background: url(footer-bg.gif) repeat-x top;height:65px;}

#footer .gutter {height:30px;padding:35px 15px 0 90px;}

 

Achtung beim Footer! Hier sind durch die VARIABLE footer Areale für Fußzeilentexte, Meta- Menüs wie AGB, Impressum, Druckversion etc. vorgesehen die ihren Platz finden möchten. 

 

 Diesen Bereich in der Höhe lieber dynamisch halten anstatt ihn fix zu begrenzen.

 

ul.mainNav1,ul.mainNav2 {margin:0;padding:0;}

ul.mainNav1 li, ul.mainNav2 li {display: inline;margin: 0;padding:0;} ul.mainNav1 li a,ul.mainNav2 li a {font:normal 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;text-decoration: none;
display: block;color:#333;borderbottom: 1px solid #CCC;}
ul.mainNav1 li a {padding:4px 4px 4px 4px;}
ul.mainNav2 li a {padding:4px 4px 4px 14px;}
ul.mainNav3 li a {padding:4px 4px 4px 24px;}
ul.mainNav1 a:hover {background:#EEE; color:black;}
ul.mainNav1 a.current {font-weight:bold;}

 

Diese Standard-Navigation ist quasi der Klassiker. Horizontalmenü mit drei Ebenen. Seit Ende 2013 gibt es die Möglichkeit unterschiedliche Navigationsmodelle zu wählen oder die Variablen bei der Vergabe in der Syntax zu bearbeiten um zum Beispiel einzelne und individuell per CSS gestaltete Navigationsebenen auszugeben.

 

Siehe dazu das Kapitel „Die JIMDO-Variablen“. Im Rahmen der Navigation ist eine exakte Definition des Schriftverhaltens, -familie, -größe etc. übrigens absolut unerlässlich.

 

Referenzierung innerhalb der CSS

Wenn Sie den Bereich Layout > Eigenes Layout > Dateien nutzen um zum Beispiel eine Hintergrunddatei background.jpg für Ihre JIMDO-Page zu „hosten“, können Sie innerhalb Ihrer CSS nun ganz wie im Webdesign gewohnt auf diese Grafik referenzieren:

 

#container {margin:0 auto; width:834px; background:url(background.jpg);}

 

Bei der Verwendung von bereits in den Content eingebetteten Grafiken muss diese Syntax (gemäß vorangegangenem Kapitel „HTML Grundmodell“ mit einem absoluten Pfad versehen werden, nämlich

 

#container {margin:0 auto; width:834px; background:url(http://eigenes-designmit. JIMDO.com/app/download/8765910998/ 029.jpg?t=1385732034);}

 

Hier bitte ausschließlich den absoluten Dateipfad mit der vollständigen Syntax verwenden.

 

Referenzieren auf eine Page-ID

Wenn Sie die Page ID (siehe Kapitel ‚Grundlagen zum Design mit JIMDO’) zum Einsatz bringen möchten - um zum Beispiel den Hintergrund des Headers auf Ihrer Startseite mit einem anderen Hintergrund zu versehen - können Sie Ihren #header-Code wie folgt aufbauen:

 

#page-1234567890 #header {background:url(datei-startseite.jpg);}

#header {background:url(datei-sonstige-seiten.jpg);}

 

Damit wird dann die Hintergrunddatei für die Seite mit der Page-ID 1234567890 in Bezug auf den DIV #header gegen die Datei „datei-startseite.jpg“ getauscht. Alle anderen Seiten erhalten im #header den Hintergrund „datei-sonstige-seiten.jpg“ angezeigt.

 

Wichtig ist, dass der Header mit dem zweiten Eintrag grundsätzlich in Bezug auf seinen Hintergrund definiert ist, damit bei der gewählten Page-ID eine sichtbare Änderung eintritt. Wenn Sie im eigenen Design den Hintergrund Ihrer JIMDO-Page (das betrifft den BODY-Bereich) für eine bestimmte Seite austauschen möchten. müssen Sie die Syntax in Bezug auf die Page-ID anders aufbauen, nämlich

 

body#page-1019828263 {background: url(datei-startseite.jpg);} body {background: url(datei-sonstige-seiten.jpg);}

 

JIMDO hat in diesem Zusammenhang übrigens die bodyclasses und –styles deutlich erweitert, so dass man bestimmte Seiten oder Seitentypen ohne die Ermittlung einer ID über den Seitentyp (und Template-individuell) direkt ansprechen kann.

 

Die volle Liste dieser Klassen und Styles finden Sie – dem jeweiligen Layout zugewiesen – in der Quelltext-Anzeige der Startseite Ihrer JIMDO-Page unterhalb des Tags

 

<body class>


vorige Seite | nächste Seite