jimdo mobile view revisited (Update)

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.

Screen: andresen.de im mobile view
jimdo mobile view

 

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>
Screenshot der Ausgangsversion
Original jimdo mobile view

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.


 

Kommentar schreiben

Kommentare: 0