Nachdem jimdo vor einiger Zeit Auswahlmöglichkeiten für das mobile Layout eingeführt hat, kann man nun zusätzlich das CSS für das mobile Layout (unabhängig vom Website-CSS) anpassen.
Das mobile Layout auf judithandresen.com basiert auf der rechts angezeigten jimdo-Version.
Nach Anhaken des Auswahlfelds "CSS / eigenes mobiles Layout bearbeiten" im Administrationsbereich Admin / Einstellungen / Mobile Ansicht können die CSS-Informationen angepasst werden.
Testweise kann jede Seite auch im mobilen Layout durch Anhängen von /?mobile=1 an die URL im Browser aufgerufen werden.
Einfach anpassen ;-)
/** Standardseite **/
div#cc-m-container {
margin-right: 20px!important;
margin-left: 20px!important;
margin-top: 10px!important;
margin-bottom: 10px!important;
}
/** Header **/
header {
box-shadow: 0 0 0 #D66933!important;
padding-bottom: 0px; background: #f6dc83;
background-color: #f6dc83;
background-image: none!important;
border-bottom-color: #F1C631!important;
border-left-color: #D66933!important;
border-right-color: #D66933!important;
border-top-color: #F1C631!important;
border-top: 1px #F1C631 solid;
border-bottom-color: white!important;
border-bottom: 1px white solid;
}
header h1 {
font-style: normal; text-weight: bold;
padding-top: 10px!important;
padding-bottom: 10px!important;
margin-top: 0px!important;
margin-bottom: 0px!important;
background: none!important;
color: #40509E !important;
}
/** Menu **/
div.menubtn {
border-bottom: 0px;
text-transform: uppercase;
box-shadow: 0 0 0 #D66933!important;
}
div.menubtn a,
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;
}
/** Navigation **/
ul.mainNav1 li,
ul.mainNav2 li,
ul.mainNav3 li {
list-style: none;
}
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;
}
ul#mainNav1 li a {
padding-left: 0px!important;
}
ul#mainNav2 li a {
padding-left: 30px!important;
color: #40509E !important;
}
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;
}
/** Blog **/
p.day {
padding-top: 1px;padding-bottom:1px;
}
padding-top: 1px;padding-bottom:3px;
}
.datetime {
border-radius: 0px;
margin: 0px;
border: 0px;
}
.datetime p {
font-weight: normal;
}
div.datetime.dt-style6 {
border:0px!important;
}
div.datetime.dt-style6 p.day,
div#cc-m-container div.datetime.dt-style6 p.mon{
color: white!important;
}
h1#post-xxx {
padding: 0px!important;
}
/** Navigation**/
nav {
box-shadow: 0 0 0 white!important;
}
/** Footer **/
footer, .tp-changeview {
background: none !important; margin: 0 !important;
border-bottom: 1px solid #D66933!important;
}
footer {
padding: 5px!important;
border-bottom: 1px solid #F1C631!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 0 white!important;
color: #40509E !important;
margin-top: 0px!important;
text-transform: uppercase;
}
div.tp-changeview,
div.tp-changeview a {
background: none!important;
background-color: #F1C631!important;
border-radius: 0px!important;
box-shadow: 0 0 0 white!important;
}
section#tp-content div#content-area {
margin-right: 10px!important;
margin-left: 10px!important;
}
/** Textstyles **/
a:link,
a:visited {
color: #40509E;
}
div#cc-m-container div.hr {
border-bottom: 1px solid #F1C631;
padding-bottom: 30px;
}
div.n h1,
div.n h2,
div.n h3 {
padding: 0px!important;
}
Auf judithandresen.com sind Webfonts eingebunden, das Styling ist generell überarbeitet, die Printversion ist ebenfalls in Farben & Fonts angepasst.
- Nächster Artikel: 100 Jahre Allan Karlsson: unpolitisch, weltverändernd, schwedisch
- Vorheriger Artikel: Intuitiv und ohne Vorurteile entscheiden
Kommentar schreiben
Céline Stäuble (Donnerstag, 07 Februar 2013 00:29)
Hallo! Bin zufällig auf deine Seite gestossen. Ich habe das Problem, dass meine Mobile Ansicht von meinen Änderungen des CSS der Standard-Ansicht gestört werden. Wenn ich die CSS im Mobile Layout anpassen will, werden die wieder durch die Standard CSS aufgehoben. Gibt es einen Weg, wie ich den beiden Ansichten die Befehle je Ansicht zuordnen kann? bzw. zB. Dass ich durch die Eingabe im Mobile CSS das Standard CSS für die Mobile CSS aufheben kann und umgekehrt? Danke viel mal für deinen rat, bin bisserl am verzwifeln hier.... ;)
Judith Andresen (Donnerstag, 07 Februar 2013 09:03)
Hallo Céline,
folgende Möglichkeiten sehe ich:
1:) Hinter die mobile Anweisung ein !important setzen. Dann regiert durch.
2:) Die Klasse cc-m-container nutzen. In meinem mobile view ist die gesamte Seite in
einen div-Container mit dieser Klasse eingebettet. Du kannst die Vererbung ansprechen:
div#cc-m-container h1 sollte nur Headlines im mobile view ansprechen.
Judith
Alexander Kerscher (Dienstag, 29 Oktober 2013 18:18)
I do love your page! Jedesmal lerne ich was Neues!!! Danke!!! Alexander
Frischemarkt Shop (Donnerstag, 29 Mai 2014 21:12)
Hallo Judith,
es ist ein toller Beitrag von dir! Fast sieht die mobile Version so aus, wie ich mir das wünsche. Eine Einstellung bekomme ich bisher noch nicht hin und hoffe, dass du mir helfen kannst.
In der Blogübersicht sind die Blogüberschriften in blauer Schrift und auch die Kommentarfelder. Wenn ich mich dann direkt auf der einzelnen Blogseite befinde, dann habe ich das Problem nicht, diese sind dann in normaler Standardfarbe. Hast Du einen Tipp für mich, wie ich überall einfach die Standardfarbe einstellen kann? (Blau ist nicht gewünscht)
VG Olga
Judith Andresen (Donnerstag, 29 Mai 2014)
Die Überschriften in der Blogübersicht sind Links, und die Linkfarbe überschreibt die Überschriftenfarbe.
Hier hilft das Überschreiben mit !important:
div.blogselection h1 a{
color: #333333!important;
}
Weitere Anpassungen für das Bloglayout findest Du hier: http://www.judithandresen.com/2013/12/06/css-anpassungen-auf-jimdo-plattform
Frischemarkt Shop (Freitag, 30 Mai 2014 09:20)
Dankeschön! Hat funktioniert. Jetz sind nur noch die Funktionen "mehr lesen" und der Link zu den "Kommentaren" in blauer Schrift. Hast du auch hierfür einen Tipp für mich?
Olga
Judith Andresen (Freitag, 30 Mai 2014 09:29)
Hallo Olga,
wie ich bereits in dem zweiten Artikel beschrieben habe, der bereits oben angegeben ist, kann man diese Elemente einzeln ansprechen:
span.comment > a {
color: #D66933 !important;}
div.blogselection a {
color: #333333 !important;
}
Auf der rechten Maustaste solltest Du in Deinem Browser den Befehl "Inspect Element" finden. Damit kannst Du den Namen des entsprechenden Elements finden und dann die Eigenschaften verändern. Wenn Dein Browser von Haus diese Untersuchungsform nicht anbietet, solltest Du wahlweise den Browser ändern (Chrome, Firefox) oder ein entsprechendes AddOn des Browsers herunterladen.
Judith
Frischemarkt Shop (Freitag, 30 Mai 2014 09:48)
Besten Dank :-) !
Olga
JTPhotography (Montag, 16 Juni 2014 14:36)
Hallo,
erstmal muss ich sagen, ich bin sehr froh dieses Tutorial gefunden zu haben! Dies ist wirklich sehr aufklärend und helfend!
Ich bin gerade dabei auf einer Testseite auszuprobieren, das mobile CSS-Layout so anzupassen wie ich es möchte. Ich habe dort zunächst die blaue mobile Vorlage übernommen von Jimdo (wo der background blau ist und das menü und co). Dort habe ich es immerhin schon geschafft den background des Menüs anzupassen, allerdings nur von den einzelnen Navigationspunkten, und der Rahmen des ganzen ist immer noch blau. Wie kann ich diesen auch schwarz machen? Und wie kann ich den Hintergrund der Pfeile (zum aufklappen der Untermenüs) auch schwarz machen?
Dann noch eine zusätzliche Frage, ist es möglich statt "Menü" dort stehen zu haben, die Navigation dort hinzumachen, wie man es von Webseiten aus dem Browser am PC kennt, also das meine Haupt-Navigationspunkte nebeneinander dort angezeigt werden wo jetzt Menü steht und nur die Unterpunkte dann aufgeklappt werden können?
Ich würde mich über eine Antwort sehr freuen
zu meiner Testseite geht es hier:
www.jtphoto.jimdo.com
Judith Andresen (Montag, 16 Juni 2014 18:50)
Hallo,
wie ich bereits im Kommentar für Olga ausführte, musst Du den Bezeichner für Deine Objekte ("inspect object" mit der rechten Maustaste herausbekommen) und die entsprechenden Elemente dann stylen.
Damit Du das im Browser kannst, musst Du in der Adresszeile ein /?mobile=1 anhängen.
Wenn Du in den Quellcode der Seite schaust, wirst Du sehen, dass die Navigationslemente der Seite dort vorkommen. Durch entsprechende Befehle im CSS kannst Du diese einblenden (display: block; oder display:inline;) sollte dies ermöglichen.
Das wird aber dazu führen, dass Du auf allen Unterseiten immer auch die Hauptseiten in der Navigation siehst.
Judith
JTPhotography (Dienstag, 17 Juni 2014 12:11)
Hallo,
danke zunächst, aber das hab ich bereits getan. Ich komme in den gestern genannten Punkten zwar noch nicht weiter, mir fehlt scheinbar irgendein Parameter. Ich hoffe ich werde ihn bald finden.
Aber nun bin ich an einem Problem angelangt an dem ich wirklich nicht weiterkomme und mich über Hilfe freuen würde. Auf meiner Desktop-Webseite habe ich mehrere Bilder im Header, welche sich ständig ändern. Dies habe ich unter "einstellungen > header" mit einem "<script type="text/javascript"> //<![CDATA[" eingebunden. Ist es möglich dies auch mit in das CSS Layout einzubinden, so wie es ist? Und wenn ja, wie muss das statt dem script type dann für CSS aussehen? Danke im voraus
Judith Andresen (Dienstag, 17 Juni 2014 14:02)
Hallo,
ich bin mir nicht sicher, ob ich die Frage richtig verstanden habe.
1. Variante
Man kann über CSS Bilder ein- und ausblenden. Dafür müssen aber die entsprechenden DIVs angelegt sein. Wenn das auf jeder Seite passieren soll, müsstest Du dafür das komplette HTML-Gerüst als individiuelles Layout anlegen.
2. Variante
Javascript lässt sich nicht über das CSS aussteuern. Du hast das richtig als JavaScript in den Header eingebunden. Ich verstehe nicht, warum Du diesen Teil in das CSS integrieren möchtest.
Frage doch einfach direkt im Support bei jimdo nach. Die haben einen freien Support für alle Nutzer.
Judith
carsten (Donnerstag, 10 Juli 2014 17:10)
Ich hab da auch mal ne Frage:
Kann man in der mobilen Ansicht das Navigationsmenü komplett ausschalten?
Beim HEADER funktioniert das.
Gruss
carsten
Judith Andresen (Donnerstag, 10 Juli 2014 21:12)
Hallo Carsten,
wie ich bereits im Kommentar für Olga ausführte, musst Du ermitteln, wie das entsprechende Style-Element heißt. Dieses musst Du mit "display: none" ausblenden. In "meinem" Layout ginge das so:
ul#mainNav1, ul#mainNav2, ul#mainNav3 {
display: none;
}
Judith
totoa (Samstag, 18 Oktober 2014 16:17)
Hallo Judith
Erstmals vielen Dank für die Vorlage! Sie hat für meine Zwecke wunderbar gepasst, die mobile Version ist praktisch fertig - bis auf einen Fehler:
Mein Logo im Header wird irgendwie abgeschnitten, sodass nur der untere Teil des Bildes zu sehen ist... (http://totoa.jimdo.com/?mobile=1)
Was muss ich ändern, damit das komplette Logo zu sehen ist? Ich kenne mich nicht besonders gut mit CSS aus und habe das meiste mit Ausprobieren rausgefunden.
Liebe Grüsse und eine Dankeschön im Vorraus
totoAFotografie
Judith Andresen (Samstag, 18 Oktober 2014 16:59)
Hallo,
die Bildeinstellung scheint nicht richtig zu sein. Versuche, die Grafiken auf 100% zu zwingen:
#emotion-header #emotion-header-img {
max-height: 100%;
max-width: 100%;
}
So pumpst Du das Bild auf. Es war bisher in der Höhe auf 170 Pixel beschränkt.
Wenn das noch nicht die Lösung ist, liegt die da irgendwo in der Nähe. Ich habe Dein Theme nicht und kann daher den Fall nicht nachstellen.
Judith
totoa (Samstag, 18 Oktober 2014 17:14)
Mein Layout sieht so aus:
/** Standardseite **/
div#cc-m-container { <div id="container">
background-image:background-image:url('header-2.jpg')
;
margin-right: 0px!important;
margin-left: 0px!important;
margin-top: 0px!important;
margin-bottom: px!important;
background: #000000;
}
/** Header **/
header {
box-shadow: 0 0 0 #000000!important;
padding-bottom: 0px; background: #000000;
background-color: #000000;
background-image: none!important;
border-bottom-color: #000000!important;
border-left-color: #000000!important;
border-right-color: #000000!important;
border-top-color: #000000!important;
border-top: px #000000 solid;
border-bottom-color: black!important;
border-bottom: 0px black solid;
}
header h1 {
font-style: normal; text-weight: bold;
padding-top: 0px!important;
padding-bottom: 0px!important;
margin-top: 0px!important;
margin-bottom: 0px!important;
background: black!important;
color: FFFFFF !important;
}
/** Menu **/
div.menubtn {
border-bottom: 1px;
text-transform: uppercase;
box-shadow: 0 0 0 000000!important;
}
div.menubtn a,
div.menubtn {
box-shadow: 0 0 0 #000000!important;
border-bottom: 0px;
background-color: #000000!important;
background: #666!important;
color: white!important;
font-style: normal!important;
font-weight: normal!important;
}
/** Navigation **/
ul.mainNav1 li,
ul.mainNav2 li,
ul.mainNav3 li {
list-style: none;
}
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: #FFFFFF !important;
}
ul#mainNav1 li a {
padding-left: 0px!important;
}
ul#mainNav2 li a {
padding-left: 30px!important;
color: #000000 !important;
}
ul#mainNav3 li a {
padding-left: 60px!important;
color: #000000 !important;
}
ul#mainNav1 li,
ul#mainNav2 li,
ul#mainNav3 li {
border-bottom: 1px solid #FFFFFF;
}
/** Blog **/
p.day {
padding-top: 1px;padding-bottom:1px;
}
padding-top: 1px;padding-bottom:3px;
}
.datetime {
border-radius: 0px;
margin: 0px;
border: 0px;
}
.datetime p {
font-weight: normal;
}
div.datetime.dt-style6 {
border:0px!important;
}
div.datetime.dt-style6 p.day,
div#cc-m-container div.datetime.dt-style6 p.mon{
color: white!important;
}
h1#post-xxx {
padding: 0px!important;
}
/** Navigation**/
nav {
box-shadow: 0 0 0 white!important;
}
/** Footer **/
footer, .tp-changeview {
background: none !important; margin: 0 !important;
border-bottom: 1px solid #000000!important;
}
footer {
padding: 5px!important;
border-bottom: 0px solid #000000!important;
}
div.tp-changeview a {
background: none!important;
border-bottom: 1px solid #000000!important;
background-color: #000000!important;
border-radius: 0px!important;
box-shadow: 0 0 0 white!important;
color: #FFFFFF !important;
margin-top: 0px!important;
text-transform: uppercase;
}
div.tp-changeview,
div.tp-changeview a {
background: none!important;
background-color: #000000!important;
border-radius: 0px!important;
box-shadow: 0 0 0 white!important;
}
section#tp-content div#content-area {
margin-right: 10px!important;
margin-left: 10px!important;
}
/** Textstyles **/
a:link,
a:visited {
color: #FFFFFF;
}
div#cc-m-container div.hr {
border-bottom: 0px solid #000000;
padding-bottom: 0px;
}
div.n h1,
div.n h2,
div.n h3 {
padding: 0px!important;
}
Was müsste ich daran ändern?
Vielen Dank! :)
Judith Andresen (Samstag, 18 Oktober 2014 17:22)
Hallo,
Du hast die normalen Heider-Einstellungen gepostet. Du müsstest den oben stehenden Befehl zur max-width / max-height in die "mobile"-Einstellungen einfügen. Die findest Du im jimdo-Adminbereich.
Judith
totoa (Samstag, 18 Oktober 2014 17:34)
Hallo,
Tut mir leid, das verstehe ich nicht.. Ich finde nur die Kategorie "Mobile Ansicht" und "Custom-Layout" unter dem Reiter "Mobile".
Was mache ich nur falsch?
lg
totoAFotografie
Judith Andresen (Samstag, 18 Oktober 2014 17:59)
Hallo,
ich habe mich offensichtlich nicht eindeutig ausgedrückt. Ich meinte das "Custom Layout (CSS)" in der Administrationssicht. Dort musst Du den Befehl über die Headerbreite einfügen.
#emotion-header #emotion-header-img {
max-height: 100%;
max-width: 100%;
}
Da ich das Grundlayout (Theme) von Jimdo nicht eingeschaltet habe, bin ich nicht sicher, ob diese Befehle genügen, um das Bild zu weiten. Falls das nicht der Fall sein sollte, wende Dich bitte an das Forum bei Jimdo oder deren Support.
Judith
totoa (Samstag, 18 Oktober 2014 18:05)
Ich konnte leider nichts machen... =/
Trotzdem vielen Dank für die Hilfe! :)
Ich werden mich an den Support wenden.
totoAFotografie