Organizational Themes
  • 3 Minutes to read
  • Contributors

    Organizational Themes


      Article summary

      The configurable themes at the organization level in Quixy empower administrators to define the visual experience of the platform to align with their brand identity or specific requirements. By accessing the Admin Menu > Preferences > Themes section, administrators can customize various aspects of the platform's appearance, ensuring a cohesive and personalized user experience across the organization.

      At the platform level, Quixy offers comprehensive theme customization, allowing organizations to tailor the platform's visual identity to their exact requirements. Administrators can effortlessly modify themes to reflect their brand colors and style preferences by selecting from a range of predefined themes or creating new ones. This includes the ability to specify fonts that align with the organization's branding and to define colors using HEX codes for precise control over the platform's aesthetic. These customization options extend to various elements across the platform, such as headers, menus, grids, action buttons, popups, and more, ensuring a cohesive and personalized user experience throughout the organization's Quixy environment.

      NOTE:

      Administrators can select from a range of predefined themes to apply to the organization, providing flexibility in choosing a theme that resonates with their brand or design preferences.

      With themes, you can transition your organization's appearance from a simple design to a dynamic and vibrant look, creating a more visually appealing and immersive experience for users.

      For an overview of how themes can bring positive changes to your platform, please refer to the images below:

      You can customize your platform to match your requirements and branding, or simply add some color and life to it using Themes. Let's explore how to navigate and utilize Themes to enhance your organization and give it a vibrant touch.

      To the left, you can find various elements (colors, images, positions, and font styles) presented. Now will get know each of them in a line by line.

      Top Header:

      1. Customize the top header and dropdown menu to match your branding.
      2. Change header colors, header icon colors, dropdown font, and background color.
      3. Add images for the top header background and logo placement.

      Left Menu:

      1. Access custom and standard menus for apps/reports/lists.
      2. Adjust font size to small, medium, or large (default is medium).
      3. Customize BG color, font color, hover BG color, hover font color, and selected link color.

      Grid (Grid Header):

      Modify column header color, font size, and font color for all grids.

      Grid (Grid Content):

      1. Customize font size and row hover effects for all grids.
      2. Choose font size and customize on-hover row BG color and font color.

      Action Buttons:

      1. Adjust background and font colors for primary and secondary buttons.
      2. Note that workflow-configured button colors will override these settings.

      Pop-ups:

      1. Customize pop-up header and body BG and font colors.
      2. Modify pop-up footer BG color.

      Charts

          A. Bar Chart:

      • Arrange the color palette for bar charts without confusion.
      • Customize text and background colors to suit your preferences.

          B. Background Image:

      • Add an image as the background for your charts, enhancing their visual appeal and customization options.

      Comments in App:

      Change background color, font color, button background color, and button font color for comments.

      Error Messages:

      Adjust font size and color for error messages.

      Help Text:

      Customize help text background and font colors.

      Toaster:

      1. Manage toaster behavior and appearance.
      2. Customize BG and font colors.
      3. Manage toaster message position (middle, right, left).

      For Success/Error/Warning Toaster:

      Customize BG and font colors for success, error, and warning messages.

      Font Style:

      This will allow you to customize font style of text across the platform

      Platform Background:

      This includes grey background being displayed for entire platform behind all screens

      Platform Background Image:

      BG Image of the Platform can be changed.

      Position:

      This will allow you to customize platform background image across the platform

      Opacity:

      Opacity can be changed as your choice

      Selected/Highlighted:

      Color can be change when a sentence might selected or highlighted.

      NOTE:
      On the top you can find a check box saying Can user change theme. This means when checking on this box, a user can change the theme.

      In the middle of the screen, you'll find a section called Sample App. Any changes you make and apply will be reflected in this sample app, giving you a live preview of how your customizations will appear when implemented. This feature allows you to visualize and fine-tune your adjustments before making them live, ensuring a seamless and professional look for your platform.

      Functionalities to the right of the screen:

      Download Theme:

      Located at the top right, clicking option (1) allows you to download the current theme. This feature enables you to save your customized theme for future use or reference.

      Upload Theme:

      By clicking option (2), you can upload a theme of your choice into the system. This functionality allows you to apply a pre-designed theme to your platform easily.

      NOTE
      Expanded Sample App Screen: You can expand the sample app screen for a better experience while making changes. This expanded view provides a more detailed and comprehensive preview of your theme adjustments, ensuring that you can review and fine-tune your customizations with precision.





      Was this article helpful?

      What's Next