Are you tired of the outdated look and feel of your ServiceNow instance? We all know, With instance branding, you can give your instance a fresh and modern makeover that aligns with your brand's unique identity. From custom color schemes to personalized logos and graphics, the possibilities are endless
Customizing the branding of your ServiceNow instance is a powerful way to create a memorable and professional user experience. However, with an abundance of CSS variables at your disposal, finding the right ones to achieve your desired theme can be a daunting task. In this comprehensive guide, we will explore essential CSS variables that will make instance branding a breeze. Let's dive in!
- Filter Navigator Styling:
The filter navigator is a fundamental element in ServiceNow. Enhance its appearance with these key CSS variables:
- "--now-unified-nav_menu-filter--color": Change the color of the Filter and search symbol for a distinct touch.
- "--now-unified-nav_menu-filter--color--placeholder": Personalize the color of the placeholder in the filter for a polished look.
- "--now-unified-nav_menu-filter--color--placeholder--focus": Highlight the placeholder color when clicking on the filter navigator.
- "--now-unified-nav_menu-filter--color--opened": Set the color when entering text in the filter navigator.
- "--now-unified-nav_menu-filter--background-color": Define the background color of the filter navigator.
- "--now-unified-nav_menu-filter--background-color--hover": Elevate the user experience with a custom hover background color.
- "--now-unified-nav_menu-filter--background-color--opened": Create a visually pleasing background color after clicking on the filter.
- Navigation Menu Customization:
The navigation menu guides users through your ServiceNow instance. Utilize these CSS variables for a seamless experience:
- "--now-unified-nav_menu--background-color": Set the background color of the navigation menu.
- "--now-unified-nav_button--color": Personalize the color of the navigation menu button.
- "--now-unified-nav_menu-subitem--color": Highlight subitem text with a unique color.
- "--now-unified-nav_menu-item--color": Define the main text color of the navigation menu.
- "--now-unified-nav_menu-item--background-color--hover": Enrich the user experience with a custom background color on hover.
- "--now-unified-nav_menu-item--border-color--hover": Make a statement with a border color change on hover.
- "--now-unified-nav_favorite-icon--background-color--hover": Elevate the experience with a unique background color for the favorite icon on hover.
- Header Menu Elegance:
The header menu is the gateway to your ServiceNow instance. Enhance its visual appeal with these essential CSS variables:
- "--now-unified-nav_header--background-color": Set the header's background color.
- "--now-unified-nav_header--color": Personalize the header menu text color.
- "--now-unified-nav_nav-menu-trigger--background-color--hover": Highlight header text when hovering.
- "--now-unified-nav_nav-menu-trigger--color--hover": Create a cohesive look with identical text and hover colors on the header focus.
- Form Styling for a Cohesive Experience:
Forms play a crucial role in ServiceNow interactions. Use these CSS variables for an aesthetically pleasing user journey:
- "--now-unified-nav_focus-ring--color": Define the color of focus rings for special fields like numbers or names.
- "--now-checkbox--background-color--readonly": Customize the background color of checkbox fields on forms.
- "--now-form-field--background-color--readonly": Personalize the background color for other read-only fields on forms.
So, why settle for a bland and boring ServiceNow instance?🤔💤
Say goodbye to the old and hello to the bold!👋👋🏼💥
Get your branding hats on and let the transformation begin! 🎩🚀✨
