Styling Your Tenant
You can style your tenants using Bootstrap 5. Apply any Bootstrap 5 theme to your tenant by specifying the stylesheet URL in the styling section of your configuration file.
Configuration Parameters
The styling section supports the following parameters:
| Parameter | Description |
|---|---|
logoUrl | The URL of the logo that displays on your tenant's header. For best results, use an image with transparent background of 200×50px. |
cssUrl | The URL of the CSS stylesheet that is applied to the tenant. Recommendation: Use |
Example Configuration
"styling": {
"logoUrl": "https://example.com/images/your-logo.png",
"cssUrl": "https://cdn.toolkit.lightstone.co.za/Lightstone.Design/v5/"
}
Custom CSS Overrides
You can override specific Bootstrap elements by providing your own stylesheet. Create a CSS file with your custom styles and host it at a location accessible to your tenant.
Using Tenant Styling
For advanced customization options, you can leverage our tenant styling capabilities as detailed in the Styling documentation. If you're using custom tenant styling with CSS variables:
- Create your custom CSS file with variable overrides as described in the tenant styling documentation
- Host this file at a publicly accessible URL
- Update the
cssUrlparameter to point to your custom CSS implementation:
"styling": {
"logoUrl": "https://example.com/images/your-logo.png",
"cssUrl": "https://example.com/custom-styles/tenant-theme.css"
}
Your custom CSS file should include the necessary overrides for colors, logo, typography, and other styling elements as described in the tenant styling documentation. This approach ensures your customizations will be applied consistently across the platform while maintaining core functionality.
Note: The platform's base CSS file (https://cdn.platform.coaxle.co.za/tenantmanagement-api-prod/styles/platform.css) can be referenced within your custom CSS file or used as a starting point, but should not be directly specified in the cssUrl configuration.