Nun geht es um das Feld über den Shoutys. Diese sind dazu gedacht um den Shouty`s Überschriften zu geben oder einfach nur um das Design optisch etwas mit der Navigation zu verbinden. Ratsam wäre schon, dass man all diese Sachen farblich abstimmt. Zu viele verschiedene Bilder machen ein Design zu unruhig und deine Besucher haben wenig Freude an deiner Homepage und werden sie wohl meiden.

td.sidebar_heading{background-image:url(https://img.webme.com/pic/d/designcodes/sidebarheading.png);height: 24px;background-color:#XXXXXX;border: 1px solid #c0c0c0;}

Das ist wäre der zuständige Befehl für das Feld über den Shoutys und ist dadurch auch neben dem Contenttop. Nehmt auch hier wieder die gleiche Höhe wie vom Contenttop und von dem nav_heading. Die Breite beträgt diesmal 168 Pixel. Das bedeutet, dass ihr (wenn ihr das gleiche Bild nehmt wie im nav_heading), das es in der Breite geändert werden muss. Achtet aber darauf das ihr nicht aus Versehen die Höhe mit ändert.


Auch hier könnte man das Feld auch ausschalten. Dazu ändert ihr den Code in

td.sidebar_heading{background-image:url(URL);height: 0px;background-color:#XXXXXX;border: 0px solid #ffffff;

Auch hier ist es wieder so, dass ein Abstand zum Header gegeben ist.

Das Beschriften der einzelnen Felder findet ihr direkt bei "Design einstellen". Überlegt euch genau was ihr dort dann so reinschreibt. Sollte man beispielsweise einen Kalender in die Shouty setzen, wäre es Quatsch "Kalender" als Überschrift zu wählen. Das sieht man ja wohl auch so.



Verschiedene Buttons über den Boxen sind ebenfalls möglich. Der erste Teil des Codes muss transparent gemacht werden. Die übrigen bekommen dann die erforderlichen Button, die Ihr auch vorher beschriften könntet. Je nachdem wieviel Mühe man sich machen möchte.

Hier wäre ein Anschaubild: Klick

td.sidebar_heading{background-image: none;height:
25px;width:168px;background-color:#XXXXXX;border: 0px solid #1D4050;}

table#sidebar_heading_1{background-image:url(http://666kb.com/i/bomhxe2n7fulfjmk0.png);height:
25px;width:168px;background-color:#XXXXXX;border: 0px solid #1D4050;}
 
table#sidebar_heading_2{background-image:url(http://666kb.com/i/btp91365u9uyl0dfq.png);height:
25px;width:168px;background-color:#XXXXXX;border: 0px solid #1D4050;}
 
table#sidebar_heading_3{background-image:url(http://666kb.com/i/btp937rocf89a03ra.png);height:
25px;width:168px;background-color:#XXXXXX;border: 0px solid #1D4050;}
 
table#sidebar_heading_4{background-image:url(http://666kb.com/i/btp91y1qg9ytmzy12.png);height:
25px;width:168px;background-color:#XXXXXX;border: 0px solid #1D4050;}

table#sidebar_heading_5{background-image:url(http://666kb.com/i/btp929wu5ps1dg8p2.png );height:
25px;width:168px;background-color:#800000;border: 0px solid #1D4050;}

Dadurch, dass ein Maß in den Codes steht, könnt Ihr diese auch ändern. Im originalem Design hat man eine Breite von 168 Pixel. Hier könntet Ihr dann auch 185 nehmen (dann wären die Boxen gleich breit mit der Navigation), oder sogar noch breitere Boxen. Nur nicht übertreiben.

Achtet aber darauf, dass die Shoutys sich ebenfalls verbreitern. Nehmt also für die Shoutboxen einen Farbton oder ein ansatzfreies Bild.