Schatten Rahmen im Template einbauen

Bei vielen Tutorials wird gezeigt wie man den Schatten entfernt. Z.b. bei Bildern, da dieser Effekt unerwünscht ist.
Heute zeige ich euch wie ihr einen Schatten einbauen ins gesamte Layout einbauen könnt. Ich finde zum Beispiel einige Layouts mit Schatten weitaus ansprechender, halt nicht so blank und ich selbst habe ihn auch eingebaut ♫ ♪

Vorher solltet ihr euch euer Template sichern mit einem Backup ;)

1. Zuerst öffnet ihr in eurem Dashboard die Berbeitung für das Layout. Dann geht ihr selbstverständlich auf HTML bearbeiten und sucht die Stelle mit Strg F,nach:

#main-wrapper {

Direkt unter dem Code fügt ihr diesen ein:


-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-goog-ms-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);

Wenn ihr auch einen Schatten bei der sidebar haben möchtet, sucht dann die Stelle:

#sidebar-wrapper {

auch wieder direkt nach dem Code diesen wieder einsetzen.

-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-goog-ms-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);

Hier einmal ein Beispiel, mit Sidebar und Main Schatten eingebaut

und hier ohne Sidebar Schatten.

Wie ihr dennoch euer mit den rgba-Werten spielt ist euch überlassen.

greetz Missy