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.
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.
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 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.
Croster Panel >> Setup >> General Settings.
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.
By enable custom fonts to add custom font family to website.
By Toggle this icon to switch theme to Light and Dark mode.
By enable Pre Loader to add Pre Loader to website while reload the page.
By enable No Radius option to remove border radius to entire website.
This option to enable or disable website logo.
Your phone number to show in pre header.
Your WhatsApp phone number to show in pre header.
Your contact email to show in pre header.
Enable or Disable promotion banner under website header area.
Croster Panel >> Setup >> Header Settings.
Included 3 options for main menu background color along with some advance options.
You can enable or disable Sticky Menu in website. While scrolling page header will appear at the top.
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.
If you'd like remove home icon from primary menu, It will not hide for loged in user/client and mobile menu.
Enable Primary Menu right side. (Only for default layout)
You can enable or disable shadow effect and make flat bordered menu from here.
Select sub menu style for main menu
You can choose the Maga sub menu style.
You can change default menu to Mega menu layout here. >> Menu Manager >> Primary Menu >> Mega.
Sub menu appears when the user moves the mouse over.
Here you can change side menu for left layout and mobile menu style.
You can choose the Mega Side Menu (left layout)/Mobile Menu (in all layouts) style.
You can enable or disable home icon in side menu for left layout and mobile menu style.
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 Panel >> Setup >> Footer Settings.
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.
You can disable the footer logo/images slider by default its enabled. You can manage the logo images from Croster Panel >> Setup >> Footer Logos.
You can add or remove footer slider logos here.
Included 3 options for footer background color.
2 Options is availbe for footer Single column and Two column.
Some advance configuration for Two colum footer.
By Enable this option to Disable second column in footer area.
By Enable this option to appear contact info in Bordered Box in footer area.
By Enable this option to change "CONTACT US" button text to any text you want to appear in widget area in footer.
<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.
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>
<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.
Enable footer menu items and add your links in copyright section.
Croster Panel >> Setup >> Clientarea Settings.
Display avatar in place of account icon in dashboard sidebar, user management, secondary menu and ticket messages. Avatars are displayed from Gravatar website.
Croster Panel >> Setup >> Clientarea Settings >> Page Templates
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.
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.
You can set custom Login background you want by adding backgroind URL Here. For best look image size should be 1920px*900px.
There are 2 types of support department Open Ticket page layout availabe.
There are 2 types of contact us page layout availabe.
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.
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 media icons which are configured in WHMCS general settings.
Enable phone number which are configured in Croster general settings.
By Enable this option to configure Phone Number In >> Setup >> General Settings >> Phone Number.
Croster Panel >> Setup >> Clientarea Settings >> Sidebars
There aare 3 Styles sidebar availabe.
Default
Boxed
Orignal
Enable/Disable support hours widget in the top of the sidebar on the submit ticket page.
In this box you add custom title text you want to display in instead of Support Hours Panel Title in submit ticket page.
Here you can Set your support department "Start" & "End" time.
Here you can Enable to show 24 hours format in sidebar Support Hours Widget.
Here you can select weekend days for Support Hours Widget.
Enter your custom message for online support department. If you leave empty it wil show default message in english only.
Enter your custom message for offline support department. If you leave empty it wil show default message in english only.
Croster Panel >> Setup >> Clientarea Settings >> Launage Variables
You can set custom dashboard profile page name here.
Croster Panel >> Setup >> Order Form.
Enable single page checkout order form.
Check this option to display product desction in order form page.
Check this option to hide "Header" & "Footer" in order form page.
Check this option to hide only "Footer" in order form page.
Check this option to Hide the Choose a Package and Billing cycles options if those are pre selected from order button OR link.
Show OR Hide payment gateway for specific country, minimum and maximum amount on order form.
Croster Panel >> Setup >> Cookie Consent.
You can enable or disable Cookie Consent banner here.
You can configure Cookie Consent banner setting here.
Here you can change Cookie Consent banner position.
Here you can change Cookie Consent Dismiss button text instead of "Got It" Text in your selected language output.
Here you can change Cookie Consent message "Learn more" text in your selected language output.
Here you can change Cookie Consent message "Learn more" URL here.
Here you can change Cookie Consent Message text in your selected language output.
You can change Cookie Consent banner Color Scheme.
Croster Panel >> Setup >> Favicon.
You can enable or disable favicon here.
To add Favicon icon you need add your icon URL in these URL box.
Croster Panel >> Setup >> Seo Tools.
Here you can setup your website sitemap.
Here you can preview your website SEO sitemap.
Here you can setup other website SEO tools.
Croster Panel >> Page Manager
Here you can create New Page.
Page Builder Widgets >> Slider
You can add slidwr in the page.
Page Builder Widgets >> Domain Seach
To use this widget to add Domain Search Section Under the Website Header.
Page Builder Widgets >> Product Groups
To use this widget to display products plans section.
Page Builder Widgets >> Product Groups >> Section background color
In this style you can Choose any below option.
Page Builder Widgets >> Product Groups >> Group Tables Color
In this style you can Choose any below option for change Group Table Color.
Page Builder Widgets >> Pricing Tables
To use this widget to display Pricing Table Section in the page.
Page Builder Widgets >> Pricing Tables >> Pricing Tables Styles
In this style you can Choose any below option for change Pricing Tables Style.
Page Builder Widgets >> Pricing Tables >> Background Options
In this style you can Choose any below option for change Pricing Tables Section Background Color.
Page Builder Widgets >> Pricing Tables >> Featured Sticker
In this style you can Choose any below Style for change Pricing Tables featured Sticker.
Page Builder Widgets >> Pricing Tables >> Billing Cycle
In this style you can Choose any below option for change Billing Cycle Style.
Page Builder Widgets >> Pricing Tables >> Tables Colors
In this style you can Choose any below option for change Pricing Tables Boxes Color.
Page Builder Widgets >> Pricing Tables >> Features list style
In this style you can Choose any below option for change Pricing Tables Features list style.
Page Builder Widgets >> VPS Hosting Plans
To use this widget to add VPS Hosting Plans Section in the page.
Page Builder Widgets >> VPS Hosting Plans >> Pricing Style
In this style you can Choose any below option for change VPS Hosting Pricing style.
Page Builder Widgets >> VPS Hosting Plans >> Billing Cycle Order
In this option you can change Billing Cycle Order as you need.
Page Builder Widgets >> VPS Hosting Plans >> Billing Cycle Section background
In this option you can change Billing Cycle Section background color.
Page Builder Widgets >> VPS Hosting Plans >> Table Labels
You can change VPS Hosting Plan Table Label Text.
Page Builder Widgets >> Dedicated Server Plans
Using this widget to display Dedicated Servers Plans section in page
Page Builder Widgets >> Dedicated Server Plans >> Pricing Style
In this style you can Choose any below option for change Dedicated Server Plans section style.
Page Builder Widgets >> Dedicated Server Plans >> Billing Cycle Order
In this option you can change Dedicated Server Pricing Order as you need.
Page Builder Widgets >> Dedicated Server Plans >> Dedicated Server Plans Section background
In this option you can change Dedicated Server Plans Section background color.
Page Builder Widgets >> Dedicated Server Plans >> Table Labels
You can change Dedicated Server Plans Table Label Text.
Page Builder Widgets >> Features Section
Using this widget to display website "Service" or "Features" section in page
Page Builder Widgets >> Features Section >> Section background color
In this option you can change Features Section Background Color.
Page Builder Widgets >> Features Section >> List Style
In this option you can change List Styles.
Page Builder Widgets >> Features Section >> Section background Image
In this Field you can put your custom Background URL.
fas fa-rocket
.text-primary, text-danger, text-warning, text-info
), i.e. fas fa-rocket text-primary
.Page Builder Widgets >> Features List Section
Using this widget to display website "Service List" or "Features List" section in page
Page Builder Widgets >> Features Section >> Section background color
In this option you can change Features Section Background Color.
Page Builder Widgets >> FAQs Section
Using this widget to display FAQs Section in page.
Page Builder Widgets >> FAQs Section >> FAQs Section Styles
In this option you can change FAQs Section Styles.
Page Builder Widgets >> FAQs Section >> Section background color
In this option you can change FAQs Section background color.
Page Builder Widgets >> Simple Header
Using this widget to display Simple Header in page.
Page Builder Widgets >> Simple Header >> Section background color
In this option you can change Simple Header background color.
Page Builder Widgets >> Simple Header >> Section background image URL
In this option you can change Simple Header background image.
Page Builder Widgets >> Call to Action Section
Using this widget to display Call to Action Section in page.
Page Builder Widgets >> Call to Action Section >> Section background color
In this option you can change Call to Action Section background color.
Page Builder Widgets >> Call to Action Section >> Section background image URL
In this option you can change Call to Action Section background image.
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.
Page Builder Widgets >> Call to Action Section >> Image Section Position
In this options you can change image section position to "Left" & "Right" side.
Page Builder Widgets >> Image Gallery
Using this widget to display Image Gallery Section in page.
Page Builder Widgets >> Image Gallery >> Styles
In this option you can change Image Gallery Style to "Slider" or "Grid" Layout.
Page Builder Widgets >> Image Gallery >> Image Gallery Section background color
In this option you can change Image Gallery Section background color.
Page Builder Widgets >> Image Gallery >> Image Gallery Custom Backgound By URL
In this option you can change Image Gallery Section background image by URL.
Page Builder Widgets >> Team Listing
Using this widget to display Team Listing Section in page.
Page Builder Widgets >> Team Listing >> Styles
In this option you can change Team Listing Style to "Slider" or "Grid" Layout.
Page Builder Widgets >> Team Listing >> Team Listing Section background color
In this option you can change Team Listing Section background color.
Page Builder Widgets >> Testimonials
Using this widget to display Testimonials Section in page.
Page Builder Widgets >> Testimonials >> Testimonials Section background color
In this option you can change Testimonials Section background color.
Page Builder Widgets >> Text/HTML Editor
Using this widget to display Description or Custom HTML Content Section in page.
Page Builder Widgets >> Text/HTML Editor >> Text/HTML Editor Section
By using this widget to display content in text or "HTML" written content.
Page Builder Widgets >> Text/HTML Editor >> Text/HTML Editor Layout
By using this option to display content in "Container" or "Full Width" Layout.
Page Builder Widgets >> Text/HTML Editor >> Text/HTML Editor Section background color
In this option you can change Text/HTML Editor Section background color.
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.
Page Builder Widgets >> Latest Announcements
Using this widget to display Latest Announcements Section in page.
Page Builder Widgets >> Latest Announcements >> Latest Announcements Section background color
In this option you can change Latest Announcements Section background color.
Page Builder Widgets >> Latest Announcements >> Latest Announcements Custom Backgound By URL
In this option you can change Latest Announcements Section background image by URL.
Here you can take actions on your existing pages.
Croster Panel >> Menu Manager
Croster Panel >> Menu Manager >> Primary Menu
Croster Panel >> Menu Manager >> Default Menu
Here you can create New Menu.
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.
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.
By Enable to Show & Disable to hide this menu item in the website.
By Enable to Open Menu Link In New Tab of the browser & Disable to Open Menu Link in same window of the browser.
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.
Here you edit existing menu.
Croster Panel >> Menu Manager >> Mega Menu
By Enable thi option to activate Mega Menu for website.
Here you can create New Mega Menu.
Here you can add Mega Menu Link. While Creating Main Mega Menu Item Link should be # for better user expiriance
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.
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 will display under Sub Menu Title.
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.
By Enable to Show & Disable to hide this menu item in the website.
By Enable to Open Menu Link In New Tab of the browser & Disable to Open Menu Link in same window of the browser.
After add Class Name Here You will add CSS Custom Codes Here.
Here you edit existing Mega menu.
Croster Panel >> Menu Manager >> Footer Menu
Here you can create New Footer Menu.
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.
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.
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.
By Enable to Show & Disable to hide this menu item in the website.
By Enable to Open Menu Link In New Tab of the browser & Disable to Open Menu Link in same window of the browser.
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.
Here you edit existing Footer menu.
Croster Panel >> Color Scheme
Croster Panel >> Custom CSS
Here you can add custom css code which apply entire website.