Introduction v2.0.6

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

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 our other theme/template then you must need to remove/disable provided navigation bar hooks which are bundled with our other theme/template.

Installation

  1. Log in to your client area https://thememetro.com/ 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. 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.

Troubleshooting

After installation is completed, You may see error Or blank pricing tables on precreated pages.

We recommend that you go through and configure your new Croster whmcs theme .

Since Croster pricing sections are dynamic like WHMCS order form so you need to select your plans to make them visible in pages by using Page Manager (If your whmcs is fresh installed and you didn't added any plan or package, you must need to add them first otherwise you will get empty plan list in page manager) .

For Homepage tlds you need to select tlds which you want to show, and for products group you just need to select product groups which you want to show and link of internal pages, It will collect lowest product(s) pricing from group and description from WHMCS products/Services >> Products Group

The product descriptions in whmcs admin >> Setup >> Product/ Services should be as per below article link, because in Web Hosting Plan Section  the price, descriptions and order link ( you just need to select plan only) will be auto collected for page, you don't need to enter them again in page manager while VPS hosting Plans and Dedicated Server Plans section will collect only pricing and order link as per plan selected in page manager.

How to add products description?

How to..

Layouts

Croster Panel >> Setup >> General Settings.

Select Layouts:

In Default layout you can also enable banner style header for clientarea as per below screenshot. Once you enable banner style header you will see options of banner background style Default and Primary.

Custom Fonts

By enable custom fonts to add custom font family to website.

Theme Switcher

By Toggle this icon to switch theme to Light and Dark mode.

Preloader

By enable Pre Loader to add Pre Loader to website while reload the page.

No Shadow
No Radius

By enable No Radius option to remove border radius to entire website.

Enable Logo

This option to enable or disable website logo.

Phone Number

Your phone number to show in pre header.

WhatsApp

Your WhatsApp phone number to show in pre header.

Email

Your contact email to show in pre header.

Promo Banner

Enable or Disable promotion banner under website header area.

Disqus

Header Settings

Croster Panel >> Setup >> Header Settings.

Main Menu Options
Main Menu Colors

Included 3 options for main menu background color along with some advance options.

Sticky Menu

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

Custom Logo URL

You can set custom URL of the website logo here.

After Set Custom logo URL you click on website website logo you will go to that custom URL you set up in custom URL field.

Hide Home Link?

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?

Enable Primary Menu right side. (Only for default layout)

No Shadow

You can enable or disable shadow effect and make flat bordered menu from here.

Sub Menu

Select sub menu style for main menu

Mega Sub Menu Styles.

You can choose the Maga sub menu style.

You can change default menu to Mega menu layout here. >> Menu Manager >> Primary Menu >> Mega.

Menu Hoverable?

Sub menu appears when the user moves the mouse over.

Side Menu

Here you can change side menu for left layout and mobile menu style.

Mega Side Menu Styles.

You can choose the Mega Side Menu (left layout)/Mobile Menu (in all layouts) style.

Icon in Home Menu Item

You can enable or disable home icon in side menu for left layout and mobile menu style.

Pre Header Styles.

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.

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

Footer Slider

You can disable the footer logo/images slider by default its enabled. You can manage the logo images from Croster Panel >> Setup >> Footer Logos.

Footer Logos

You can add or remove footer slider logos here.

Footer background Color

Included 3 options for footer background color.

Footer Column

2 Options is availbe for footer Single column and Two column.

Footer Two Column

Some advance configuration for Two colum footer.

Disable second column widget.

By Enable this option to Disable second column in footer area.

Enable the widget in a box.

By Enable this option to appear contact info in Bordered Box in footer area.

Custom Button Instaed of Contact Us.

By Enable this option to change "CONTACT US" button text to any text you want to appear in widget area in footer.

Footer Second Column HTML Code.
<div class="footer-red-box">Footer Red Box</div>

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

Note: Only HTML code supported.
Payment Logos

Enable this if you want show payment logos in footer.

You can change icons by using HTML code. Please find below example HTML code.

<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 HTML code
<div class="red-box-area">Before Copyright Red Box</div>

In Footer Custom HTML code Field you can add custom html code for display additional thing "Before" or "After" Copyright.

Note: Only HTML code supported.
Footer Menu Items

Enable footer menu items and add your links in copyright section.

Clientarea Settings

Croster Panel >> Setup >> Clientarea Settings.

Gravatar

Display avatar in place of account icon in dashboard sidebar, user management, secondary menu and ticket messages. Avatars are displayed from Gravatar website.

Main Client Area Options

Page Templates

Croster Panel >> Setup >> Clientarea Settings >> Page Templates

Login Page Styles

There aare 2 Styles login page availabe. You can alos select the background style for the login page and can also chnage the background image.

Login Page Background Style

There aare 2 Styles login page availabe. You can alos select the background style for the login page and can also chnage the background image.

Custom Login Page background URL

You can set custom Login background you want by adding backgroind URL Here. For best look image size should be 1920px*900px.

Support Departments

There are 2 types of support department Open Ticket page layout availabe.

Invoice & Quote (Only clientarea view)
Invoice & Quote Background Color(Only clientarea view)
Contact Us

There are 2 types of contact us page layout availabe.

Modern Contact Location

Here add your full address, You may use simple HTML in this field Here.

Your full address will display in contact us page right side of map.

Contact Page Map

Here you can Google Maps code. How to get Google Map embed code?

Google Map will appear in contact page left side of full address.

Enable Social Icons

Enable social media icons which are configured in WHMCS general settings.

Enable phone number

Enable phone number which are configured in Croster general settings.

By Enable this option to configure Phone Number In >> Setup >> General Settings >> Phone Number.

Sidebars

Croster Panel >> Setup >> Clientarea Settings >> Sidebars

Sidebar Styles

There aare 3 Styles sidebar availabe.

Support Hours Widget

Enable/Disable support hours widget in the top of the sidebar on the submit ticket page.

Support Hours Panel Title

In this box you add custom title text you want to display in instead of Support Hours Panel Title in submit ticket page.

Sidebar Panel Time Settings

Here you can Set your support department "Start" & "End" time.

24 Hour Format

Here you can Enable to show 24 hours format in sidebar Support Hours Widget.

Weekend Days

Here you can select weekend days for Support Hours Widget.

Online Notice

Enter your custom message for online support department. If you leave empty it wil show default message in english only.

Offline Notice

Enter your custom message for offline support department. If you leave empty it wil show default message in english only.

Launage Variables

Croster Panel >> Setup >> Clientarea Settings >> Launage Variables

My Dashboard

You can set custom dashboard profile page name here.

Order Form

Croster Panel >> Setup >> Order Form.

Single Page Checkout

Enable single page checkout order form.

Enable products description in order form.

Check this option to display product desction in order form page.

Disable theme header & footer in single page checkout order form.

Check this option to hide "Header" & "Footer" in order form page.

Disable only theme footer in single page checkout order form.

Check this option to hide only "Footer" in order form page.

Hide Choose a Package

Check this option to Hide the Choose a Package and Billing cycles options if those are pre selected from order button OR link.

Payment Gateway Wizard

Show OR Hide payment gateway for specific country, minimum and maximum amount on order form.

Cookie Consent

Croster Panel >> Setup >> Cookie Consent.

Cookie Consent

You can enable or disable Cookie Consent banner here.

Configuration

You can configure Cookie Consent banner setting here.

Cookie Consent Layout Styles
Cookie Consent Position

Here you can change Cookie Consent banner position.

Change Dismiss Text

Here you can change Cookie Consent Dismiss button text instead of "Got It" Text in your selected language output.

Change Cookie Consent message "Learn more" Text

Here you can change Cookie Consent message "Learn more" text in your selected language output.

Change Cookie Consent message "Learn more" URL

Here you can change Cookie Consent message "Learn more" URL here.

Change Cookie Consent Message

Here you can change Cookie Consent Message text in your selected language output.

Color Scheme

You can change Cookie Consent banner Color Scheme.

Color Scheme Options

Favicon

Croster Panel >> Setup >> Favicon.

Favicon

You can enable or disable favicon here.

To add Favicon icon you need add your icon URL in these URL box.

SEO Tools

Croster Panel >> Setup >> Seo Tools.

Sitemap Wizard Options

Sitemap Wizard Setup

Here you can setup your website sitemap.

View Sitemap

Here you can preview your website SEO sitemap.

Other Tools

Here you can setup other website SEO tools.

Page Manager

Croster Panel >> Page Manager

Pages Options

Add New Page

Here you can create New Page.

Page Builder Widgets

Slider Widget

Page Builder Widgets >> Slider

You can add slidwr in the page.

Domain Seach Widget

Page Builder Widgets >> Domain Seach

To use this widget to add Domain Search Section Under the Website Header.

Product Groups Widget

Page Builder Widgets >> Product Groups

To use this widget to display products plans section.

Product Groups Section background color

Page Builder Widgets >> Product Groups >> Section background color

In this style you can Choose any below option.

Product Group Tables Color

Page Builder Widgets >> Product Groups >> Group Tables Color

In this style you can Choose any below option for change Group Table Color.

Pricing Tables

Page Builder Widgets >> Pricing Tables

To use this widget to display Pricing Table Section in the page.

Pricing Tables Styles Options

Page Builder Widgets >> Pricing Tables >> Pricing Tables Styles

In this style you can Choose any below option for change Pricing Tables Style.

Pricing Tables Background Options

Page Builder Widgets >> Pricing Tables >> Background Options

In this style you can Choose any below option for change Pricing Tables Section Background Color.

Pricing Tables Featured Sticker

Page Builder Widgets >> Pricing Tables >> Featured Sticker

In this style you can Choose any below Style for change Pricing Tables featured Sticker.

Pricing Tables Billing Cycle Styles

Page Builder Widgets >> Pricing Tables >> Billing Cycle

In this style you can Choose any below option for change Billing Cycle Style.

Pricing Tables Colors

Page Builder Widgets >> Pricing Tables >> Tables Colors

In this style you can Choose any below option for change Pricing Tables Boxes Color.

Pricing Tables Features list style

Page Builder Widgets >> Pricing Tables >> Features list style

In this style you can Choose any below option for change Pricing Tables Features list style.

VPS Hosting Plans

Page Builder Widgets >> VPS Hosting Plans

To use this widget to add VPS Hosting Plans Section in the page.

Pricing Style

Page Builder Widgets >> VPS Hosting Plans >> Pricing Style

In this style you can Choose any below option for change VPS Hosting Pricing style.

Billing Cycle Order

Page Builder Widgets >> VPS Hosting Plans >> Billing Cycle Order

In this option you can change Billing Cycle Order as you need.

Billing Cycle Section background color

Page Builder Widgets >> VPS Hosting Plans >> Billing Cycle Section background

In this option you can change Billing Cycle Section background color.

Table LabelsIf empty the default labels are shwoing in English only.

Page Builder Widgets >> VPS Hosting Plans >> Table Labels

You can change VPS Hosting Plan Table Label Text.

Dedicated Server Plans

Page Builder Widgets >> Dedicated Server Plans

Using this widget to display Dedicated Servers Plans section in page

Pricing Style

Page Builder Widgets >> Dedicated Server Plans >> Pricing Style

In this style you can Choose any below option for change Dedicated Server Plans section style.

Billing Cycle Order

Page Builder Widgets >> Dedicated Server Plans >> Billing Cycle Order

In this option you can change Dedicated Server Pricing Order as you need.

Billing Cycle Section background color

Page Builder Widgets >> Dedicated Server Plans >> Dedicated Server Plans Section background

In this option you can change Dedicated Server Plans Section background color.

Table LabelsIf empty the default labels are shwoing in English only.

Page Builder Widgets >> Dedicated Server Plans >> Table Labels

You can change Dedicated Server Plans Table Label Text.

Features Section

Page Builder Widgets >> Features Section

Using this widget to display website "Service" or "Features" section in page

Section background color

Page Builder Widgets >> Features Section >> Section background color

In this option you can change Features Section Background Color.

List Style

Page Builder Widgets >> Features Section >> List Style

In this option you can change List Styles.

Section background image

Page Builder Widgets >> Features Section >> Section background Image

In this Field you can put your custom Background URL.

  • Must include https:// in image link and minimum image size is 100px X 100px.
  • FontAwsome icons should be like fas fa-rocket.
  • In icon, you can use supported classes (text-primary, text-danger, text-warning, text-info), i.e. fas fa-rocket text-primary.

Features List Section

Page Builder Widgets >> Features List Section

Using this widget to display website "Service List" or "Features List" section in page

Section background color

Page Builder Widgets >> Features Section >> Section background color

In this option you can change Features Section Background Color.

FAQs Section

Page Builder Widgets >> FAQs Section

Using this widget to display FAQs Section in page.

FAQs Section Styles

Page Builder Widgets >> FAQs Section >> FAQs Section Styles

In this option you can change FAQs Section Styles.

Section background color

Page Builder Widgets >> FAQs Section >> Section background color

In this option you can change FAQs Section background color.

Simple Header

Page Builder Widgets >> Simple Header

Using this widget to display Simple Header in page.

Section background color

Page Builder Widgets >> Simple Header >> Section background color

In this option you can change Simple Header background color.

Section background Custom Image URL

Page Builder Widgets >> Simple Header >> Section background image URL

In this option you can change Simple Header background image.

Call to Action Section

Page Builder Widgets >> Call to Action Section

Using this widget to display Call to Action Section in page.

Section background color

Page Builder Widgets >> Call to Action Section >> Section background color

In this option you can change Call to Action Section background color.

Section background Custom Image URL

Page Builder Widgets >> Call to Action Section >> Section background image URL

In this option you can change Call to Action Section background image.

Call to Action with Image Section Layout

Page Builder Widgets >> Call to Action Section >> Section Image

In this field you can put custom image URL Call to Action with Image section layout.

Image Section Position

Page Builder Widgets >> Call to Action Section >> Image Section Position

In this options you can change image section position to "Left" & "Right" side.

Image Gallery

Page Builder Widgets >> Image Gallery

Using this widget to display Image Gallery Section in page.

Image Gallery Styles

Page Builder Widgets >> Image Gallery >> Styles

In this option you can change Image Gallery Style to "Slider" or "Grid" Layout.

Image Gallery Section background color

Page Builder Widgets >> Image Gallery >> Image Gallery Section background color

In this option you can change Image Gallery Section background color.

Image Gallery Custom Backgound By URL

Page Builder Widgets >> Image Gallery >> Image Gallery Custom Backgound By URL

In this option you can change Image Gallery Section background image by URL.

Team Listing

Page Builder Widgets >> Team Listing

Using this widget to display Team Listing Section in page.

Team Listing Styles

Page Builder Widgets >> Team Listing >> Styles

In this option you can change Team Listing Style to "Slider" or "Grid" Layout.

Team Listing Section background color

Page Builder Widgets >> Team Listing >> Team Listing Section background color

In this option you can change Team Listing Section background color.

Testimonials

Page Builder Widgets >> Testimonials

Using this widget to display Testimonials Section in page.

Testimonials Section background color

Page Builder Widgets >> Testimonials >> Testimonials Section background color

In this option you can change Testimonials Section background color.

Text/HTML Editor

Page Builder Widgets >> Text/HTML Editor

Using this widget to display Description or Custom HTML Content Section in page.

Text/HTML Editor Modes

Page Builder Widgets >> Text/HTML Editor >> Text/HTML Editor Section

By using this widget to display content in text or "HTML" written content.

Text/HTML Editor Layout

Page Builder Widgets >> Text/HTML Editor >> Text/HTML Editor Layout

By using this option to display content in "Container" or "Full Width" Layout.

Text/HTML Editor Section background color

Page Builder Widgets >> Text/HTML Editor >> Text/HTML Editor Section background color

In this option you can change Text/HTML Editor Section background color.

Text/HTML Editor Backgound By URL

Page Builder Widgets >> Text/HTML Editor >> Text/HTML Editor Custom Backgound By URL

In this option you can change Text/HTML Editor Section background image by URL.

Latest Announcements

Page Builder Widgets >> Latest Announcements

Using this widget to display Latest Announcements Section in page.

Latest Announcements Section background color

Page Builder Widgets >> Latest Announcements >> Latest Announcements Section background color

In this option you can change Latest Announcements Section background color.

Latest Announcements Backgound By URL

Page Builder Widgets >> Latest Announcements >> Latest Announcements Custom Backgound By URL

In this option you can change Latest Announcements Section background image by URL.

Edit Existing Pages

Here you can take actions on your existing pages.

Menu Manager

Croster Panel >> Menu Manager

Primary Menu

Croster Panel >> Menu Manager >> Primary Menu

Default Menu

Croster Panel >> Menu Manager >> Primary Menu >> Default Menu

Add New Menu

Here you can create New Menu.

Menu Name

Here you can add Menu Name.

Menu Link

Here you can add Menu Link. if the link is external then include https://

Menu Target

Here you can change order of menu item. In Menu Target dropdown by selecting None / Primary option to display menu item as main menu item. When you selecting the other main menu item it was display under that main menu item you selecting in the dropdown list.

Display Rule

Here you can set conditon by users roles. In Display Rule dropdown three types of display condition availabe 1. Always By selecting Always option to menu will be display for all users. 2. Existing Client By selecting Existing Client option to menu will be display for Existing Users. 3. Guest Client By selecting Guest Client option to menu will be display for Guest Client.

Menu Order

Here you can set menu order to want to display in the website.

Menu Status

By Enable to Show & Disable to hide this menu item in the website.

Open in new tab?

By Enable to Open Menu Link In New Tab of the browser & Disable to Open Menu Link in same window of the browser.

Custum CSS Class

For adding CSS Effect for this class you will need to add Class Name in the field.

After add Class Name Here You will add CSS Custom Codes Here.

Menu Icon

You may enter FontAwesome icon class here to display the icon in the menu item.

Edit Existing Menu

Here you edit existing menu.

Mega Menu

Croster Panel >> Menu Manager >> Primary Menu >> Mega Menu

By Enable thi option to activate Mega Menu for website.

Add New Mega Menu

Here you can create New Mega Menu.

Mega Menu Name

Here you can add Mega Menu Name.

Mega Menu Link

Here you can add Mega Menu Link. While Creating Main Mega Menu Item Link should be # for better user expiriance

Mega Menu Target

Here you can change arrange of mega menu item in order you want. In Mega Menu Target dropdown by selecting None / Primary option to display menu item as main mega menu item. When you selecting the other main menu item it was display under that main menu item you selecting in the dropdown list.

Add Sub Menu Item Under Main Menu

For creating Sub Menu Item you will click add new button option. Then you will follow these Process again. But one thing keep in mind is that in Menu Target Options you will need to select one Main Menu Item option you want to arrange under that Main Menu.

Menu Sub Title / Short Description

Menu Sub Title / Short Description will display under Sub Menu Title.

Mega Menu Display Rule

Here you can set conditon by users roles. In Display Rule dropdown three types of display condition availabe 1. Always By selecting Always option to menu will be display for all users. 2. Existing Client By selecting Existing Client option to menu will be display for Existing Users. 3. Guest Client By selecting Guest Client option to menu will be display for Guest Client.

Mega Menu Menu Icon

You may enter FontAwesome icon class here to display the icon in the menu item.

Menu Status

By Enable to Show & Disable to hide this menu item in the website.

Open in new tab?

By Enable to Open Menu Link In New Tab of the browser & Disable to Open Menu Link in same window of the browser.

Parent CSS Class

After add Class Name Here You will add CSS Custom Codes Here.

Custom HTML

By using Custom HTML you can display custom content or layout of menu item.

Edit Existing Mega Menu Item

Here you edit existing Mega menu.

Footer Menu

Croster Panel >> Menu Manager >> Primary Menu >> Footer Menu

Add New Footer Menu

Here you can create New Footer Menu.

Footer Menu Name

Here you can add Footer Menu Name.

Footer Menu Link

Here you can add Footer Menu Link.

if the link is external then include https://, If you want menu item without any link then add @nolink in link.

Footer Menu Target

Here you can change order of footer menu item. In Menu Target dropdown by selecting None / Primary option to display menu item as main menu item. When you selecting the other footer main menu item it was display under that main menu item you selecting in the dropdown list.

Display Rule

Here you can set conditon by users roles. In Display Rule dropdown three types of display condition availabe 1. Always By selecting Always option to menu will be display for all users. 2. Existing Client By selecting Existing Client option to menu will be display for Existing Users. 3. Guest Client By selecting Guest Client option to menu will be display for Guest Client.

Footer Menu Order

Here you can set Footer menu order to want to display in the website.

Menu Status

By Enable to Show & Disable to hide this menu item in the website.

Open in new tab?

By Enable to Open Menu Link In New Tab of the browser & Disable to Open Menu Link in same window of the browser.

Custum CSS Class

For adding CSS Effect for this class you will need to add Class Name in the field.

After add Class Name Here You will add CSS Custom Codes Here.

Menu Icon

You may enter FontAwesome icon class here to display the icon in the menu item.

Edit Existing Footer Menu

Here you edit existing Footer menu.

Color Scheme

Croster Panel >> Color Scheme

Dark Mode

Developer Mode

Custom CSS

Croster Panel >> Custom CSS

Here you can add custom css code which apply entire website.