Custom CSS examples

Changing the font size

The default font size for application pages using the New UI is 12px. Administrators can change the default font size for an application by adding a style to either a custom header or a custom sidebar. You can specify different rules for desktop and mobile devices. The following style, if added to a custom header or custom sidebar, results in a font size of 14px for that application on both desktop and mobile devices:

<style> /* Rule for desktop font size */
   html:not(.rbs-device-mobile).rbs-mainFontSize,
   html:not(.rbs-device-mobile) .rbs-mainFontSize {font-size: 14px;} 
/* Rule for mobile font size */
   html.rbs-device-mobile.rbs-mainFontSize, html.rbs-device-mobile .rbs-mainFontSize {font-size:14px;}
</style>

Other page elements, such as section headers and titles, are changed proportionally to the default font. For example, if a title was rendered at 28px for a default font size of 14px, it would be rendered at 20px for a default font size of 10px.

Changing the page title width

To customize the width of the page title for an application, add custom styles to either the custom header or to the custom sidebar. The following example uses the CSS @media query to change the width of the page title to consume 20% of the screen width on view pages:

<style>
@media only screen and (min-width: 769px) {
    /* Device is Small, medium, large */
    .rbs-objectViewTitle,.rbs-objectViewTitle {
        width: 20%; /* Rest of space will be consumed by toolbar buttons and overflow */
    }
}
@media only screen and (max-width: 768px) {
    /*Device is Extra Small */
    .rbs-objectViewTitle,.rbs-objectViewTitle {
        width: 20%; /* Rest of space will be consumed by toolbar buttons and overflow */
    }
}
</style>

Controlling how space is consumed in columns

The following example uses the CSS @media query sets the space consumed by the label, the value, and the editable value as a percentage of the screen width:

@media only screen and (max-width: 415px) { 
   .rbs-simpleField-label-cell { width: 40%; }    
   .rbs-simpleField-value-cell { width: 60%; }     
   .rbs-editField-valueContainer { width: 95%; }  }

For information about adding code to custom headers and sidebars, see Header and footer and Custom sidebar.