Erscheinungsbild anpassen (CSS)

Sie haben die Möglichkeit das Erscheinungsbild Ihrer App anzupassen. Sie können bestehende CSS Styles überschreiben oder eigene hinzufügen.

Zugriff erhalten Sie hier: Einstellungen > Branding > Erscheinungsbild anpassen

Bitte beachten Sie, dass dies zu nicht absehbaren, fehlerhaften Darstellungen führen kann.

Bitte nutzen Sie diese Möglichkeit nur, wenn Sie Erfahrung im Umgang mit CSS haben und prüfen Sie die Darstellung Ihrer Anpassungen in jeglicher Ansicht.  

Selektoren

CSS Klassen dienen der Ansprache spezifischer Plattformen, Bildschirmgrößen oder Features. Diese werden am HTML Element definiert und sollten, wenn benötigt, dem Selektor vorangestellt werden.

Folgende Klassen stehen zur Verfügung:

Plattformen:

  • .ios
  • .iphone
  • .ipad
  • .android
  • .web
  • .mobile
  • .desktop
  • .browser
  • .native

Systeme:

  • .win
  • .mac
  • .linux

Browser:

  • .chrome
  • .safari
  • .moz
  • .msie

Bildschirm:

  • .retina
  • .non-retina
  • .wide (600px width and more)
  • .compact (under 600px width)

 

ID-spezifische Selektoren:

Die ID eines Kanals kann anhand der URL in der Administration ermittelt werden. Beispiel:

https://app.staffbase.com/admin/plugin/news/56376cf7e4b07ab9337fad37

In diesem Fall wäre die ID 56376cf7e4b07ab9337fad37.

 

Bei Artikeln, Seiten oder anderen Plugins kann die ID aus der URL in der Browserzeile in der Nutzeransicht (Frontend) ermittelt werden. Beispiel:

https://app.staffbase.com/content/page/558c017ee4b029c8c2e50dbc

In diesem Fall wäre die ID 558c017ee4b029c8c2e50dbc.

 

/* bestimmten Kanal in Feed und Archiv auswählen */
.feed .feed-channel.channel-56376cf7e4b07ab9337fad37,
.archive .feed-channel.channel-56376cf7e4b07ab9337fad37 { ... }

/* Überschrift eines Kanals auswählen */
.feed .feed-channel.channel-56376cf7e4b07ab9337fad37 > h2,
.archive .feed-channel.channel-56376cf7e4b07ab9337fad37 > h2 { ... }

/* Artikel auswählen */
.feed .feed-post.post-56376db0e4b07ab9337fad3d,
.archive .feed-post.post-56376db0e4b07ab9337fad3d { ... }

/* Artikelansicht auswählen */
.page.post-56376db0e4b07ab9337fad3d .page-content { ... }

/* Seite (oder jegliches Plugin) auswählen */
.page.plugin-558c017ee4b029c8c2e50dbc .page-content { ... }

/* Menüseite auswählen */
.page.menupage-55954d7ae4b0e81bc5b1d9bb .page-content { ... }