The all-in-one platform
for internal communications.

Staffbase-Produkte für
Interne Kommunikation.

Articles in this section

Available CSS Selectors

The custom CSS feature allows you to manually change your app's styling and overwrite existing styling rules.

Apply your styles here: Settings > Branding > Custom Styling

Using custom CSS can cause unpredictable, incorrect views. Please only use custom CSS if you have reasonable experience and always double-check what your app looks like after applying your styles.

Targeting Selectors

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

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

You can add the ID of specific app content to a CSS selector, see Determine the ID of App Content.

Examples of How to Use an ID with a CSS selector 

/* 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 { ... }

Related articles

Comments

0 comments

Please sign in to leave a comment.