jimdo.com hat gezaubert. Es gibt nun mehrere Themes für mobile views. Basierend auf einer jimdo-Vorlage (s.w.u.) habe ich (abermals) farbliche Anpassungen vorgenommen.

Update: jimdo ermöglicht das Anpassen des mobilen Layouts in der Sektion "Mobile Ansicht". Der passende Blogbeitrag findet sich hier: "Durch eigenes CSS das mobile jimdo Layout weiter optimieren".
Die nachfolgenden Anpassungen werden in ADMIN / Einstellungen / Head bearbeiten eingefügt.
<style type="text/css"> /*<![CDATA[*/ /** MOBILE **/ div#cc-m-container header { box-shadow: 0 0 0 #D66933!important; background-color: #D66933!important; padding-bottom: 10px; background: #D66933!important; background-image: none!important; border-bottom-color: #D66933!important; border-left-color: #D66933!important; border-right-color: #D66933!important; border-top-color: #D66933!important; } div#cc-m-container div.menubtn { border-bottom: 0px; box-shadow: 0 0 0 #D66933!important; } div#cc-m-container header h1 { font-style: italic; text-weight: bold; padding-top: 30px!important; background: none!important; } div#cc-m-container ul#mainNav1 li a { padding-left: 0px!important; } div#cc-m-container ul#mainNav2 li a { padding-left: 30px!important; color: #40509E !important; } div#cc-m-container ul#mainNav3 li a { padding-left: 60px!important; color: #40509E !important; } ul#mainNav1 li, ul#mainNav2 li, ul#mainNav3 li { border-bottom: 1px solid #F1C631; } div#cc-m-container ul.mainNav1 li a.current, div#cc-m-container ul.mainNav1 li a, div#cc-m-container ul.mainNav1 li a.parent, div#cc-m-container ul.mainNav1 li a:hover, ul.mainNav1 li a.current:hover, div#cc-m-container ul.mainNav1 li a.parent:hover { background: none repeat scroll 0 0 transparent!important; color: #40509E !important; } div#cc-m-container div.datetime.dt-style6 p.day,
div#cc-m-container div.datetime.dt-style6 p.mon { color: white!important; } div#cc-m-container div.hr{ border-bottom: 1px solid #F1C631; padding-bottom: 30px; } div#cc-m-container { margin-right: 20px!important; margin-left: 20px!important; margin-top: 10px!important; margin-bottom: 10px!important; } div#cc-m-container nav { box-shadow: 0 0 0 white!important; } footer, .tp-changeview { background: none !important; margin: 0em; padding-left: 0px!important; padding-right: 0px!important; } div.tp-changeview a { background: none!important; border-bottom: 1px solid #F1C631!important; background-color: #F1C631!important; border-radius: 0px!important; box-shadow: 0 0 0px #40509E!important; color: white!important; } div#cc-m-container div.tp-changeview, div#cc-m-container div.tp-changeview a { background: none!important; border-radius: 0px!important; box-shadow: 0 0 0 white!important; } div#cc-m-container a:link, div#cc-m-container a:visited { color: #40509E; } div#cc-m-container div.n h1, div#cc-m-container div.n h2, div#cc-m-container div.n h3, div#cc-m-container h1#post-xxx { padding: 0px!important; } div#cc-m-container div.menubtn a, div#cc-m-container div.menubtn { box-shadow: 0 0 0 #D66933!important; border-bottom: 0px; background-color: #f1c631!important; background: #f1c631!important; color: white!important; font-style: normal!important; font-weight: normal!important; } div#cc-m-container section#tp-content div#content-area { margin-right: 10px!important; margin-left: 10px!important; } /*]]>*/ </style>

Der mobile view basiert auf der rechts im Ausschnitt gezeigten jimdo-Version.
Ein Test im Browser ist mit /?mobile=1 aufrufbar.
Ich setze Webfonts ein, das Styling ist generell überarbeitet, die Printversion ist auch angepasst.
Dieser Blog-Post ist ein privater Beitrag von Judith Andresen.
- Nächster Artikel: Das schafft Ihr doch, oder?
- Vorheriger Artikel: Hey, Danke!
- Kategorie: jimdo
Kommentar schreiben