Articles in this section

Available CSS Selectors

Avatar
Anne Hoffmann
  • Updated
Follow

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 

Exclamation_Triangle.png

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.