Customizing your Ahsuite client portal allows you to tailor the user experience to match your brand's identity and meet your specific needs. This guide will walk you through the customization options available, including CSS modifications, white label capabilities, and adjustments through portal settings. Whether you're aiming to adjust the look and feel, incorporate your branding, or streamline navigation, Ahsuite offers a range of tools to enhance your portal.
Adjustments Via Portal Settings
Several aspects of your client portal can be customized directly through the portal settings, without needing to write any code:
Sidebar Button Names: Customize the names of sidebar buttons and choose whether they are visible or hidden.
Account Manager Details: Display your account manager's profile picture, name, title, email, and phone number. You can also decide whether to show their "schedule a call" button.
Sidebar Organization: Group sidebar buttons into categories for easier navigation.
Page Display: Choose between displaying pages as sidebar buttons or in a dropdown menu.
These settings allow for significant customization and can be accessed by selecting a portal and navigating to Portal Settings.
Customizing with CSS
CSS, or Cascading Style Sheets, is a powerful tool for modifying the visual aspect of your client portal. Through CSS, you can change fonts, colors, button styles, and much more, giving you full control over your portal's appearance. Admin users can add custom CSS in two places:
Portal Defaults: Set global CSS rules that apply to all client portals by navigating to My Portals > Options.
Individual Portals: Tailor the CSS for a specific client portal by selecting a portal, going to Portal Settings, and expanding the Portal Branding section.
If you're not familiar with CSS, or you're looking for a more efficient way to generate the code, Ahsuite users with a ChatGPT Plus subscription can leverage our custom CSS GPT to help write CSS. Simply describe what you want to change, and our GPT will provide you with the necessary code snippets.
White Label Customization
For those on the Agency plan, Ahsuite offers white label options that take customization to the next level. White labeling allows you to:
Use Your Custom Domain: Reinforce your brand identity with a custom URL for your client portal.
Customize the Agency Logo: Replace the Ahsuite logo with your own throughout the client portal for a consistent branding experience.
Button Color: Align the button color in your portal with your brand’s color scheme, ensuring a cohesive look and feel.
These features are exclusively available to Agency plan users and are essential for agencies looking to provide a fully branded client management solution.
Leveraging Our Custom GPT for Code Assistance
Users with a ChatGPT Plus subscription have the unique advantage of using our custom GPT, designed to assist in writing CSS code for portal customization. This tool is invaluable for those looking to make specific changes without delving into the complexities of CSS coding.
Ahsuite CSS Reference Code
If you can't access our AI tool, we prepared this template so you can know the element names and syntax to make the customizations manually:
.cs-portal-spf-left-sidebar .client-schedule-call a {
font-size: 14px !important; /*schedule-call font size*/
color: #000 !important; /*schedule-call font color*/
background: #fff !important; /*schedule-call background color*/
}
.cs-portal-spf-wrapper .left-menu ul li a span,
.cs-portal-spf-wrapper .left-menu ul li.active span.list-ul-icon,
.cs-portal-spf-wrapper .linkactive,
.cs-portal-spf-wrapper .dinamic-link-wraps:before {
background-color: #fff !important; /*menu icon color*/
}
.cs-portal-spf-wrapper .left-menu ul li a, .cs-portal-spf-wrapper .left-menu ul li span {
color: #fff !important; /*menu font color*/
font-size: 15px !important; /*menu font size*/
}
.cs-portal-spf-wrapper .left-mini-heading {
color: #fff !important; /*need review font color*/
font-size: 14px !important; /*need review font size*/
}
.cs-portal-spf-need-review a span {
font-size: 14px !important; /*need review links font size*/
color: #fff !important; /*need review links font color*/
}
.cs-portal-spf-wrapper .nclient-task-list .table-col-name {
font-size: 14px !important; /*sidebar table font size*/
color: #fff !important; /*sidebar table font color*/
}
/*sidebar font, color, background end*/
.cs-portal-spf-wrapper .save_button,
.cs-portal-spf-wrapper .slide-profile-login a,
.cs-portal-spf-wrapper a.rounded_link,
.cs-portal-spf-wrapper .bur-icon span { background:#000 !important; /*button background color*/ color: #fff !important; /*button text color*/ }
.cs-portal-spf-wrapper .profile-btn > div > a,
.cs-portal-spf-wrapper .agent-login-panel .form input[type="submit"],
.cs-portal-spf-wrapper .pop-form-submit input[type="submit"] { background:#000 !important; /*button background color*/ color: #fff !important; /*button text color*/ }
.cs-portal-spf-wrapper .show-all-side-list span { color: #fff !important; /*link font color*/ font-size: 15px !important; /*link font size*/ }
/*body font is being used in whole website*/
.cs-portal-spf-wrapper, .cs-portal-spf-pages {
background: #000 !important; /*wrapper(body) background color*/
}
body /*need a add a cs-portal class in body*/ {
font-size: 80px !important; /*Body Font size*/
color: #fff !important; /*Body Font color*/
font-family: arial !important; /*Body Font*/
background: #000 !important; /*Body background color*/
}
.cs-portal-spf-header, .cs-portal-spf-header .container {
background: #000 !important; /*Header background color*/
height: 140px !important; /*Header Height*/
}
.cs-portal-spf-header .profile-drop-text, .cs-portal-spf-header .profile-wrap-menu-content .profile-drop-details, .cs-portal-spf-header .profile-wrap-menu-content .profile-drop-details a, .cs-portal-spf-header .theme-font-main, .cs-portal-spf-header .country-selector a {
color: #fff !important; /*Header text color*/
font-family: arial !important; /*Header text font*/
}
/*Header font size start*/
.cs-portal-spf-header .profile-drop-text {
font-size: 20px !important; /*profile name font size*/
}
.cs-portal-spf-header .profile-name {
font-size: 18px !important; /*profile designation font size*/
}
.cs-portal-spf-header .profile-wrap ul li a {
font-size: 22px !important; /*drop down font size*/
}
/*Header font size end*/
/*sidebar font, color, background start*/
.cs-portal-spf-left-sidebar {
background: #000 !important; /*Sidebar background color*/
width: 650px !important; /*to increase sidebar width*/
}
.cs-portal-spf-left-sidebar .nclient-client-account h2.theme-font-main {
color: #fff !important; /*profile name color*/
font-size: 20px !important; /*profile name text size*/
}
.cs-portal-spf-left-sidebar .nclient-client-account * {
font-size: 14px !important; /*Account Executive, mobile, email text size*/
color: #fff !important; /*Account Executive, mobile, email text size*/
}