Customizing CSS in Zoho Connect
Overview
Enhance your network's branding by customizing its colors and fonts using Custom CSS in Zoho Connect. Once enabled, the custom theme applies to all users in the network. However, individual users can still select one of the default themes for their personal view.
What does customizing CSS do in Zoho Connect?
With Custom CSS in Zoho Connect, you can personalize elements such as the menu colors, background, and text fonts to align your company's identity.
Refer to the image below to understand where custom CSS changes will apply.
Who can enable Custom CSS?
Only network admins have the permissions to enable and modify Custom CSS.
How to enable Custom CSS?
- Go to Settings from the right menu.
- Click Custom CSS under Customization.
- Upload (1) the custom style sheet from the system or enter code (2) in the editor and click Save.
- Once you're done, toggle the Enable Custom CSS button to apply changes.
How do I customize CSS style in Zoho Connect without code knowledge?
If you're not proficient with coding CSS style sheets, you can contact our team for assistance. We'll discuss your needs and personalize the platform's theme based on your preferences.
Here’s a sample CSS code to customize your platform by changing color codes and styles.
- body.theme1,body.theme2,body.theme3,body.theme4,body.theme5{
- /*link color*/
- --linkPrimary: #5A35B1;
- /*name text color*/
- --primaryThemeColor: #5A35B1;
- /*left menu apps bar cont color*/
- --leftAppsContColor: #27293d;
- /*left menu apps icon and text color*/
- --leftAppsIconColor:rgba(255, 255, 255, 0.7);
- /*left menu apps icon and text hover color */
- --leftAppsIconHoverColor:#fff;
- /*left menu apps active icon and text color */
- --leftAppsSelectedIconColor:#fff;
- /*left menu apps hover color */
- --leftnavOptionHoverColor:rgba(255,255,255,0.08);
- /* left menu apps current bg */
- --leftAppsSelectedBG: #5A35B1;
- /*left menu nav list cont color */
- --leftNavContColor:#fff;
- /* left menu nav list color */
- --leftNavListItemColor:#000;
- /* left menu nav listing hover */
- --leftNavListItemHoverColor:#efebf7;
- /* left menu nav list active color*/
- --leftNavListItemSelected: #5A35B1;
- /* left menu apps shrinkMenu footer*/
- --leftAppsContFooterColor:#27293d;
- /* left menu nav list footer option*/
- --leftContNewOption: #efebf7;
- --leftContNewOptionTxt: #5A35B1;
- /** left menu nav list Icon bg color **/
- --leftNavListHeadingIconBg:#F5F5F5;
- /** left menu nav list Icon color **/
- --leftNavListHeadingIconColor:#939393;
- /** left menu nav list Icon bg hover color **/
- --leftNavListHeadingIconHoverBg:#e3e8ee;
- /** left menu nav list Icon hover color **/
- --leftNavListHeadingIconhoverColor:#7f7e7e;
- /* submit button color */
- --submitButtonColor: #5A35B1;
- /*submit button darken*/
- --submitButtonDarkColor:#51309f;
- /* fade link color and blockquotes bg color */
- --submitButtonColorRBG5:#efebf7;
- /* menu hover color and fade of link color*/
- --menuHoverColor: #efebf7;
- /* menu hover backgroundcolor*/
- --menuHoverColorDark: #cec2e8;
- /** White bg color **/
- --bgwhitewhenNightmode:#ffffff;
- /** Loading color **/
- --leftNavListItemColorLoading:#120b23;
- --leftAppsIconColorLoading:#090512;
- &.nightMode{
- /* left menu nav list footer option*/
- --leftContNewOption: rgba(90,53,177,0.24);
- }
- }
How do I download a custom style?
From the Custom CSS page, click Export below the editor to download the custom style.
With Custom CSS, you can take control of your network’s appearance and provide a consistent, professional brand experience to users.
If you have any issues while customizing the CSS, you can contact our team at support@zohoconnect.com. We're happy to help!
Access your files securely from anywhere
Zoho CRM Training Programs
Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.
Zoho DataPrep Personalized Demo
If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
New to Zoho Writer?
Create. Review. Publish.
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.
New to Zoho Survey?
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
New to Bigin?
Related Articles
Integrating Zoho ShowTime with Zoho Connect
Feature Availability What is ShowTime? Zoho ShowTime is a training tool that lets you deliver your presentations and gain feedback on a secure cloud platform. This tool also allows members who work from a different location to join your session. ...Create personalized themes using Custom CSS
Overview Add more branding to your Network by changing the colors and font in it using Custom CSS. Once enabled, the custom theme will be applied to all users in the Network. However, this doesn't prevent users from applying one of the default themes ...Customizing user invitation emails
Overview Invitations sent out to your external collaborators (External Users) can be customized to suit your brand values. You can add a message to give your external stakeholders a better idea on the purpose behind your network. Who can customize ...Introduction to Zoho Connect
Welcome to Zoho Connect, your go-to-platform for seamless employee experience, better team collaboration, and effective work communication. Whether you're a startup team or an established organization, or a distributed team, Zoho Connect gives you ...Export in Zoho Connect
Overview The export option in Zoho Connect lets you download conversations, forums, and private conversations from your network to your computer. Zoho Connect offers three types of exports to help you with your different needs. Manual Export: Select ...
New to Zoho LandingPage?
Zoho LandingPage Resources