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.
   
   
6. Once done, visit the Croster Panel by click Addons >> Croster Panel
   
   
   
   
7. Enter the Croster license key and press the "Save" button. The license key can be found in ThemeMetro Client Portal.
   
   
8. 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

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.

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.

Layouts

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

Default

Left

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.

Default

Primary

Custom Fonts

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

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.

Theme Switcher

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

Light Mode

Dark Mode

Preloader

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

Shadow and Border Radius

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

1. You can enable or disable shadow effect in panels or make them flat bordered in entire client area including order form from here.
   Please Note: This option will not disable box shadow effect in header, footer and page manager sections as you can change them from their own respective settings.
2. You can enable or disable border radius for entire website here.

Friendly SEO URLs

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

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.

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.

Favicon

Uploaded graphics should be in the shape of a square and have at least 512x512px size. It is recommended to use the PNG or JPG graphic format. Croster will automatically generate different required sizes of a favicon logo and assign the required code to the Croster WHMCS Client Theme <head> tag.

Contacts

Contacts: Phone, WhatsApp Numbers and Email address

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.

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.

Primary Menu

Menu Colors

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

Default

Primary

Dark

Sticky Menu

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

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.

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.

Menu Right Side?

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

No Shadow

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

Preview: No Shadow Header

Preview: With Shadow Header

Sub Menu

You can easily select sub menu style for primary menu.

Default

Style 1

Style 2

Side Menu

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

Default Side Menu

Primary Side Menu

Dark Side Menu

Secondary Menu

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

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.

Default

Primary

Light

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.

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.

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.

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

• 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.

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.

Default

Primary

Dark

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.

Single

Two

Two Column

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

Column Positions

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

Left

Right

Disable second column widget

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

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>

Before

After

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.

General Settings

Profile Grpahics

Sidebars

DataTables

Gravatar

Enable this if you'd like to display avatar in place of account icon in dashboard sidebar, user management, secondary menu and ticket messages. Avatars are displayed from https://gravatar.com/ website.

Sidebars

SideBar Type

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

Default

Boxed

Orignal

DataTables

Hide Status Icons

When enabled, status icons will be replaced with status dots in all datatables.

Hidden Status Icons

This Table Status Icons will be hidden.

Enable Dynamic AJAX Loading for Data Tables

This feature enhances the speed and responsiveness of your client area by dynamically loading data tables using AJAX. This means data for items like domains, tickets, invoices, or any other services is only loaded as needed.

Consider you have 2000 domains listed in the client area. Typically, loading such a table could take 20-60 seconds because WHMCS loads all data simultaneously. However, with the "Enable Dynamic AJAX Loading for Data Tables" feature activated, only the first 10 domains are initially loaded, reducing the load time to less than 1 second.

This improvement not only speeds up the interface but also makes it more responsive, especially when handling large datasets. Actions like filtering domain names, sorting ticket entries, or searching for specific invoices become smoother as the data updates dynamically without needing to reload the entire page.

Sensitive Data Settings

Sensitive Data

Enable this to show an extra field where users can safely provide sensitive information in tickets.

Sensitive Data Preview

Here you can see Sensitive Data Tab.

Department

Choose the departments where the Sensitive Data field should be enabled.

Department Preview

Here you can see "Sensitive Data" in selected departments.

Sensitive Data Removal

Remove Sensitive Data on Ticket Close.

Sensitive Data Removal Preview

Sensitive Data Removal will be displayed here.

Allow Removal for Customers

When enabled, customers can manually remove their sensitive data using a "Remove" button. This gives them full control over the data they have shared.

Admin Area Access

When enabled, this grants access to Sensitive Data in the WHMCS Admin Area, displaying an icon in the "Ticket List" and allowing view/edit options on the "Ticket View" pages.

Manage Sensitive Data

Here you can manage sensitive data for all.

Edit Sensitive Data

Here you can edit Sensitive Data and It will be reflected on front side.

Operating Hours

Department Schedules

Here you can create Schedules.

Department Schedules Preview

Here you can see Schedules.

Department

Here you can select departments for operating hours.

Department Preview

Here you can see departments with operating hours.

Operating Days

Here you can select operating days for departments.

Operating Days Preview

Here you can see selected operating days.

Operating Time

Here you can set operating time for departments.

Operating Time Preview

Here you can see operating time.

Apply Holidays

When enable this option to display holidays info in operating hours card.

Apply Holidays Preview

Here you can see holidays info.

Time Format

When enabled, the time will be shown in 12-hour format (e.g., 11:05 AM/PM). By default, it is displayed in 24-hour format.

Time Format Preview

Here you can see 12-hour time format.

Time Zone

Here you can Enable Time Zone for Operating Hours Card.

Time Zone Preview

Here you can see Time Zone for Operating Hours Card.

First Day of the Week

This option allows you to select the starting day of the week, customizing the week's display to align with your region or preference.

First Day of the Week Preview

First Day of the Week will be displayed here.

Holidays

Select the start and end dates for holidays and provide a name.

Holidays Preview

Here you can see holidays info.

Cookie Consent

Position Bottom

Here you can set Cookie Consent Banner position at Bottom.

Position Bottom Preview

Here Cookie Consent Banner will be displayed at bottom of page.

Position Bottom Left

Here you can set Cookie Consent Banner position at Bottom Left.

Position Bottom Left Preview

Here Cookie Consent Banner will be displayed at bottom left of page.

Position Bottom Right

Here you can set Cookie Consent Banner position at Bottom Right.

Position Bottom Right Preview

Here Cookie Consent Banner will be displayed at bottom right of page.

Layout Default

Here you can set Cookie Consent Banner layout as Default.

Layout Default Preview

Here you can see Cookie Consent Banner Default layout.

Layout Classic

Here you can set Cookie Consent Banner layout as Classic.

Layout Classic Preview

Here you can see Cookie Consent Banner Classic layout.

Layout Edgeless

Here you can set Cookie Consent Banner layout as Edgeless.

Layout Edgeless Preview

Here you can see Cookie Consent Banner Edgeless layout.

Change Cookie Content

Here you can change cookie content.

Changed Cookie Content Preview

Cookie content will be changed here.

Change Cookie Color

Here you can change cookie Color.

Changed Cookie Color Preview

Cookie Color will be changed here.

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.

Style 1

Style 2

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

Style 1

Style 2

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...

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

Configuration

You can configure the banner easily using the options below.

Layout

Default

Classic

Edgeless

Position

Bottom

Bottom Left

Bottom Right

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.

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 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.

Note: Importing page replace yor current sections in the page and add new sections.
2. 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. 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.

Frontend

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...

Gallery

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...

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.

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.

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

Latest Version

Previous Versions