The WHMCS Default 6 template provides a clean and functional layout for your client portal. However, with a few custom CSS snippets, you can enhance its design and make it more visually appealing. In this article, we’ll explore useful CSS snippets to customize the WHMCS Default 6 template.

Why Use Custom CSS for WHMCS?

  1. Brand Consistency: Align the WHMCS portal with your website’s branding.

  2. Improved User Experience: Enhance the design for better navigation and readability.

  3. Modern Look: Add animations, shadows, or hover effects for a polished interface.

1. Customizing the Client Area Login Page

The default login page can look a bit plain. Add a modern touch with a custom background and styled login box.

CSS Snippet:

/* Custom Login Page Background */
body.clientarea {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: #fff;
    font-family: Arial, sans-serif;
}

/* Centered Login Box */
.logincontainer {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.logincontainer h1 {
    text-align: center;
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
}

/* Login Form Fields */
.logincontainer input[type="text"], 
.logincontainer input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Submit Button */
.logincontainer input[type="submit"] {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    width: 100%;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.logincontainer input[type="submit"]:hover {
    background-color: #0056b3;
}

2. Styling the Navigation Menu

Make the default navigation menu look sleek with hover effects and better spacing.

CSS Snippet:

/* Navigation Bar Styling */
.navbar-main {
    background-color: #007bff;
    border-bottom: 3px solid #0056b3;
}

.navbar-main .navbar-nav > li > a {
    color: #fff !important;
    padding: 10px 20px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.navbar-main .navbar-nav > li > a:hover {
    background-color: #0056b3;
    color: #f8f9fa !important;
}

/* Active Menu Item */
.navbar-main .navbar-nav > li.active > a {
    background-color: #004080;
    color: #fff !important;
}

3. Enhancing Tables for Better Readability

WHMCS tables often display a lot of information. Enhance their readability with striped rows and hover effects.

CSS Snippet:

/* Table Styling */
.table {
    width: 100%;
    border-collapse: collapse;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}

.table-hover > tbody > tr:hover {
    background-color: #e9ecef;
    transition: background-color 0.2s ease;
}

.table th {
    background-color: #007bff;
    color: #fff;
    padding: 10px;
    text-align: left;
}

.table td {
    padding: 10px;
    border: 1px solid #dee2e6;
}

4. Styling Buttons Across WHMCS

Ensure all buttons have a consistent style and hover effect.

CSS Snippet:

/* General Button Styling */
.btn {
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 8px 15px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #0056b3;
}

/* Secondary Buttons */
.btn-secondary {
    background-color: #6c757d;
    color: #fff;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

5. Adding a Footer with Styling

The default footer can be made more appealing with spacing, colors, and alignment.

CSS Snippet:

/* Footer Styling */
.footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 10px;
}

.footer a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer a:hover {
    color: #0056b3;
}

How to Add Custom CSS to WHMCS

  1. Go to your WHMCS installation folder.

  2. Navigate to the templates/six/css/ directory.

  3. Open the custom.css file (create one if it doesn’t exist).

  4. Paste the desired CSS snippet into the file.

  5. Save changes and clear your WHMCS template cache.

Alternatively, you can add CSS through WHMCS Admin > Setup > General Settings > Custom CSS.

With these CSS snippets, you can easily enhance the WHMCS Default 6 template. From improving login page design to styling buttons and tables, these customizations will ensure your WHMCS client area is more visually appealing and aligned with your brand. Give them a try and transform your WHMCS experience!