How to change the catalog item size on service catalog page

Brent Cox
Giga Guru

‎08-22-2023 01:34 PM

I have a number of catalog items in my service catalog, and I am hoping to find a way to make the entire icon smaller. I've seen ways to make the attached image smaller, but I am hoping I can make the whole entry smaller. The goal here is to fit more catalog item choices on the page so users don't have to keep scrolling as much. 

0 Helpfuls
  • 667 Views
1 REPLY 1

Punit S
Giga Guru

‎08-22-2023 01:47 PM - edited ‎08-22-2023 01:49 PM

In service portal , customizing the appearance of the entire catalog item entry, including the icon and other elements, might require some CSS customization. However, keep in mind that making significant changes to the default styling of ServiceNow components might affect the platform's user experience and responsiveness. Here's a general approach you can consider:

  1. Custom Stylesheet: Create a custom CSS stylesheet to target the elements you want to modify. You can include this stylesheet in your ServiceNow instance to apply the desired changes.

  2. Inspect Elements: Use your browser's developer tools to inspect the elements of a catalog item entry. Identify the classes and IDs associated with the icon, title, description, and other components you want to modify.

  3. Modify Icon Size: To adjust the size of the icon, you'll need to target the specific icon element's class or ID and apply CSS rules to adjust its dimensions. For example:

    css
    .catalog-icon-class { width: 24px; /* Adjust the width as needed */ height: 24px; /* Adjust the height as needed */ }

  4. Adjust Text Styles: To make the title and description text smaller, you can target their respective classes or IDs and adjust the font size:

    css
    .catalog-title-class { font-size: 14px; /* Adjust the font size as needed */ } .catalog-description-class { font-size: 12px; /* Adjust the font size as needed */ }

  5. Reduce Padding and Margins: To create a more compact layout, you can reduce the padding and margins around each catalog item:

    css
    .catalog-item-class { padding: 5px; /* Adjust the padding as needed */ margin: 5px; /* Adjust the margin as needed */ }

  6. Apply Styles: Once you've defined your custom CSS rules, apply them to your ServiceNow instance. You can do this through the "Custom Stylesheets" module, which allows you to upload and manage custom styles.

  7. Test and Iterate: After applying your custom styles, thoroughly test the changes on different devices and screen sizes to ensure that the layout remains usable and visually appealing. You might need to iterate and fine-tune your styles based on user feedback and testing results.

Remember that making changes to the styling of ServiceNow components can have unintended consequences, so proceed with caution and ensure you have a backup plan in case anything goes wrong. Based on your unique requirements to be implemented in aligned with best practices, consult with a partner UX SME or documented resources for the latest guidance.

 

Please mark my answer a solution accepted/helpful in case it adds value and moves you a step closer to your desired ServiceNow solution goal.

Thanks,
Punit

 
0 Helpfuls