Look and Feel / Custom CSS

Custom CSS feature allows you to manually change your app's styling and overwrite our styling rules.

Apply your styles here: Settings > Branding > Custom Styling 

This might cause problems. Please double-check what your app looks like after applying your styles.

 

Targeting selectors

There are a lot of classes to target a specific platform, screensize or feature.
Those are applied to the root DOM node and should be prepended to each selector, if needed.

Platforms:

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

Systems:

  • .win
  • .mac
  • .linux

Browsers:

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

Screen specific:

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

 

ID specific selectors:

The ID of a channel can be determined in the backend using the URL. For example:

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

In this case, the ID would be 56376cf7e4b07ab9337fad37.

 

For articles, pages, menu pages and other plugins, the ID can be seen in the client URL:

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

In this case, the ID would be 558c017ee4b029c8c2e50dbc.

 

/* Select a specific channel in feed and archive */
.feed .feed-channel.channel-56376cf7e4b07ab9337fad37,
.archive .feed-channel.channel-56376cf7e4b07ab9337fad37 { ... }

/* Select a specific channel's headline */
.feed .feed-channel.channel-56376cf7e4b07ab9337fad37 > h2,
.archive .feed-channel.channel-56376cf7e4b07ab9337fad37 > h2 { ... }

/* Select a specific post */
.feed .feed-post.post-56376db0e4b07ab9337fad3d,
.archive .feed-post.post-56376db0e4b07ab9337fad3d { ... }

/* Select a specific single post view */
.page.post-56376db0e4b07ab9337fad3d .page-content { ... }

/* Select a specific page (or any other plugin) */
.page.plugin-558c017ee4b029c8c2e50dbc .page-content { ... }

/* Select a specific menu page */
.page.menupage-55954d7ae4b0e81bc5b1d9bb .page-content { ... }