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.
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.
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.
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.
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.
By following these steps, you’ll ensure your Croster WHMCS Theme is fully functional and optimized for visibility and usability.
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.
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
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.
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
Enable the Pre Loader to display a loading animation on the website while the page reloads.
You can enable or disable Shadow and border radius for entire website by using belwo options.
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.
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.
These will be displayed in the Pre-header, Two Column footer, and the Modern styled 'Contact Us' page if these options are enabled.
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:
Add your Disqus username to enable the Disqus comments section in WHMCS Announcements and Knowledgebase articles.
You can choose one of the three included options for the main menu background color.
Default
Primary
Dark
You can enable or disable Sticky Menu in website. While scrolling page header will appear at the top.
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.
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.
If you want to Menu in right side, then simply Enable this option. (Only for default layout)
If you want to disable shadow simply enable this option to make flat bordered menu.
Preview: No Shadow Header
Preview: With Shadow Header
You can easily select sub menu style for primary menu.
Default
Style 1
Style 2
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
When you enable this option, Register and Login buttons will be show in place of user icon in secondary menu.
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
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.
There are two types of login pages available: 'Default' and 'Modern'.
Default
Modern
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.
Light
Dark
No Image
There are two types of layouts for the support department list on the Open Ticket page: 'Default' and 'Separate Boxes'.
Default
Separate Boxes
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 (Light)
Type 2 (Light)
There are 2 types of contact us page layout availabe.
Default
Modern
When you enable the 'Modern' layout, advanced options will appear, allowing you to add more information to this page.
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.
There are three types of sidebars included: 'Default', 'Boxed', and 'Original'. You can choose according to your preference.
Default
Boxed
Orignal
When enabled, a Support Hours widget will appear at the top of the sidebar on the Submit Ticket and Contact Us pages.
When you enable the Support Hours widget, the configuration options page will appear as shown below:
In this section, you can translate custom text used in Croster.
Dashbaord
Do you have a promo code?
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.
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.
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.
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
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.
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.
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
There are some more advanced options for both types of order forms.
Enable this option if you want to disable the Root Password input for Server/VPS type products.
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.
Enable this option if you want to disable the coupon code option from the order forms.
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.
<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>
<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>
<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>
<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.
You can configure the banner easily using the options below.
Default
Classic
Edgeless
Bottom
Bottom Left
Bottom Right
From the input below, you can change the Dismiss button text from 'Got It' to your preferred text.
From the input below, you can change the 'Learn more' text in your preferred text.
From the input below, you can change the 'Learn more' link in your preferred link.
From the input below, you can customize the 'Message' to your preferred text.
From the options below, you can change the banner color scheme according to your preference.
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.
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.
When you enable below option, the origination information is included in Google Schema format for your website.
When you enable the option below, the address options will appear.
When you enable the option below, the Social meidla links options will appear.
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.
<title>
tag, when SEO Title is not provided.From the option below, you can change the language of the page or add another language page for translation.
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:
og:title
- Learn more about Open Graph protocoltwitter:title
- Learn more about Twitter CardsA one to two sentence description of your page.
Croster, will automatically generate additional tags, generated from this description:
og:description
- Learn more about Open Graph protocoltwitter:description
- Learn more about Twitter CardsNo 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.
An image URL which should represent your object within the graph.
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.
If you want to add custom CSS rules for a specific page, use this option.
You can manage each section using the options below.
<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.The infromation from the section above will be displayed as depicted below:
When you add or edit an item, a modal opens, allowing you to modify the banner contents, as shown below.
<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.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 Type - From the below option, you can select the desired banner type from the options below:
Field Type - From the options below, you can select the desired Domain Field Type:
TLDs - By clicking the "+" icon, you can add TLDs to show in banner.
For the remaining options, please refer to the Common Setings.
documentions is in progress...
documentions is in progress...
documentions is in progress...
documentions is in progress...
documentions is in progress...
documentions is in progress...
documentions is in progress...
documentions is in progress...
documentions is in progress...
documentions is in progress...
documentions is in progress...
documentions is in progress...
documentions is in progress...
documentions is in progress...
documentions is in progress...
documentions is in progress...
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.
When you click on Add New buttn OR icon you wil get belwo shown section to add or edit new menu items.
fad fa-life-ring text-danger
You can use all Bootstrap 4.x text color classes for styling the icon.
When you enable the Mega Menu, the main menu style in the website header will be changed to the Mega Menu style.
Once enabled Mega Menu option, you will see management options as follows:
When you click on Add New buttn OR icon you wil get belwo shown section to add or edit new menu items.
fad fa-life-ring text-danger
You can use all Bootstrap 4.x text color classes for styling the icon.
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.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.
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.
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
Compatible: with WHMCS 8.11.1
Compatible: with WHMCS 8.9.x
Compatible: with WHMCS 8.8.x
Compatible: with WHMCS 8.8.x
Compatible: with WHMCS 8.7.x
Compatible: with WHMCS 8.6.x