Farbliche Anpassungen des Mobile View (Update)

03. März 2012

Screenshot mobile Site (neu) — Mobile Site

UPDATE (05.07.2012): Beachtet den aktuelleren Beitrag zur mobile view!

Die mobile Site im jimdo-System ist nicht über die Admin-GUI änderbar. Wohl aber über die Manipulation von Header-Informationen.

Darüber lassen sich auch Details des Web-Auftritts feinjustieren.

Das Ergebnis ist eine stimmige Web- und mobile site.

Einige Anpassungen wirken sowohl für die Web- als auch für die mobile Site.

Screenshot mobile Site (alt) — Urzustand

Die Ergänzungen der StyleSheets erfolgen im Admin-Bereich unter Einstellungen / Head bearbeiten.

Die aufgeführten CSS-Anpassungen verändern vorwiegend die mobile site. Ausnahmen betreffen Fontstyle und -farbe (body, p, h1, h2, h3). Da im jimdo-CSS Fonts und Font-Farben hart hinterlegt sind, müssen diese überschrieben werden. Das erfolgt global.

Beachtet den aktuelleren Beitrag zur mobile view!

<style type="text/css">
/*<![CDATA[*/
/** MOBILE **/
/** Fonts, Font-Farben **/
body, p, table, td, h1, h2, h3 {
  font-family: "Trebuchet MS",Verdana,sans-serif!important;
}
div.blogselection a, .post a {
   color: #40509E!important;
}
h1 {
   color: #D66933;
}
h2 {
   color: #F1C631;
   font-weight: normal!important;
}
h3 {
   color: #40509E;
   font-weight: normal!important;
}
div.blogselection div.clearover {
   border-bottom-color: #F1C631;
}
a:link, a:visited {
  color: #40509E;
}
/** Titelleiste **/
div.topbar {
   background-color: #f1c631!important;
   background-image: none!important;
   border-bottom-color: #f1c631!important;
   border-left-color-value: #f1c631!important;
   border-right-color-value: #f1c631!important;
   border-top-color: #f1c631!important;
   text-shadow: none!important;  
}
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;
}
/** Auswahl "zur Standardansicht" **/
div.tp-changeview {
   background-color: white!important;
   background-image: none!important;
   background-origin: padding-box;
   border-bottom-color: #D66933!important;
   border-left-color-value: #D66933!important;
   border-right-color-value: #D66933!important;
   border-top-color: #D66933!important;
   color: #40509E!important;
}
div.tp-changeview a {
   color: #40509E!important;
}
/** Seiten-Menü **/
ul#mainNav1 li {
   background-color: white!important;
   background-color: #f1c631!important;
   background-image: none;
   border-bottom-color: #D66933!important;
   text-shadow: none!important;  
}
ul#mainNav1 li a.current, ul#mainNav2 li a.current, ul#mainNav3 li a.current {
    font-weight: bold;
    text-shadow: none!important;
}
ul.mainNav1, ul.mainNav2, ul.mainNav3 {
   list-style: none;
}
/** Footer **/
div#tp-footer {
   background-color: white!important;
   border-top-color: #40509E!important;
   color: #40509E!important;
}
/*]]>*/
</style>

Wer im mobile view und auf der Website selbst andere Schriftfonts als Systemschriften nutzen möchte, sollte in Webfonts in jimdo-Site einbauen weiterlesen.

Dieser Blog-Post ist ein privater Beitrag von Judith Andresen.