v2.1.0

Croster! WHMCS Theme
Documentation

Get started with Croster WHMCS Theme, Its not just a theme its a framework for building unique sites for service providers who use WHMCS for their billing system.

Getting Started
General Settings
Header Settings
Footer Settings
Clientarea Settings
Order Forms
SEO Tools
Page Manager
Menu Manager

Getting Started

Make a Full Backup - We cannot stress enough how important it is to *always* take a full backup before attempting any kind of upgrade/install. Both for WHMCS and any other software you use. A full backup should be taken of both the WHMCS files and the database.

System Requirements:

  • The system requirement is same as WHMCS System Requirement for WHMCS latest stable release.
  • You must have latest stable version of whmcs and it should be installed in Root directory along with Friendly URLs setting as Full Friendly Rewrite.
  • If your WHMCS is fresh installed then you must finish whmcs configuration first, like products groups, products/services along with tlds and tlds pricing setup if you are selling domains.
  • Before installation, if you are using any other template that includes custom navigation bar hooks, you must remove or disable them.

Installation

  1. Log in to your client area and download Croster theme.
  2. Unzip the contents of the zip file to a folder on your computer.
  3. Upload the entire folders and files in to your WHMCS root directory, which are available in 'upload' folder - if you experience problems, try uploading in binary mode. Watch the video for easy understanding.
  4. Login to your WHMCS admin area go to System Settings > Addon Modules
  5. In the addon modules page you will see the Croster Panel click activate then click configure to see the options.

    Croster - WHMCS addon
  6. Now select the Croster template from System Settings >> General Settings >> System Theme and Croster Default order form from System Settings >> General Settings >> Ordring >> Default Order Form Template.

    If you don't want to active during development you may access the theme by using below link and once your website is production ready you can active them.

    https://yourwhmcs.com/index.php?systpl=croster&carttpl=croster_default
  7. Enable Color Scheme Developer mode from WHMCS admin Top Menu >> Addons >> Croster Panel >> Color Scheme then visit client area as admin after that in Color Settings Panel click Save Changes button to build updated css file. Otherwise you will see blank images in some places.

Watch the video and let's see how easy to install Croster WHMCS CMS Theme.

Post-installation Suggested Steps

After completing the installation, you may encounter errors or blank products on pre-created or pre-made templates pages. To resolve this, we recommend configuring your new Croster WHMCS Theme.

Key Configuration Steps:

  1. Products: Similar to the WHMCS order form, the Croster pricing sections are dynamic. To make your plans visible on pages, use the Page Manager to select your plans.
    • If WHMCS is newly installed and no plans or packages have been added yet, you must add them first. Otherwise, the Page Manager will display an empty plan list.
  2. Domain TLDs: Select the TLDs you wish to display in Banner Domain and Fetaured TLDs section, You must need to setup all TLDs in WHMCS domain Pricing if not setup.
  3. Product Groups: Choose the product groups you want to feature and link to internal pages. The theme will automatically retrieve:
    • The lowest product pricing from each group.
    • The description from WHMCS Admin >> Products/Services >> Product Groups.
  4. Product Descriptions: Ensure the product descriptions in WHMCS Admin >> Setup >> Products/Services follow the guidelines outlined in the linked article: How to Add Product Descriptions?.

By following these steps, you’ll ensure your Croster WHMCS Theme is fully functional and optimized for visibility and usability.

Updates

Let's see how easy it is to update Croster WHMCS Theme from any old version. updating the Croster WHMCS Theme is very easy and can be completed in just a few steps.

Make a Full Backup - We cannot stress enough how important it is to *always* take a full backup before attempting any kind of upgrade/install. Both for WHMCS and any other software you use. A full backup should be taken of both the WHMCS files and the database.

It is very simple you can update easily by using following below simple steps.

  1. Download the latest version of Croster and replace all files and folders with the updated version.
  2. Visit the WHMCS System Settings >> addons module section and click on Save button in Croster Panel addon.
  3. Clear your browser cache and server cache if you have any third party services (for example Cloudflare).
  4. Now clear the template caches from whmcs admin >> Utilities >> System >> System Cleanup.
  5. If you are using custom color scheme, enable Color Scheme Developer mode from Croster Panel then visit client area as admin after that in Color Settings Panel click Save Changes button to build updated css file. Watch the video.
Important Step: After upgrading to v2.1 from any older version, you must enable the Overlay section below on this screen from the Slider section in Page Manager to fix the overlapping issue.

General Settings

Croster Panel >> Setup >> General Settings.

Layouts

There are two types of layout options, 'Default' and 'Left', available to use according to your preference.

Croster - Layout Options

In both layouts, you can enable a banner-style header for the client area, as shown in the screenshot below. Once enabled, you will have the option to choose between 'Default' and 'Primary' styles for the banner background. In the 'Default' background style, you can easily change the header image.

Custom Fonts

By enabling this option, you can access settings to add and change fonts for the Croster WHMCS Theme.

Croster WHMCS Theme - Custom Fonts

Now, you just need to add a custom font family CDN URL from Google Fonts in the inputs below to change the website's fonts.

Croster WHMCS Theme - Custom Fonts Options

Theme Switcher

By enabling this option, your users can switch between Light and Dark modes using the theme switcher on the website header.

Croster WHMCS Theme - Theme Switcher Option
Croster WHMCS Theme - Theme Switcher

Preloader

Enable the Pre Loader to display a loading animation on the website while the page reloads.

Croster WHMCS Theme - Pre-loader Option

Shadow and Border Radius

You can enable or disable Shadow and border radius for entire website by using belwo options.

Croster WHMCS Theme - Shadow and Border Radius Options

Friendly SEO URLs

When enable, this will show Friendly SEO URL opton for each pages in Page Manager.

Croster WHMCS Theme - Friendly SEO URLs Option
Please Note: Croster Panel rewrite file (.htaccess), It is designed for systems using the Apache web server.

If you are using LiteSpeed server, you have to be aware that this type of servers require server restart after every change/added in SEO-Friendly URLs, which implement changes to the htaccess file.

Friendly SEO URLs NOT compatible with NGINX web servers and our team does not offer "Technical Support" for this type of servers.

Branding

Logos

If you disable this option, the company name will appear as text instead of a logo.

You can easily upload the Light and Dark versions by clicking the image icons. For the best results, please use the horizontal version of your brand logos. The uploaded graphic should have a minimum height of 40px.

Croster WHMCS Theme - Logo Options

Contacts: Phone, WhatsApp Numbers and Email address

Croster WHMCS Theme - Header Phone Number

These will be displayed in the Pre-header, Two Column footer, and the Modern styled 'Contact Us' page if these options are enabled.

Promo Banner

Enable this option to show a promotion banner under the website header area to inform your offer. You can configure its visibility, set an end date with a counter, change the banner colors, and it supports multiple languages.

Croster WHMCS Theme - Promo Banner Option

When enabled, this option will show a promotion banner under the website header area, as shown in the preview below:

Disqus

Add your Disqus username to enable the Disqus comments section in WHMCS Announcements and Knowledgebase articles.

Croster WHMCS Theme - Discus Option

Header Settings

Croster Panel >> Setup >> Header Settings.

Primary Menu

Menu Colors

You can choose one of the three included options for the main menu background color.

Croster WHMCS Theme - Primary Menu Options

Sticky Menu

You can enable or disable Sticky Menu in website. While scrolling page header will appear at the top.

Croster WHMCS Theme - Sticky Menu

Custom Logo URL

If you want to use Croster for the client area only and want the Home icon and Logo to link to your main website, you can add a custom URL in this input field. For logged-in users/clients, the Home icon will still navigate to the client area dashboard.

Croster WHMCS Theme - Custom Logo URL Option

Hide Home Icon?

Enable this options, If you'd like remove Home icon from primary menu, It will not hide for loged in user/client and mobile menu.

Croster WHMCS Theme - Hide Home Link Option

Menu Right Side?

If you want to Menu in right side, then simply Enable this option. (Only for default layout)

Croster WHMCS Theme - Right Side Menu Option

No Shadow

If you want to disable shadow simply enable this option to make flat bordered menu.

Croster WHMCS Theme - Menu Shadow Option

Sub Menu

You can easily select sub menu style for primary menu.

Croster WHMCS Theme - Sub Menu Types

Side Menu

You can easily select a style for the side menu, which will also change the mobile menu across all layouts.

Croster WHMCS Theme - Side Menu Option
If you are using icons in menu items for the side menu, you need to enable the 'Icon in Home Menu Item' option, as you can't manage the home menu item using the Menu Manager.

Secondary Menu

When you enable this option, Register and Login buttons will be show in place of user icon in secondary menu.

Croster WHMCS Theme - Secondary Menu Option

Pre Header Section.

You can also enable/disable pre header for Main Menu and choose the style as per your choice from 3 background colors. by default its disabled.

Croster WHMCS Theme - Pre Header

Footer Settings

Croster Panel >> Setup >> Footer Settings.

Simple Footer

If you want to enable simple small footer like WHMCS default themes. It will remove Footer Slider, Footer Menus. You can still use Payment Logos, Custom HTML code and Sub Menu Items in copyright section. There are 3 options availabe for simple footer. You can enable this for entier website OR just for client area OR only for loged in clients only.

Croster WHMCS Theme - Simple Footer Options

Logo Slider

If you wish can disable the footer logo list section, which is enabled by default. You can also disable the shadow effect of the slider section. To manage the logo images, click on the 'Manage Logos' button.

Croster WHMCS Theme - Footer Logo List Slider Options

Manage Logos

When you click on the 'Manage Logos' button, you will be redirected to the Manage Logo section, as shown in the screenshot below. Here, you can manage the logo images in the slider.

By clicking the 'Add New' button, you can add more logo images. You can also edit or remove any existing images by using the icons from the list.

Croster WHMCS Theme - Manage Footer Logos

By clicking the 'Add New' OR button, you will be redirected to the screen shown below to upload a logo image.

Croster WHMCS Theme - Footer Logo Image Edit
  • Logo Name: Use the name of the image to identify the file in the logos list.
  • Logo Title: This will be used as the alt attribute for the image.
  • Logo Link: You can add a direct link to a CDN image or select an image from the Media Manager by clicking the icon in the input field.
For the best results, the image size should be 150x50 pixels and transparent, the image should not have a blank background.

Footer Colors

In the Footer Colors section, three types of background colors are available for the footer, allowing you to choose according to your preference.

Croster WHMCS Theme - Footer Background Color Options

Footer Columns

In the Footer Column options, two types of layouts are available: 'Single' and 'Two' columns, allowing you to choose according to your preference.

Croster WHMCS Theme - Footer Column Options

Two Column

When you select the 'Two' column option, you will see some advanced configuration options, as shown below:

Croster WHMCS Theme - Footer Two column Options
Column Positions

Using this option, you can set the position of the columns.

Croster WHMCS Theme - Footer Column Options
Disable second column widget

If you want to add custom HTML code instead of the pre-designed widget, enable this option.

Croster WHMCS Theme - Footer Column Options
Enable the widget in a box.

Enable this option to wrap the widget in a border.

Custom Button Instaed of Contact Us

Using this option, you can change the default 'Contact Us' button to any custom button in the widget.

Custom HTML code in second column

If you want to add additional elements in the second column, you can add your HTML code in the textarea. You can use Bootstrap 4.x CSS classes.

<div class="alert alert-danger mt-2">Custom <b>HTML code</b></div>

In Footer Configuration HTML Field you can add custom html code for display in second column.

Payment Logos

Enable this option if you want to display payment option icons in the footer. You can also use custom HTML code by adding it in the textarea input field if you prefer not to use the default logos.

If you prefer not to use the default logos, you can use the example HTML code below for logos by using Font Awesome icons.

<ul class="border-0 no-shadow p-0">
  <li><i class="fab fa-cc-mastercard"></i></li>
  <li><i class="fab fa-cc-visa"></i></li>
  <li><i class="fab fa-cc-amex"></i></li>
  <li><i class="fab fa-cc-discover"></i></li>
  <li><i class="fab fa-cc-paypal"></i></li>
</ul>

Custom Code

If you want to add more custom HTML code in the footer, either 'Before' or 'After' the Copyright section, use this textarea input field.

<div class="alert alert-danger text-center">Custom <b>HTML code</b></div>

Footer Sub Menu

When you enable this option, fields to add sub-menu items (e.g., Terms of Conditions, Privacy Policy, etc.) will appear. You can add up to four items, which will appear in the footer copyright section.

Clientarea Settings

Croster Panel >> Setup >> Clientarea Settings.

Gravatar

Enable this option if you want to display avatars instead of the account icon in the dashboard sidebar, user management, secondary menu, and ticket messages. Avatars are displayed from the Gravatar website. You can also upload a branded avatar for staff ticket replies.

Page Templates

Login Page

There are two types of login pages available: 'Default' and 'Modern'.

Login Page Background Types

You can select the background type ('Light', 'Dark', or 'No Images') for the login page and change the background image. Simply upload by clicking the image icon in the input or add a link to an image in the input field, as shown below, to replace the default images of the login page.

Support Departments

There are two types of layouts for the support department list on the Open Ticket page: 'Default' and 'Separate Boxes'.

Invoice & Quote (Only clientarea view)

There are two types of layouts for the View Invoice and Quote page available, which you can choose according to your preference. You can also select the background color: 'Light' or 'Dark'.

  • Type 1 : This layout wraps the invoice and quote in the template's header, footer, and sidebar
  • Type 2: This layout does not include the header, footer, or sidebar, similar to the WHMCS default layout.

Contact Us

Please ensure that the WHMCS admin settings are configured as follows:
WHMCS Admin >> System Settings >> General Settings >> Email, as shown in the screenshot below.

There are 2 types of contact us page layout availabe.

Modern Layout Options

When you enable the 'Modern' layout, advanced options will appear, allowing you to add more information to this page.

Location:

In first input you can add your address here. You may use simple HTML in this field, as shown in the example below.

<strong>ThemeMetro</strong><br />2455, Omaxe City, Ajmer Road,<br /> Jaipur, (RAJ.) - 302026 (INDIA)

In the second input, you can add your Google Map embed code. Instructions for the Google Map code are provided in the same section.

You can also enable the display of your email address and social media links by activating the other two options. Please ensure you have added social media links in WHMCS admin >> System Settings >> Genreal Settings >> Social and Email in the Croster Panel >> Setup >> General Settings >> Email Branding section.

Sidebars

Sidebar Types

There are three types of sidebars included: 'Default', 'Boxed', and 'Original'. You can choose according to your preference.

Support Hours Widget

When enabled, a Support Hours widget will appear at the top of the sidebar on the Submit Ticket and Contact Us pages.

Support Hours Widget Configuration

When you enable the Support Hours widget, the configuration options page will appear as shown below:

  • Panel Title: In this input, you can add a custom Panel Title. If you leave it empty, it will default to showing 'Support Hours'.
  • Start Time: With this option, you can set up your working hours start time.
  • End Time: With this option, you can set up your closing time.
  • If you want to display the timing in a 24-hour format, please enable the option just below the end time.
  • Weekends Days: Select the weekend days to be displayed in the widget, and automated messages will be shown accordingly.
  • Offline message: Custom offline message that you want to display when you are unavailable for support.
  • Offline message: Custom online message that you want to display when you are available for support.
  • Time Zone: The time zone will be taken from your PHP time zone configurations, and the working hours will follow this setting.

Launage Variables

In this section, you can translate custom text used in Croster.

Order Forms

Croster Panel >> Setup >> Order Forms.

Single Step

It is ideal if you don't have too many configurable options or addons. However, it does not support product bundles or multiple quantities. When activated, all order links will redirect to this.

When activated, some advanced options will appear for configuring this.

Product Descriptions

By default, only the product name is displayed. When this option is enabled, product descriptions will appear in the order form instead of the product names.

Theme header & footer.

Enable below option, if you want to hide theme header and footer for this order form.

Enable below option, if you want hide only footer for this order form.

Hide Products and Billing Cycle section.

Enable this option if you want to hide the Products and Billing Cycle options when they are pre-selected in the product links, so users do not need to select them again, as shown in the example link below:

WHMCS ROOT/cart.php?a=add&pid=1&billingcycle=triennially

Payment Gateway Wizard

Show or hide payment gateways for specific countries, and set minimum and maximum amounts on the order form.

When you click the 'Payment Gateway Wizard' button above, a modal will open to configure payment gateways according to your preference. These settings will apply only to visitors based on their selected country, not to logged-in clients.

Multi-Step

This is the Croster default order form, which is highly customized and functions like the WHMCS Standard Cart order form. The Multi-Step order form includes two types of products and domain layouts: 'Register' and 'Transfer' pages.

Page Templates

Two types of product page templates are included, which you can choose according to your preference.

Two types of domain 'Register' and 'Transfer' page templates are included, which you can choose according to your preference.

Advanced Options

There are some more advanced options for both types of order forms.

Root Password

Enable this option if you want to disable the Root Password input for Server/VPS type products.

Name Servers

Enable the first option if you want to disable the Name Servers input for Server/VPS type products. Enable the second option to hide the Name Servers inputs in the domain registration process as well.

Promotion Code

Enable this option if you want to disable the coupon code option from the order forms.

Product Descriptions

The format of product descriptions within the WHMCS Admin Products and Services interface should follow the examples provided below. Adhering to this format ensures improved visibility and consistency across all sections of our WHMCS theme.

Example 1 - View a live demo showcasing the same product description in use.

<p>Small information for products</p>
<ul class="custom-features">
    <li><b>Unlimited</b> Website</li>
    <li><b>10 GB</b> Storage</li>
    <li><b>10,000 MB</b> Bandwidth</li>
    <li><b>Unlimited</b> Emails</li>
    <li><b>Unlimited</b> Database</li>
    <li class="features-divider"><span>Premium Features</span></li>
    <li><b>Free</b> SSL Certificate</li>
    <li><b>On-demand</b> Backups</li>
    <li><b>Priority</b> Support</li>
</ul>

Example 2 - View a live demo showcasing the same product description in use.

<p>Small information for products</p>
<ul class="custom-features">
    <li><i class="fal fa-folder fa-fw mr-2"></i><b>40 GB</b> Storage</li>
    <li><i class="fad fa-wifi-2 fa-fw mr-2"></i><b>800 GB</b> Bandwidth</li>
    <li><i class="fal fa-users fa-fw mr-2"></i><b>25</b> cPanel Accounts</li>
    <li><i class="fal fa-envelope fa-fw mr-2"></i><span class="underline" data-toggle="tooltip" data-placement="top" title="Tooltip message">Unlimited</span> Emails</li>
    <li class="features-divider"><span>Premium Features</span></li>
    <li><b>Free</b> <span class="underline" data-toggle="tooltip" data-placement="top" title="Now with our Free SSL you get added security and can gain your customers' trust on your website.">SSL Certificates<span></li>
    <li><b>On-demand</b> Backups</li>
    <li><b>Priority</b> Support</li>
</ul>

Example 3 - View a live demo showcasing the same product description in use.

<ul class="custom-features">
    <li><b>1 GB</b> RAM</li>
    <li><b>20 GB</b> Storage</li>
    <li><b>1 TB</b> Bandwidth</li>
    <li><b>10</b> Snapshots</li>
</ul>

Example 4 - View a live demo showcasing the same product description in use.

<ul class="custom-features type-2">
    <li><b><i class="fal fa-microchip fa-fw mr-2"></i>2.4 Ghz</b> (4 Core/8 Threads)</li>
    <li><b><i class="fad fa-memory fa-fw mr-2"></i>16GB</b> Memory</li>
    <li><b><i class="fad fa-hdd fa-fw mr-2"></i>500 GB</b> SSD RAID 1<span data-toggle="tooltip" data-placement="top" title="RAID-1 disks ensure that your data is protected, through a disk subsystem which records your data on two different drives, this is called 'Mirroring'. If one drive fails, the second drive is used. This ensures that your Dedicated Server never fails."><i class="fas fa-info-circle text-primary"></i></span></li>
    <li><b><i class="fad fa-wifi-2 fa-fw mr-2"></i>10 TB</b> 1GBPS Trasnfer</li>
</ul>

Below example, the default format of product descriptions within the WHMCS admin Product and Services interface to improve visibility across all areas of the Croster theme, including WHMCS bundled order forms.

Disk Space: 1000MB
Bandwidth: 5GB
Email Accounts: 5
Subdomains: 3
Addon Domains: 1
Free SSL Certiface:
Softaculous Auto Installer:

And a further text description can go here to be displayed before the pricing and highlights...

Cookie Consent

Croster Panel >> Setup >> Cookie Consent.

Enable this option to display a Cookie Consent banner on the website.

Configuration

You can configure the banner easily using the options below.

Layout

Position

Dismiss Text

From the input below, you can change the Dismiss button text from 'Got It' to your preferred text.

'Learn more' Text

From the input below, you can change the 'Learn more' text in your preferred text.

'Learn more' URL

From the input below, you can change the 'Learn more' link in your preferred link.

Message

From the input below, you can customize the 'Message' to your preferred text.

Color Scheme

From the options below, you can change the banner color scheme according to your preference.

SEO Tools

Croster Panel >> Setup >> SEO Tools.

Sitemap Wizard

Croster includes a Sitemap wizard to easily generate an XML sitemap for your website.

When you click the 'Sitemap Wizard' button above, a modal will open to configure the Sitemap, as shown below.

Other Tools

In the input fields below, you can add your Facebook App ID, which is required for Open Graph information on Facebook, as well as any other search engine webmaster tools IDs.

Global Schema

When you enable below option, the origination information is included in Google Schema format for your website.

Organization Information

When you enable the option below, the address options will appear.

When you enable the option below, the Social meidla links options will appear.

Page Manager

This article delves into the various section types available, enabling you to design dynamic and engaging web pages. Discover how to leverage these flexible building blocks to create a distinctive online presence that truly connects with your audience.

Croster Panel >> Page Manager.

Page List

  1. Add New: Gives you the possibility to create a page.
  2. Actions:
    • "Preview" - From this button, you can preview the page.
    • "Clone" - By using this button, you can clone the page.
    • "Edit" - Allows you to edit the current page.
    • "Delete" - will remove the page. This action CANNOT be undone!

Page Action

  1. Back: By clicking this icon, you can return to the page list.
  2. Publish: Enable this option if you are ready to publish the page.
  3. Reqired Login: Enable this option if you want to make the page visible only to existing clients. Enabling this option will require users to log in before accessing the page.
  4. Preview: By using the Preview button, you can view the live page after it has been published and saved.
  5. Save: Click the Save button to save the page.

Page Settings

General Settings

  1. Page Title: Set name of created page. This name is used in <title> tag, when SEO Title is not provided.
  2. Page URL: Define url of created page, it must contain .php in end.
  3. Friendly SEO URL: Define url SEO Friendly URL of created page, it should be without .php i.e. Web-Hosting

Page Language/Translation

From the option below, you can change the language of the page or add another language page for translation.

Page SEO Options

Seo Title

Place page title which will be added to the <title> tag in your page HTML code. This title will be used by search engines, while listing your page in search result.

Croster, will automatically generate additional tags, generated from this title:

  1. og:title - Learn more about Open Graph protocol
  2. twitter:title - Learn more about Twitter Cards

Seo Description

A one to two sentence description of your page.

Croster, will automatically generate additional tags, generated from this description:

  1. og:description - Learn more about Open Graph protocol
  2. twitter:description - Learn more about Twitter Cards

Seo Keywords

No Longer a Ranking Factor for Google, Still Useful for Other Search Engines: Some smaller search engines or platforms (like Bing or Yahoo) might still consider the meta keywords tag, but they also rely on other factors like content, links, and user engagement.

Robots

Open Graph Image

An image URL which should represent your object within the graph.

Open Graph Type

The tag is part of the Open Graph (OG) Protocol, which is used to enhance the appearance and sharing experience of your content on social media platforms like Facebook, Twitter, and LinkedIn. While it doesn't directly impact SEO rankings, it plays an important role in social media visibility and user engagement.

If you are not sure about this, just add website in this option.

Custom CSS

If you want to add custom CSS rules for a specific page, use this option.

Page Sections

  1. Add New Section: Clicking on the + icon opens the sections modal, allowing you to select your preferred section from the list,
    as shown in the image below.
  2. Import: When you click on this icon, two options will appear, as shown below.
    1. Import Template: This option allows you import a page from pre-made templates or upload an exported file. Clicking the Import Template button opens a modal, as shown in the image below, where you can choose a pre-made template or upload an exported template.
    2. Note: Importing page replace yor current sections in the page and add new sections.
    3. Import Section: This option allows you to upload your exported section to any page. Importing sections will not replace your current sections on the page. Please import only a single section at a time, as the imported section will be added at the end of all existing sections.
  3. Export: When you click on this icon, two options will appear, as shown below.
    1. Export Page: This option allows you to export a page as a template, which you can use anytime on any page. Clicking the Export Page button opens a modal, as shown in the image below, prompting you to enter the file name for the page you want to save
    2. Export Section: This option allows you to upload your exported section to any page. Importing sections will not replace your current sections on the page. Please import only a single section at a time, as the imported section will be added at the end of all existing sections.

Section Management

You can manage each section using the options below.

  1. Add New: By using the + icon, you can add a new section directly below the current section.
  2. Clikc to Tune: By clicking this icon, you can access the tuning options for the section, such as moving it up or down or deleting the section.
  3. Show/Hide: Using this switch, you can show or hide the section. Once hidden, the section will not be displayed on the website.

Sections Common Settings

Section Description

  1. Caption: By using the + icon, you can add a new section directly below the current section.
  2. Title: The section title is placed in an <h1> or <h2> tag depending on the section's position. If the section is the first one, it uses <h1>; otherwise, it uses <h2>. HTML tags are allowed in this field.
  3. Subtitle: Section subtitle, where content can be customized using small text editor for simple HTML tags.

Frontend

The infromation from the section above will be displayed as depicted below:

Section Backgrounds

  1. Background Type: This option allows you to select the background type: None, Primary, Light, Dark, or Graphic. If you select "Graphic," an option to upload a graphic will become available.
  2. Graphic: This option allows you to upload a graphic using the Media Manager. You can also use an MP4 video as the background.
  3. Opacity and Text Color: Sometimes, you may want to use a lighter shade for the background graphic. In such cases, you can adjust the background opacity and select the text color as needed for the section.

Section Spacing and Borders

  1. Border: This option allows you to select a border for the section, enabling you to set it at the top, bottom, or choose none.
  2. Spacing: Sometimes, you may need to adjust the spacing for the section. These options allow you to select the padding for the section:
    Default (120px), 60px, 30px, or no padding.

Link Types

  1. Link Text/Button Text: In this field, you can add custom text for the button or link.
  2. Link Type/Button Type: This option allows you to select the link type for the button or link. You can choose from the following options: Custom URL, Page Manager/WHMCS Pages, Product Group, or Product.
  3. Link To : This option allows you to select a link based on the type chosen in the above section. For example, if you select "Product Group," it will display a list of all active product groups for you to choose from.

Sections Types

  1. Banner
  2. Banner Domain
  3. Product Groups
  4. Product
  5. VPS Hosting Plans
  6. Dedicated Server Plans
  7. Features
  8. Features TLDs
  9. TLDs Table
  10. Key Features
  11. FAQs
  12. Small header
  13. Gallery
  14. Team Members
  15. Testimonials
  16. Stats
  17. Text/HTML Editor
  18. Announcements
Coming Soon
  1. Legal
  2. Location Map
  3. Blog
  4. Timeline
Replacing by New
  1. Key Features
  2. Team Members
  3. Testimonials
  4. Key Features
  5. VPS Hosting Plans
  6. Dedicated Server Plans

Banner

  1. Add New: By clicking the "+" icon, you can add a new banner. To display multiple banners as a slider, you can add additional banners as needed.
  2. Edit: When you click on any row, a modal opens, allowing you to edit the banner contents.
  3. Delete: If you want to delete the banner, you can do so by selecting the delete option.
  4. Auto Play: When enabled, the banner slider will automatically start playing.
  5. Overlay: Enabling this option will overlay the section below the banner on the screen. For example, you can overlay sections like Products, Product Groups, and Features over the banner.

When you add or edit an item, a modal opens, allowing you to modify the banner contents, as shown below.

Banner Description

  1. Caption: By using the + icon, you can add a new section directly below the current section.
  2. Title: The section title is placed in an <h1> or <h2> tag depending on the section's position. If the section is the first one, it uses <h1>; otherwise, it uses <h2>. HTML tags are allowed in this field.
  3. Subtitle: Section subtitle, where content can be customized using small text editor for simple HTML tags.

Banner Display Type

  1. Banner Type: This option allows you to select the banner type, See example
    1. Type 1: Two-column banner with left or right-aligned graphics.
    2. TYpe 2: Centered single column without graphics. graphics, or a centered single-column banner without graphic.

Banner Graphic

  1. Grpahic: By clicking the image icon, you can add a graphic for the banner. MP4 videos are also supported.
  2. Position: This option allows you to select the banner position, either Right or Left.

Banner Background

  1. Background Type: This option allows you to select the background type: None, Primary, Light, Dark, or Graphic. If you select "Graphic," an option to upload a graphic will become available.
  2. Graphic: This option allows you to upload a graphic using the Media Manager. You can also use an MP4 video as the background.
  3. Opacity and Text Color: Sometimes, you may want to use a lighter shade for the background graphic. In such cases, you can adjust the background opacity and select the text color as needed for the section.
  4. Border: This option allows you to select a border for the section, enabling you to set it at the top, bottom, or choose none.
  5. Spacing: Sometimes, you may need to adjust the spacing for the section. These options allow you to select the padding for the section:
    Default (120px), 60px, 30px, or no padding.

Banner Action

  1. Button Text: In this field, you can add custom text for the button or link.
  2. Button Link Type: This option allows you to select the link type for the button or link. You can choose from the following options: Custom URL, Page Manager/WHMCS Pages, Product Group, or Product.
  3. Link To : This option allows you to select a link based on the type chosen in the above section. For example, if you select "Product Group," it will display a list of all active product groups for you to choose from. If you want to use a link to the same page section as an anchor link, select 'Custom URL' and add the section ID in the link input, such as #sec-*. If you want to use a link to the same page section as an anchor link, select 'Custom URL' and add the section ID in the link input, such as #sec-*. For example, this is used in the SSL Certificates page demo.
  4. Display Pricing : When you enable this option, it will display a selection menu where you can choose a Product Group or specific Product for which you want to show the pricing.

The infromation from the section above will be displayed the banner as depicted below:

Type 1: Two-column banner with left or right-aligned graphics.

Type 2: Centered single column without graphic, background type is graphic.

Banner Domain

Banner Type - From the below option, you can select the desired banner type from the options below:

  1. Type 1: Two-column banner with left or right-aligned graphics.
  2. Type 2: Centered single column without graphics.
  3. Type 3: Compact without background or graphics.

Field Type - From the options below, you can select the desired Domain Field Type:

  1. Type 1: Domain Search
  2. Type 2: Domain Transfer
  3. Type 3: Domain Search & Transfer

TLDs - By clicking the "+" icon, you can add TLDs to show in banner.

For the remaining options, please refer to the Common Setings.

Products Groups

documentions is in progress...

Products

documentions is in progress...

VPS Hosting Plans

documentions is in progress...

Dedicated Server Plans

documentions is in progress...

Features

documentions is in progress...

Features TLDs

documentions is in progress...

TLDs Table

documentions is in progress...

Key Features

documentions is in progress...

FAQs

documentions is in progress...

Small header

documentions is in progress...

Team Members

documentions is in progress...

Testimonials

documentions is in progress...

Stats

documentions is in progress...

Text/HTML Editor

documentions is in progress...

Announcements

documentions is in progress...

Menu Manager

Croster Panel >> Menu Manager.

Main Page

The Croster WHMCS Theme offers a predefined list of menus for each menu type. These menus can be managed under the "Menu Manager" in the "Croster Panel" addon.

  1. Type: Allows you to choose the menu type that you wish to manage
    • Default - a list of menus created for the main navigation.
    • Mega - a list of menus prepared for the Mega-styled main navigation.
    • Footer Menu - a list of menus designed for the footer navigation.
  2. Add New: gives you the possibility to create a brand new menu.
  3. Actions:
    • "Edit" - Allows you to edit the current menu item.
    • "Delete" - will remove the menu item. This action CANNOT be undone!

Management

When you click on Add New buttn OR icon you wil get belwo shown section to add or edit new menu items.

  1. Menu Name: In the "Menu Name" input field, enter the menu item name. This field supports multiple languages. By clicking the language option, you can add more item names in other languages as well.
  2. Menu Link: In the "Menu Link" input field, enter the URL where you want the menu item to point. If the link is external, be sure to include https://.
  3. Menu Target: From this selection option, you can choose the parent menu for the menu item, making it a child menu item. If you select "None - Primary," the item will be a main menu item.
  4. Display Rule:
    • "Always" - a menu will be shown to all clients.
    • "Existing Client" - a menu will be displayed only to "Logged IN" customers.
    • "Guest Client" - a menu will be visible only to "Logged OUT" customers.
  5. Menu Order: Allows to arragnge the order of menu items.
  6. Menu Status: When enabled, the menu item will be shown. If you want to hide it, simply disable this option.
  7. Open in new tab: When enabled, the menu item link will open in a different tab in the browser.
  8. Custom CSS Class: In this input field, you can add any custom CSS class for the menu item.
  9. Menu Icon: From this option, you can select an icon for the menu item using the "Icon Picker." After selecting the icon, you can also add a custom CSS class in the input field for the icon, such as the example below:
    fad fa-life-ring text-danger
    You can use all Bootstrap 4.x text color classes for styling the icon.

Mega Menu

When you enable the Mega Menu, the main menu style in the website header will be changed to the Mega Menu style.

Enable the Mega Menu from the option below.

Once enabled Mega Menu option, you will see management options as follows:

  1. Add New: gives you the possibility to create a brand new menu.
  2. By using the plus icon button, you can expand the menu to view child menu items.
  3. Using these control buttons, you can edit, move the menu items up or down, switch the parent menu, and delete the menu items.
  4. Once you change the order of the menu items, please click on the "Update Sequence" button to publish the changes on the website.

Management

When you click on Add New buttn OR icon you wil get belwo shown section to add or edit new menu items.

  1. Menu Name: In the "Menu Name" input field, enter the menu item name. This field supports multiple languages. By clicking the language option, you can add more item names in other languages as well.
  2. Menu Link: In the "Menu Link" input field, enter the URL where you want the menu item to point. If the link is external, be sure to include https://.
  3. Menu Target: From this selection option, you can choose the parent menu for the menu item, making it a child menu item. If you select "None - Primary," the item will be a main menu item.
  4. Sub Title/Short Description: In this input field, you can add a subtitle or a small description of the menu item. Please note that this only works for child menu items, and if the menu target is set to None-Primary, it will not be visible.
  5. Display Rule:
    • "Always" - a menu will be shown to all clients.
    • "Existing Client" - a menu will be displayed only to "Logged IN" customers.
    • "Guest Client" - a menu will be visible only to "Logged OUT" customers.
  6. Menu Icon: From this option, you can select an icon for the menu item using the "Icon Picker." After selecting the icon, you can also add a custom CSS class in the input field for the icon, such as the example below:
    fad fa-life-ring text-danger
    You can use all Bootstrap 4.x text color classes for styling the icon.
  7. Menu Status: When enabled, the menu item will be shown. If you want to hide it, simply disable this option.
  8. Open in new tab: When enabled, the menu item link will open in a different tab in the browser.
  9. Parent CSS Class: You must need to add dropdown-megamenu class in main parent menu item to enable multi column mega menu, In second child items use Bootstrap 3.x grid column class for columns i.e. col-md-3 and If you are using Custom HTML column only then you also need to add col-html class. For example, you can check the pre-made Services and its child items Service Banner, Hosting, Extra Addons and Domains menu items.
  10. Custom HTML: In this textarea input field, you can add your custom HTML code to be used in the Mega Menu. For example, you can see the Service Banner menu item under the Services menu item.

Color Scheme

Croster Panel >> Color Scheme.

Dark Mode

Developer Mode

To enable the Color Scheme Setting Panel, please enable the Develoepr Mode.

Once you enable the above options, visit the client area as an admin. There, you will see the Color Settings Panel below, where you can change the color scheme according to your preference.

In some server configurations, errors may occur when saving the color scheme.

  • To resolve this issue, ensure that you are using PHP 8.1.
  • If the problem persists, consider disabling Apache ModSecurity or any other third-party security plugins like Cloudflare, if they are enabled.

If none of the above steps resolve the issue, check the PHP or Apache logs to identify the underlying problem. Contact your server administrator for assistance in resolving the issue.

Custom CSS

Croster Panel >> Custom CSS.

In the textarea input below, you can add your custom CSS code, which will be applied to the entire website.

Changelog

Latest Version

Version 2.1.0

Released: December 11th, 2024

Compatible: WHMCS 8.11.2, 8.12.0

PHP: PHP 7.2, 7.3, 7.4, 8.1, or 8.2

  • Improved: Page Manager with lots of new features and sections, please take a look at the live demo.
  • Improved: Media Manager by adding a predefined library with lots of new graphics to use, along with UI improvements.
  • Added: 20 new pre-made templates that can be easily imported into the Page Manager, with more templates coming soon.
  • Added: Small descriptions from knowledge base articles for meta descriptions to enhance SEO.
  • Fixed: overwritten section tpl file was not working when Page SEO url is available in Page Manager.
  • Fixed: Language button visibility in mobile menu when selected primary OR default style.
  • Fixed: When SiteJet is enabled, the SiteJet Builder progress bar does not show on the product page.
  • Fixed: Some W3 CSS and HTML validator errors.

Single Step Order form

  • Improved: Improved product description visibility according to the new Product Description formats.
  • Fixed: PayPal gateway was not working properly.

Deprecations

  • We are going to deprecate some old sections (marked in Page Manager) and replace them with new ones in this version. It is recommended to switch to the new sections as soon as possible, before the next version, as we will be removing them and adding many new ones in v2.1.2.
  • Replaced the old pricing table Style 1 with a new one.

Previous Versions

Compatible: with WHMCS 8.11.1

  • Fixed: Error on ticket feedback page when ticket selected any services.

Single Step Order form

  • Added: On Demand addon renewal is supported.
  • Fixed: Error When new PayPal modules are enabled.
  • Fixed: Pre-Loader issue when checkout finished.
  • Fixed: In Domain renewal, product addons and On demand renewal stripe gateway payment capture issue.

Compatible: with WHMCS 8.9.x

  • Added SEO Friendly URLs option in Page Manager pages.
  • Fixed Client area Dashboard titles clickable issue.
  • Fixed Product Group section calculating pricing of hidden and out of stock products.
  • Fixed Product Group section showing wrong monthly even lowest product billing cycle is one time.
  • Fixed MarketConnect menu items can not hide from the default menu, Now this can be disabled from MarketConnect service settings by disable Landing Page Link option.
  • Fixed Image Gallery section alt tag issue.
  • Fixed Page sections if item listings are more than 20.
  • Fixed Display issue in cart product recommendation when dark mode enabled.

Single Step Order form

  • Fixed Product custom field issue when it is dropdown.
  • Fixed if domain search has a dot by mistake it creates 500 error 500.
  • Fixed In Own domain if by mistake hit enter its getting 500.
  • Fixed When entering wrong information for already registered users it is not showing any error.
  • Fixed When a subdomain is added it does not show any success message.
  • Fixed When users revisit the order page Or change currency/language getting 500 error.
  • Fixed In Stripe Payment gateway or some custom gateway loader is not showing in order process time.

Compatible: with WHMCS 8.8.x

  • Improved Media Library functionality.
  • Fixed Mega Menu minor issues in the Croster Panel.
  • Fixed Support Ticket Widget Online and Offline text translation issue.

Single Step Order form

  • Fixed Product custom filed issue when it's dropdown.

Compatible: with WHMCS 8.8.x

  • Added Related Service in Ticket Information Sidebar.
  • Added Page Manager sections are improved for visibility and functionality for easy management.
  • Fixed Prevent warning in PHP 8.1 If Mega Menu is enabled warnings generates in "tblerrorlog".
  • Fixed Language translation issue in domain search section, replaced by whmcs language variable.
  • Fixed Domain registration page search result issue where full domain available message was not showing.
  • Fixed Restore missing 360 Monitoring icon in order forms and Minor style and UI tweaks for landing page.
  • Fixed Correct application of currency selection.
  • Fixed In some sections image "alt" tag issue.
  • Fixed Visibility issue in small devices for Domain options fields when product required domain in Croster default order form.
  • Fixed Sitemap Wizard not showing custom pages which are generated by Page Manager.
  • Fixed Visibility issue in Croster Default order form in both styles when product has free domain + Setup fees.

Single Step Order form

  • Fixed Epp input was showing in the domain registration page also.
  • Fixed Language/currency switcher was showing multiple times if header and footer is disabled from the Croster Panel.
  • Fixed In Small devices when lots of products are in the slider it's causing issues in the Product visibility.
  • Fixed Language/currency switcher visibility issue in Dark Mode.

Compatible: with WHMCS 8.7.x

  • Added Option to adjust section spacing in dedicated server pricing table section.
  • Fixed Dedicated server pricing table visibility issues.
  • Fixed Media Library and Icon Picker issue in some server configuration.
  • Fixed External link for logo not working in login page.
  • Added Option to hide promo code input from order forms.
  • Fixed Showing pricing 0.00 when product has only configurable options cost and product pricing is 0.

Compatible: with WHMCS 8.6.x

  • Improved PHP 8.1 (supported PHP versions 7.2,7.3,7.4 and 8.1).
  • Added Media Library and Icon Picker in Croster admin panel to manage images and icons easily.
  • Improved Menu name field is now required in Menu Manager (sometimes users create a blank menu and it's causing ghost menu issues.)
  • Added 2 more background options in Feature listing section and fixed minor bugs in Style 3 and Style 4.
  • Added condensed banner style header in left layout also.
  • Improved domain transfer page in croster default order form.
  • Improved Page Manager listing in Croster admin panel to search page by filename.
  • Improved Refresh the header design for small devices, also supported SVG logos.
  • Fixed W3C Markup Validation issue.

Single Step Order form

  • Added - Domain transfer eppcode option required as per setting from WHMCS admin Domain Pricing.
  • Improved Improved visibility.
  • Fixed If stock control enable and qty is less then 1, then checkout button not disable if comes from product link.
  • Fixed Domain renewal filter not working from domain page listing.
  • Fixed Addon billing cycle language variable issue.
  • Fixed Domain input validation for domain input field for blank space, min 3 characters and capitalization.
  • Fixed Single step order form language change removed product ids.
  • Fixed Product Group, Product name and description language translation issue.
  • Fixed Product name and description with language from admin.
  • Fixed Domain Whois and Premium domain issue.
  • Fixed Coupon code, domain required and some other messages translation issue.