We have implemented a highly customizable banner/slideshow to all of our WHMCS Themes. You can customize every aspect of the banner using the language files. The banner is used for the homepage slideshow and also for all of the 10 Wizard Panel service pages (Web Hosting, Reseller Hosting etc).
Each banner is customized within the language files:
Let's take a look at the banner used by the Reseller Hosting page as an example. The markup for this banner in english.php is:
// Banner $_LANG['stellar_custom2_banner_display'] = true; $_LANG['stellar_custom2_banner_heading'] = $_LANG['stellar_custom2_name']; $_LANG['stellar_custom2_banner_text'] = "Provide web hosting as a business!"; $_LANG['stellar_custom2_banner_feat1'] = "Provide your clients with cPanel hosting"; $_LANG['stellar_custom2_banner_feat2'] = "Manage your reseller business with WHM"; $_LANG['stellar_custom2_banner_feat3'] = "Create unlimited cPanel accounts"; $_LANG['stellar_custom2_banner_feat4'] = "WHMCS license provided at a discount"; $_LANG['stellar_custom2_banner_feat5'] = "Unlimited access to our knowledgeable support"; $_LANG['stellar_custom2_banner_feat6'] = "We only use the highest quality LiteSpeed servers"; $_LANG['stellar_custom2_banner_feat_icon'] = "fas fa-check-square"; $_LANG['stellar_custom2_banner_background'] = "background.jpg"; $_LANG['stellar_custom2_banner_background_opacity'] = 0.6; $_LANG['stellar_custom2_banner_price_before'] = "Starting From"; $_LANG['stellar_custom2_banner_price'] = "19.99"; $_LANG['stellar_custom2_banner_price_term'] = "/month"; $_LANG['stellar_custom2_banner_image'] = "whm.png"; $_LANG['stellar_custom2_banner_image_small'] = "whm-small.png"; $_LANG['stellar_custom2_banner_image_alt'] = $_LANG['stellar_custom2_name']; $_LANG['stellar_custom2_banner_image_url'] = "https://www.youtube.com/watch?v=NAlCCCLg0rM"; $_LANG['stellar_custom2_banner_image_url_newwindow'] = false; $_LANG['stellar_custom2_banner_image_screenshot'] = true; $_LANG['stellar_custom2_banner_image_video'] = true; $_LANG['stellar_custom2_banner_image_video_badge'] = "Watch Video"; $_LANG['stellar_custom2_banner_image_video_badge_icon'] = "fab fa-youtube"; $_LANG['stellar_custom2_banner_button1_text'] = "Features"; $_LANG['stellar_custom2_banner_button1_icon'] = "fas fa-info-circle"; $_LANG['stellar_custom2_banner_button1_url'] = "#features"; $_LANG['stellar_custom2_banner_button1_url_newwindow'] = false; $_LANG['stellar_custom2_banner_button2_text'] = "View Plans"; $_LANG['stellar_custom2_banner_button2_icon'] = "fas fa-angle-double-right"; $_LANG['stellar_custom2_banner_button2_url'] = "#plans"; $_LANG['stellar_custom2_banner_button2_url_newwindow'] = false;
Let's take a look at the options and what they do:
_display - Set to true to display the banner, false to remove it.
_heading - Set the heading of the banner. By default the Wizard Panel page banners will load and display the page name.
_text - The text option is a description block of text shown under the heading. Leave this blank to remove the description section.
_feat1 - _feat6 - Set 1 to 6 features, these features will be displayed in a list format. You can leave features blank to remove them (e.g only display 4) or leave all blank to completely remove the feature list.
_feat_icon - The icon set is displayed to the left of each feature. You can change this icon to any from Font Awesome's directory or leave it blank to remove it ("";).
_background - This is the main background of the banner. If you replace this banner you need to add the exact name of your banner here and then upload the image file to: /whmcs_path/templates/your_template/images/
_background_opacity - A transparent black background is added directly over the background image. The transparency can be edited using this setting and it allows you to control the contrast of the background image vs the text on top. The default value is 0.6 which represents 60%. The higher the value the darker the transparent overlay.
_price_before - Set the prefix to the price box. You can also leave this setting blank to remove it.
_price - Set the price displayed on the banner. If you set the price to "free" it will replace the currency/price with Free text. You can also leave it blank to completely remove the price box.
_price_term - Set the term of the price.
_image - Set an image to be displayed on the right side of the banner. This image is displayed on the banner when on desktop. You can also leave this setting blank to remove the image from the banner.
_image_small - This image replaces the desktop image above and displays on mobile. This allows you to have a image specifically designed for mobile devices.
_image_alt - Set the alt text used by the image.
_image_url - Set a URL for the image, you can also leave this blank to remove the anchor link.
_image_url_newwindow - Set to true to open the image URL in a new tab, false to open in the same tab.
_image_screenshot - When set to true the image will be wrapped in a browser header. This feature is designed to be enabled when your image in a screenshot.
_image_video - Set a video URL, the video set will be displayed in a popup when the image is set. This setting supports both YouTube and Vimeo URLs.
_image_video_badge - Display a optional badge on the image when a video is enabled.
_image_video_badge_icon - Set the icon of the video badge. You can change this icon to any from Font Awesome's directory.
_button_text - Set the text of the button.
_button_icon - Set the icon of the button. You can change this icon to any from Font Awesome's directory or leave it blank to remove the icon.
_button_url - Set the URL of the button.
_button_url_newwindow - When set to true the URL will open in a new browser tab. This is especially useful if you want to link the button to a external website (e.g cPanel demo).
Each banner has the same customization options and functions in the same way. But this guide will show you how much control you have over the design/layout, you can create a completely unique banner for each page using the same options. You can also leave options blank to remove elements from each banner.
Background & opacity change
The background and opacity are easily changed to create a whole new look. In the above example we have set a new banner and adjusted the opacity to match. The changes made to the original markup is:
$_LANG['stellar_custom2_banner_background'] = "background5.jpg"; $_LANG['stellar_custom2_banner_background_opacity'] = 0.4;
One Column (no image)
If we leave the image blank it will be removed from the banner and the banner will be converted to a one column design as seen above. The only edit to make was leaving the image option as blank:
$_LANG['stellar_custom2_banner_image'] = "";
Every option of the banner can be removed by leaving a setting blank. In the above example we have removed the last 3 features, the price and first button. The changes made to the markup to achieve this where:
$_LANG['stellar_custom2_banner_feat4'] = ""; $_LANG['stellar_custom2_banner_feat5'] = ""; $_LANG['stellar_custom2_banner_feat6'] = ""; $_LANG['stellar_custom2_banner_price'] = ""; $_LANG['stellar_custom2_banner_button1_url'] = "";