12.10.2010 21:24 Uhr

Soup.io Style angepasst

Soup.io bietet ja die Möglichkeit, eigenes CSS zu verwenden. Leider gibt es keine Anleitung dafür, welche Klasse zu welchem Seitenelement zugeordnet ist (s. Wishlist-Item in Soups getsatisfaction-Datenbank). Somit muss man selber Experimentieren, wobei einem ein Tool wie Firebug! extrem hilfreich sein kann.

Das Problem, welches ich mit den Standard-Designs von Soup.io habe, ist dass der eigentliche Inhalt in einem sehr schmalen Schlauch präsentiert wird. Etwas versteckt findet sich in den Design-Einstellungen unter “CSS anpassen” die Option “Bildbreite”, jedoch ist diese bei einigen der Templates nicht wirklich hilfreich, da zwar die Bilder (und ähnl. Objekte) breiter werden, aber der “Schlauch” nicht. Dies führt zu einer rechtsseitigen “Beschneidung” der Objekte.

Mit folgenden Anpassungen realisierte ich das Aussehen von knusper.soup.io. Unter Design tätigte ich folgende Einstellungen:

Screenshot Einstellungen

Unter dem Menüpunkt “CSS bearbeiten” trägt man nun folgendes ein:

#description_search { margin-left: 46.6em; } 
#contentcontainer2 {
 float: none;
 margin-left: 15em;
 margin-right: 0;
}
 #content, #accountcontainer,
 #contentcontainer2, #contentcontainer {
 width:46em;
}

#contentcontainer2 {
 padding:0 1.2em 0 0;
 position:relative;
 width:47.2em;
}

#accountcontainer {
  margin-left:0;
  position:absolute; }

Damit macht man den “Schlauch” breiter, verschiebt ihn und richtet die restlichen Seitenelemente passsend aus. Zum damit Rumspielen bietet sich, wie gesagt, Firebug! an, dann kann man die vorgenommen Änderungen am Stylesheet quasi in Echtzeit verfolgen. Obiges CSS passt optimal zu einer Bildbreite von 580px.