BERATUNG JUDITH ANDRESEN
  • Change gestalten
  • Coachen + Begleiten
  • Besser führen
  • Im Team arbeiten
  • Über uns
  • Blog
  • Termine
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.


  • Nächster Artikel: Wie viel Aufschreiben muss sein?
  • Vorheriger Artikel: Printstyles anpassen
  • Kategorie: jimdo

 

tagPlaceholderTags: 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 ;-)

ÜBER UNS
BLOG
KONTAKT
TERMINE
RÄUMLICHKEITEN

LinkedIn
Newsletter
Shop
Veröffentlichungen
Volltextsuche

1 Gilt für Lieferungen in folgendes Land: Deutschland. Lieferzeiten für andere Länder und Informationen zur Berechnung des Liefertermins siehe hier: Liefer- und Zahlungsbedingungen
2 inkl. MwSt.
Cookie-Richtlinie
Sitemap | Kontakt | Impressum | Datenschutz | AGB | Widerrufsbelehrung und -formular | Liefer-und Zahlungsbedingungen
Anmelden Abmelden | Bearbeiten
  • Change gestalten
  • Coachen + Begleiten
    • Agile Coach-Ausbildung
    • Agile Coach-Kompaktausbildung
    • Agile Organisations-Entwicklung Zusatzausbildung
    • Executive Coach Training
    • Weitere Angebote
    • Downloads für Coaches
  • Besser führen
    • Führungskräfte-Coaching + Supervision
    • Ausbildung Agile Führung (organisationsintern)
    • Projekte führen in (teils) agilen Systemen
  • Im Team arbeiten
    • Individuelle Teambegleitung
    • Begleiten von Konflikten + Mediation
    • Agiles Basistraining
    • Retrospektiven moderieren
    • Feedback-Training
    • Übungsgruppe "Feedback"
    • Projektcoaching
  • Über uns
    • Veröffentlichungen
    • Kontakt
    • Newsletter
    • Räumlichkeiten
  • Blog
    • Agiles Coaching
    • Agile Teamentwicklung
    • Agile Organisationsentwicklung
    • Agile Führung
    • BERATUNG JUDITH ANDRESEN
    • Podcast
    • Workshops (Archiv)
    • Videocast
  • Termine
  • Nach oben scrollen
zuklappen