The custom CSS feature allows you to manually change your app's styling and overwrite existing styling rules.
Learn how to set up Custom CSS.
Using custom CSS can cause unpredictable, incorrect views. Use custom CSS only 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 { ... }
Comments
0 comments
Please sign in to leave a comment.