How to Resize the Logo on the Customer Portal Page
Resizing the logo displayed on the customer portal page enhances brand consistency and contributes to a visually balanced interface. Proper logo sizing creates a more refined and professional appearance, improving the overall user experience across various devices and screen sizes.
To resize the logo on the login and customer portal pages, follow these steps:
- Navigate to Admin Center > Customer Portal > Customization.
- Locate Custom CSS and click Add Custom CSS.
- Copy the given code and paste it in the window that opens.
.custom-logo{
height: 100px;
width: 160px;
}
.app-header-container.flex {
height: 100px;
}
You can adjust the value logo (.custom-logo) and the app header container (.app-header-container.flex) to match your size requirements.
-
Click Add to save your changes.
FAQs
-
Does resizing the logo affect mobile responsiveness in BoldDesk?
BoldDesk’s portal is responsive by default. However, if you set very large values, you may need to add media queries to optimise mobile display. -
Where can I find the correct CSS selectors for other portal elements?
Selectors can be identified using browser inspection tools. All valid CSS can be applied through Admin Center → Customer Portal → Customization → Custom CSS. -
Will updating the logo size affect the portal theme?
No. Logo resizing only modifies the image container and header height. Your selected theme, colours, and layout remain unchanged. -
Can I preview CSS changes before publishing?
Changes are applied immediately upon saving, but you can test safely on a sandbox portal if your organisation uses one. -
What image format is recommended for the portal logo?
For best clarity, use .jpeg, .jpg, .png, .svg, .gif, and .ico files. These formats scale cleanly and maintain visual quality when resized. -
Does this code modify the logo on the customer portal as well as the login logo?
No, only the customer portal logo is resized using this CSS code. The login logo remains unchanged.
