HTML / CSS Tricks auf Einwortsatz

Hallo Leute, 
da ich jetzt ein/zwei mal darauf angesprochen wurde, wie ich denn das Layout für Einwortsatz mit dem Vorlagen-Designer so hin bekommen habe, möchte ich euch hier meine verwendeten HTML / CSS Tricks zeigen. Zunächst einmal muss ich sagen, dass ich eigentlich ein großer Freund von Blogger bin. Das Dashboard vereinfacht die Nutzung ungemein und ermöglicht somit jedem das schreiben seines eigenen Blogs. Auch die Statistiken sind ganz interessant. Lediglich bei den Designs und Vorlagen gibt es meiner Meinung nach noch Mankos, wobei man diese oftmals mit ein paar HTML/CSS Kniffen umgehen kann. Immerhin sind sie ja so freundlich uns bieten "HTML bearbeiten" unter den Vorlagen an. 


Transparenter Blogtitel, der Header
Den Einwortsatz Titel hatte ich bereits erstellt und als web optimiertes png abgespeichert. Header upload. Im Vorlagen Designer hatte ich einen weißen Haupthintergrund, transparenz im äußeren Hintergrund und transparenz im Header- Hintergrund eingestellt. Unter  Blog-Titel hatte ich ebenfalls "transparent" angegeben, doch es klappte nicht. Jedes mal (ich bin mir nicht mehr ganz sicher) aber ich glaube wenn ich den Haupthintergrund ändern wollte, änderte sich automatisch der Header mit. Deshalb beschloss ich das händisch zu übernehmen, und verschob die Navigationsleiste und den Header in HTML nach oben. 
1.  content <...>
2.  Header <...>
3.  tabs-outer <...>
4.  content-outer <...>


Im Layout sieht das ganze dann etwas verschoben aus.

Schlussendlich habe ich dann in allen Vorlageneinstellungen die Hintergrundoptionen auf transparent gelassen.





Background, leicht durchlässig

Mittels dieser CSS-Zeile:



.colum-center-inner{background-color:rgba(255,255,255,0.9)[...]}

 

Das Hintergrundbild ist aus meiner Reihe der Oberflächen und Strukturen.


Sticky-Navigationsleiste mittels JQuery 

Da ich nicht wollte, dass die Navigationsleiste unter dem oberen Browserfenster beim scrollen verschwindet, habe ich mittels JQuery das Sticky Nav erstellt. Zuerst habe ich das Script ( bei mir über den ajax.googleapis) eingebunden und danach den Code im Headbereich eingefügt.

Im CSS Bereich kann man das ganze dann noch nach belieben anpassen.

So das war dann im großen und ganzen erstmal alles. Bei Fragen-Melden unter einwortsatz@gmail.com

eure Julia :)