Unterschiedliche Tabs der Seitenliste in Webversion und Mobilversion anzeigen

Man kann in den Dynamischen Ansichten zwar keine unterschiedlichen Seitenliste-Gadgets anzeigen lassen, aber man kann per CSS in der Webversion und in der Mobilversion des Blogs unterschiedliche Tabs der Seitenliste ausblenden und so jeweils andere Tabs anzeigen lassen, zumindest sofern man die Mobilvorlage auf Benutzerdefiniert eingestellt hat und die Ansicht Classic nur für die Mobilversion nutzt.

---

Beispiel:

Die Tabs der folgenden Liste will ich passend auf die Webversion und die Mobilversion aufteilen

Als Standard würden in beiden Blogversionen alle Tabs angezeigt. Ich muss also die Tabs, die ich nur in der Webversion anzeigen lassen will, in der Mobilversion ausblenden und die Tabs, die nur in der Mobilversion angezeigt werden sollen, in der Webversion ausblenden

In der Mobilversion will ich ausblenden:

• 4. Tab (Zeit-Archiv web)
• 5. Tab (Labels-Archiv web)
• 8. Tab (⇒ Mobilversion)

Die Kommandos dazu sind die folgenden:

/* TAB-AUSBLENDUNGEN mobil
- - - - - - - - - - - - - - - - - - - - - - - - - - - */
.classic #pages ul li:first-child + li + li + li,
.classic #pages ul li:first-child + li + li + li + li,
.classic #pages ul li:first-child + li + li + li + li + li + li + li {
display:none;
}

In der Webversion will ich ausblenden:

• 2. Tab (Zeit-Archiv mobil)
• 3. Tab (Labels-Archiv mobil)
• 9. Tab (⇒ Webversion)

Die Kommandos dazu sind die folgenden:

/* TAB-AUSBLENDUNGEN web
- - - - - - - - - - - - - - - - - - - - - - - - - - - */
.flipcard #pages ul li:first-child + li,
.flipcard #pages ul li:first-child + li + li,
.flipcard #pages ul li:last-child {
display:none;
}
.magazine #pages ul li:first-child + li,
.magazine #pages ul li:first-child + li + li,
.magazine #pages ul li:last-child {
display:none;
}
.mosaic #pages ul li:first-child + li,
.mosaic #pages ul li:first-child + li + li,
.mosaic #pages ul li:last-child {
display:none;
}
.sidebar #pages ul li:first-child + li,
.sidebar #pages ul li:first-child + li + li,
.sidebar #pages ul li:last-child {
display:none;
}
.snapshot #pages ul li:first-child + li,
.snapshot #pages ul li:first-child + li + li,
.snapshot #pages ul li:last-child {
display:none;
}
.timeslide #pages ul li:first-child + li,
.timeslide #pages ul li:first-child + li + li,
.timeslide #pages ul li:last-child {
display:none;
}

Erläuterung:

• .classic
  spricht ausschließlich die Ansicht Classic und somit die Mobilversion an
• .flipcard
  spricht ausschließlich die Ansicht Flipcard und somit die Webversion an
• .magazine
  spricht ausschließlich die Ansicht Magazine und somit die Webversion an
• .mosaic
  spricht ausschließlich die Ansicht Mosaic und somit die Webversion an
• .sidebar
  spricht ausschließlich die Ansicht Sidebar und somit die Webversion an
• .snapshot
  spricht ausschließlich die Ansicht Snapshot und somit die Webversion an
• .timeslide
  spricht ausschließlich die Ansicht Timeslide und somit die Webversion an
• #pages
  spricht speziell den Bereich für die Seitenliste an
• ul
  spricht die Liste in dem Bereich an
• li
  spricht einen Listenpunkt der Liste an
• li:first-child
  spricht den ersten Listenpunkt der Liste an
•  + li
  spricht den jeweils nächten Listenpunkt an (Leerzeichen, Pluszeichen, Leerzeichen, li)
• li:last-child
  spricht den letzten Listenpunkt der Liste an
• display:none;
  ist das Kommando zum Ausblenden
• {  }
  Die Klammern umschließen den Teil des Kommandos, der sagt, was mit den zuvor angegebenen Stellen zu tun ist.

Eintrag der Kommandos

Die Kommandos unter Vorlage >Anpassen > Erweitert > CSS hinzufügen eintragen. Anschließend auf "Auf Blog anwenden" klicken und warten bis das erledigt ist, bevor man auf "Blog anzeigen" klickt, um das Ergebnis sehen zu können.

Ergebnis in der Mobilversion:

Ergebnis in der Webversion:

Ute Ziemes, sg.utez.de, 2016-02-14