This article presents the graphic customization options for Jint components: customization of the header and title, size selection, image integration and adjustment, border radius settings, adding shadows, color selection with gradients, and defining the audience via Entra ID groups to control component visibility.
 

Table of Contents

1. Header and Title
2. Size
3. Images
   • Insert an Image
   • Adjust the Image (ratio, fill, position)
4. Border Radius
5. Shadows
6. Colors
7. Audience

Introduction

This article presents the main graphical customization options for your jint.coponents and how to use them!

Header and Title

Our components have a header, which may be required for some components. This header appears if you need any of the elements that make it up.

The header consists of two elements:

• A component title that you can customize
  The title is also customizable in style for the following components : News, My Feed My Applications, My Emails, My Meetings, My Tasks, Professional Birthdays, New Arrivals, Profile Search Results, NewsHub.

• Action buttons located on the right, which differ depending on the component.

Our advice:

Customize the titles of your components to explain the use of the space and the component that you have placed and configured.

Size

You can choose from 3 component sizes: Small, Medium, or Large, or customize the component size by adding the number of pixels under "Customize".

Jint offers three standard component sizes, which allow you to align your components to create a uniform and consistent design across all your pages.

Depending on the height value, the component display will adapt by modifying the design and information presented to ensure that your components are always well-organized and readable.

Set up a customized height

Images

Our components offer you the ability to integrate images into your components to personalize your site, give it character, and substance.

Integrating an image

By clicking "Select an image," you open the image selection experience.

You have three image upload options:

• Recent files: this tab allows you to select an image among the recently modified images according to search results.
• Stock Image: this tab uses Bing's cognitive services to search for images.
• One Drive : access to your One Drive to upload a image
• Site : navigate through the current SharePoint site assets to use a previously uploaded image
• Upload : this tab allows you to upload a file from your workstation. The file is automatically loaded among the SharePoint site's assets.

Adjusting the image

You have several options for adjusting the image to your component.

Ratio selection: When the image format is free, you can define its format to constrain and standardize your design. Enabling the "portrait mode display" button inverts the ratios.

Fill selection: When the image is constrained by the ratio or by the space in which it is placed, you can adjust the fill to choose how to display the image.

• Fill: automatically adjusts the image to fill all available space. The fill option will automatically adjust to the height or width depending on the available space and the image format.
• Fit to width: adjusts the image size so that the entire width of the image is visible. The lateral edges of the image will correspond to the image display area.
• Fit to height: adjusts the image size so that the entire height of the image is visible. The vertical edges of the image will correspond to the image display area.

You can then adjust the image position with the following selector:

The "Custom" option allows you to enter the CSS value of the image's background-position. More information on background-position.

Example of positioning with the "25% 50%" value.

Radius

The "Radius" parameter allows you to select the shape of the component's border. You can choose between the following parameters: Semi-rounded, Rounded, and Circular. You can also customize it yourself by adding the radius of the rounding in pixels.

Our advice:

Rounding in user interface design can:

1. Soften the appearance of the user interface.
2. Create visual hierarchy by highlighting key elements.
3. Facilitate navigation by creating easily identifiable buttons.
4. Reduce visual fatigue by softening the edges of the user interface.

Here are some key points to keep in mind when using rounding:

1. Use rounding sparingly - too much rounding can give the user interface a childish or unprofessional appearance.
2. Be consistent - use consistent rounding throughout the user interface. This will help create a consistent and intuitive user experience.
3. Think about the size of the rounding - the size of the rounding can have an impact on the overall appearance of the user interface. Larger rounding can help soften the appearance of the user interface, while smaller rounding can give a sharper appearance.

Shadows

Add a shadow effect to your components by enabling "Enable shadow" and choosing between a Light, Normal, and Strong shadow.

                        Profile with a "strong" shadow                          Profile with a "light" shadow

Our advice:

Adding shadows can give depth and dimension to a user interface. Here are some key points to keep in mind when using shadows:

1. Use subtle shadows : Shadows that are too pronounced can distract users and prevent them from focusing on the content.
2. Be consistent : Use consistent shadows throughout the user interface. This will help create a consistent and intuitive user experience.
3. Think about floating elements : Floating elements such as buttons or cards can benefit from the addition of shadows to create a more realistic appearance.
4. Use shadows to prioritize elements : Shadows can help guide the user's eye to the most important or relevant elements.

Colors:

The jint.coponents allow you to customize the color of certain elements. You have access to a Jint color selector:

1. You can choose to select colors from your SharePoint's graphic theme to stay within your page's branding, or use a custom color if you have a specific need.
2. On some elements, it is possible to opt for a linear color gradient rather than a solid color. You can then define the two colors, the starting position, and the gradient angle.
3. The color selector automatically retrieves certain colors from your theme:
   • Primary
   • Secondary
   • Tertiary
   • White
   • Alternative neutral: Light background
   • Primary neutral: Dark background
   • Accentuation
4. It is possible to adjust the transparency of the applied color if you have an image, color, or texture in the background to make it appear.

Custom color gradient

Our advice:

Adjusting colors is essential to create coherence and readability in your digital workspaces. Here are some tips:

1. Consider the graphic theme of your SharePoint site and aim to stay within its color palette. This will help maintain consistency and coherence across your site, which can enhance user experience and help users identify your brand.
2. However, if you have a specific need, such as aligning with your company's branding guidelines, you may want to use a custom color. In such cases, make sure that the color you choose complements the existing theme and doesn't clash with other elements on your page.
3. Use colors to create visual hierarchy: Use colors to highlight key elements of the user interface, such as call-to-action buttons, important links, and content areas.
4. Color gradients can add depth and texture to a page, making it more attractive to the eye. It's a great way to smoothly transition from one area of the page to another without being too harsh on the eye.

Audience

Define the audience for your component to make it visible to a specific population!

• Select one or more Entra ID groups as the component's audience.
• Only people belonging to one of the groups will be able to see the components.
• The component will not appear for other users.