05. Juli 2012

    jimdo mobile view stylen (Update)

    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.

    Screenshot: mobile view
    Screenshot: mobile view

    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.

     

    Tags: janosch007, jimdo

    Kommentar schreiben

    Kommentare: 2
    • #1

      Robin (Freitag, 06 Juli 2012 09:40)

      Evtl. wäre es cool das CSS zu "syntax-highlighten"

      http://markup.su/highlighter/ :)

    • #2

      Judith Andresen (Freitag, 06 Juli 2012 09:48)

      Done. Fehlen aber noch Farbanpassungen ;-)