Es gab eine Umstellung der jimdo-Templates. Das war der Anlass, in Administration > Einstellungen > Head bearbeiten die Styles für den mobile view zu ändern.

Alle mobilen Styles sind im div#cc-m-container gekapselt, so dass diese nachstehenden Änderungen nur auf den mobile view wirken.
Update der Infos am 27. Juli 2012: jimdo mobile view revisited.
<style type="text/css">/*<![CDATA[*/ /** MOBILE **/ div#cc-m-container nav { border-top: 2px solid white!important; } div#cc-m-container header { background-color: #f1c631!important; padding-bottom: 10px; background: #f1c631!important; background-color: #f1c631!important; background-image: none!important; border-bottom-color: #f1c631!important; border-left-color: #f1c631!important; border-right-color: #f1c631!important; border-top-color: #f1c631!important; } div#cc-m-container header > h1 { padding-top: 15px!important; color: white!important; text-shadow: none!important; font-weight: normal !important; font-style: normal !important; padding-left: 20px!important; } div#cc-m-container div.menubtn { margin: -40px 20px 0 0 !important; } div#cc-m-container div.menubtn > a { background-color: #D66933!important; background-image: none!important; border-bottom-color: #D66933!important; border-left-color-value: #D66933!important; border-right-color-value: #D66933!important; border-top-color: #D66933!important; color: white!important;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
text-shadow: none!important;
border-radius: 0 0 0 0 !important;
border-top: 0 !important;
text-decoration: none !important;
font-weight:normal!important;
}
#cc-m-container ul#mainNav1 li, #cc-m-container ul#mainNav2 li, #cc-m-container ul#mainNav3 li { margin-left, margin-right: 20px!important; background-color: #F1C631!important; background: none!important; padding-left: 20px!important; } div#cc-m-container div.tp-navigation { border-top: 1px solid #D66933!important; background-color: #F1C631!important; padding-bottom: 10px!important; padding-left: 20px !important; padding-right: 20px !important; } div#cc-m-container div.tp-changeview, #cc-m-container div.tp-changeview a { background-color: white!important; background-image: none!important; border-bottom-color: #D66933!important; border-left-color-value: #D66933!important; border-right-color-value: #D66933!important; border-top-color: #D66933!important; color: white!important; background-color: #f1c631!important; } div#cc-m-container div.tp-changeview a { color: white!important; } div#cc-m-container section#tp-content { padding-left: 20px!important; padding-right: 20px!important; } div#cc-m-container div#tp-footer, footer { border-top: 1px solid #40509E!important; font-weight: normal!important; background-color: white!important; border-top-color: white!important; color: #40509E!important; } /*]]>*/</style>
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: Wie viel Aufschreiben muss sein?
- Vorheriger Artikel: Printstyles anpassen
- Kategorie: jimdo
Kommentar schreiben
Robin (Freitag, 06 Juli 2012 09:40)
Evtl. wäre es cool das CSS zu "syntax-highlighten"
http://markup.su/highlighter/ :)
Judith Andresen (Freitag, 06 Juli 2012 09:48)
Done. Fehlen aber noch Farbanpassungen ;-)