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:
Zoho FSM Video Tutorials
Centralize Knowledge. Transform Learning.
All-in-one knowledge management and training platform for your employees and customers.
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 CPaaS?
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. ...Integrating Zoho Meeting and Zoho Connect
Feature Availability What is Zoho Meeting? Zoho Meeting is an online conferencing solution that lets you conduct screen-sharing sessions, and make audio or video calls to your team members. Using this integration, you can start a session with any of ...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 ...File attachments in Zoho Connect
Overview You can attach documents from your desktop, Zoho WorkDrive, Zoho Docs, Google Drive, Dropbox, OneDrive, Box, and also, from the Files app within Zoho Connect. The maximum size limit is 10 MB per file for documents. You can attach up to 10 ...
New to Zoho LandingPage?
Zoho LandingPage Resources