BillingFox client area styles

Client areas are used in BillingFox to prepare a website view on the client area pages.

Choose a documentation section.

In order to create a BillingFox client area you have to use getElement('top_client_area') in the top of your pages, getElement('header_client_area') before <head> of your pages and getElement('footer_client_area') before <body> of your pages.

After that you will have to edit all file paths to use your cloet area files, example: set <link rel="stylesheet" href="/css/style.css"> to <link rel="stylesheet" href="/content/client_areas/YOUR_CLIENT_AREA_DIRECTORY/css/style.css">

Now you have to set logo image link to images/brand/logo.webp and the redirects to files without file extension (BillingFox validate URLs without file extensions for aesthetic purposes)

Replace all strings with language variable from content/LANG/english.php with their translation, for example, we will take this line from translations: $_LANG['client_area']['admin_panel'] = 'Admin panel'; and we will go to on client area files and replace 'Admin panel' or 'Admin dashboard' or something like that to Admin panel , use this for all texts.

Now you must load custom menu item list from addons by using (Check right side of the documentation under "Get custom menu addon list" section) Replace classes and div elements with your integrated client area classes and elements. You can use BillingFox functions to customize your client area [check Functions & Definitions section] and you can take as referrence other client areas.

After you finished client area files you can add them into a new client area directory in content/client-areas/, after you activate the client area, it should display properly.

Set the "Bootstrap" CSS library usage:
Copy to clipboard
$this->setBootstrap(true)
Load the resources mapping:
Copy to clipboard
$this->loadResourcesMap(".resource");
Print an associative array or object:
Copy to clipboard
$this->BF_print($obj = array("test" => true));
Load template resources:
Copy to clipboard
$this->loadResources($location = "header", $docBase = "/");
Create more complex buttons: Usage
Copy to clipboard
// Create a simple button: // $this->createButton(string $content, array $options); $this->createButton("Click me", array( 'tag' => 'a', // can be also button or input 'class' => 'btn btn-primary', 'href' => '#', // 'type' => '', // can be "submit" 'disabled' => false, // 'value' => '', // This will set the button value attribute // 'return' => 'resource' // This will return the resource object instead of the HTML element // 'target' => '_blank' // This will define the "target" attribute of the button ));
Override the default BillingFox client area template file:
Copy to clipboard
// Copy the files from \install\internal\client_areas\bootstrap into your client area folder, now you can change them as you like.
Foreach trough addon menu items:
Copy to clipboard
<!-- Get custom menu addon list --> <?php $menu = getMenuItems(); if(is_array($menu)) { foreach($menu as $item) { ?> <a href="<?php echo $item['href']; ?>"> <div class="icon menu-item"><?php echo $item['icon']; ?></div> <div class="text menu-item"><?php echo $item['item_display'];?></div> </a> <?php } } ?>

Your BillingFox client area can contain a "functions.php" file so you can use the templating system properly, there you can declare the custom configuration and pre-built options.

Copy to clipboard
// Client area style configuration file example: <?php /** * @since BillingFox 11.0 * @package FoxBird */ /* * Default configuration for this theme */ $uservar = (isset($_SESSION['user_id'])) ? getUserVar($_SESSION['user_id']) : -1; $this->config = array( 'useBootstrap' => true, /* Let the BillingFox Render know if it should use Bootstrap or not */ 'adminBootstrapButtons' => true, /* Let BillingFox Render know if it should display admin area buttons as bootstrap or default cards */ 'customElementsPath' => 'elements', 'pagesNoHeaderOrFooter' => array( 'login', 'register' ), /* Pages that will be rendered without using the header and footer of the client area style, perfectly in combination with custom client area page styles */ 'stat' => array( 'holder' => array( 'tag' => 'div', 'class' => 'cards-inline', ), // The element that is holding all sub-elements 'self' => array( 'tag' => 'a', // the element tag 'class' => 'card-style', ), // The element itself 'heading' => array( 'tag' => 'div', // the heading tag 'class' => 'card-title', ), // The heading element in the stat card 'content' => array( 'tag' => 'div', // the content tag 'class' => 'card-info', ), ), 'stat-order' => array( 'holder' => array( 'tag' => 'div', 'class' => 'order-cards', ), // The element that is holding all sub-elements 'self' => array( 'tag' => 'div', // the element tag 'class' => 'cat', ), // The element itself 'heading' => array( 'tag' => 'strong', // the heading tag 'class' => 'cat-title', ), // The heading element in the stat card 'content' => array( 'tag' => 'div', // the content tag 'class' => 'cat-content', ), ), 'product-specifications' => array( 'holder' => array( 'tag' => 'ul', 'class' => 'product-specifications', ), 'product-thumbnail' => array( 'holder' => array( 'class' => 'product-thumb-container', 'tag' => 'div', ), 'self' => array( 'class' => 'product-thumb-img', ), ), 'style' => 'list' // "plain" to avoid printing product specifications as a list ), 'announcement' => array( 'holder' => array( 'tag' => 'div', 'class' => 'announcements', ), // The element that is holding all sub-elements 'self' => array( 'tag' => 'div', // the element tag 'class' => 'announcement', 'class_important' => 'announcement announcement--important', ), // The element itself 'heading' => array( 'tag' => 'h3', // the heading tag 'class' => 'announcement-title', ), // The heading element in the announcement 'content' => array( 'tag' => 'p', // the content tag 'class' => 'announcement-details', ), ), /* Change the default configuration of the stat card element, on default theme you can find it as the "Services" or "Domains" rectangle on the main page of the client area */ 'resources' => array( 'notFound' => array( 'tag' => 'p', 'class' => 'no-resources-found', ), // The element displayed in case that there are no resources found. 'holder' => array( 'tag' => 'div', 'class' => 'resources', ), // The element that is holding all sub-elements 'self' => array( 'tag' => 'div', // the element tag 'class' => 'resource', 'resourceNameClass' => 'resource-name', 'resourceDescriptionClass' => 'resource-description', 'resourcePreviewClass' => 'resource-preview', ), // The element itself 'installButton' => array( 'class' => 'installBtn', 'successClass' => 'success-install', 'failedClass' => 'failed-install', 'holder' => array( 'tag' => 'div', 'class' => 'resource-control', ), ), // The resource installation button ), 'table' => array( 'holder' => array( 'tag' => 'div', 'class' => 'table-responsive', ), // The element that is holding all sub-elements 'self' => array( 'tag' => 'table', // the element tag 'class' => 'table table-bordered', 'generateID' => true, // generate a random ID attribute for the table 'width' => '100%', // set element width attribute 'cellspacing' => '0', // set the cellspacing attribute for the table ), // The element itself 'tableHead' => array( 'tag' => 'thead', 'class' => '', ), // The element itself 'tableFoot' => array( 'tag' => 'tfoot', 'class' => '', ), // The element itself ), /* Change the default configuration of the table element */ 'card' => array( 'holder' => array( 'tag' => 'div', 'class' => 'card-container', ), 'self' => array( 'tag' => 'div', 'class' => 'card', ), 'headline' => array( 'tag' => 'h4', 'class' => 'card-title', ), 'headline_descriptor' => array( 'tag' => 'i', 'class' => 'card-desc', ), 'content' => array( 'tag' => 'p', 'class' => 'card-content', ), ), /* Change the default configuration of the card element. */ 'button' => array( 'class' => 'btn btn-success mt-2', ), /* Change the default configuration of the button element. */ 'addonsList' => array( 'listContainer' => array( 'tag' => 'div', 'class' => 'addons_list', ), 'itemContainer' => array( 'tag' => 'div', 'class' => 'addon_item' ), 'itemIcon' => array( 'class' => 'addon_icon', 'show' => true, ), 'itemCategory' => array( 'tag' => 'p', 'class' => 'addon_category', 'show' => true, ), 'itemAuthor' => array( 'tag' => 'p', 'class' => 'addon_author', 'show' => true, ), 'itemIconContainer' => array( 'tag' => 'div', 'class' => 'addon_icon_container', ), 'itemVersion' => array( 'tag' => 'div', 'class' => 'addon_version', 'show' => true, ), 'itemName' => array( 'tag' => 'strong', 'class' => 'addon_name', ), 'itemDescription' => array( 'tag' => 'p', 'class' => 'addon_description', ), 'itemButtonsContainer' => array( 'tag' => 'div', 'class' => 'addon_actions', ), ), /* Change the default configuration of the addons list element */ ); ?>

Since BillingFox 11.0 you can use prebuilt elements and create your own.

Usage:
Copy to clipboard
// Create a card section with your website admin buttons: // $this->addElement(string $elementName, array $options); $this->addElement('open-card-container', array()); $this->addElement('open-card', array()); $this->addElement('card-head', array('headline' => $_LANG['index']['menu'])); $this->addElement('open-content-open', array()); $this->addElement('hr', array()); $this->addElement('admin-buttons', array()); $this->addElement('hr', array()); $this->addElement('addon-buttons', array()); $this->addElement('open-content-close', array()); $this->addElement('close-card', array()); $this->addElement('close-card-container', array());
Elements available
  • stat
    Small information card.
    Options
    forceElementTag
    Force a specific HTML tag to your element.
    href
    Force an anchor to your element. ("a" tag required)
    addClass
    Append a class or class list to your element "class" tag.
    forceElementClass
    Force an element class.
  • billingfox-announcements
    Display the BillingFox announcements section.
  • button
    Generate a button.
    Options
    href
    Force an anchor to your element. (if left unset, the button will be used as a "submit")
    content
    Set the text content of the button.
    class
    Force an element class.
  • stat-order-product
    Generate a product order card.
    Options
    confCard
    Parent configuration for the card configuration array.
    Sub-options
    tag
    Force an element tag.
    class
    Force an element class.
    headline
    Set the card element title.
    append
    Append a text after the heading
    bottomHeadline
    Parent configuration for the content after heading.
    Sub-options
    tag
    Force an element tag.
    class
    Force an element class.
    content
    Force an element content.
    productImage
    Parent configuration for the product image.
    Sub-options
    content
    Set the source of the image.
    content
    Parent configuration for the content after heading.
    Sub-options
    tag
    Force an element tag.
    class
    Force an element class.
    specifications
    Set the element list content.
    button
    Parent configuration for the card button element.
    Sub-options
    href
    Force the href anchor tag on your button.
    class
    Force a button class.
    content
    Set the button text content.
  • stat-order
    Generate a category order card.
    Options
    confCard
    Parent configuration for the card configuration array.
    Sub-options
    tag
    Force an element tag.
    class
    Force an element class.
    headline
    Set the card element title.
  • announcement
    Generate an announcement card.
    Options
    heading
    Set the annoncement title.
    content
    Set the announcement content.
  • open-card-container
    Opens a normal card container element.
  • open-card
    Opens a normal card element.
  • card-head
    Generates the card head element.
    Options
    headline
    Set the card head title.
    headline_descriptor
    Set the card head description.
    append
    Append content to the card head.
  • card-content-open
    Opens a normal card content element.
  • card-content-close
    Closes a normal card content element.
  • close-card
    Closes a normal card element.
  • close-card-container
    Closes a normal card container element.
  • hr
    Appends a line separator to the page.
  • admin-buttons
    Generates the administration buttons.
  • table
    Generates the table element.
    Options
    tableHead
    Parent for the table head columns configuration array.
    Sub-options
    headline
    Set a content for the table head column.
    class
    Set a class for the table head column.
    tableFoot
    Parent for the table footer columns configuration array.
    Sub-options
    headline
    Set a content for the table footer column.
    class
    Set a class for the table footer column.
    tableRows
    Parent for the table rows configuration array.
    Sub-options
    (non-associative array)
    Parent for a specific table row configuration array.
    Sub-options
    (non-associative array)
    Parent for a specific table row column configuration array.
    Sub-options
    domain
    Set a "domain" attribute for the current table element, this is usually used in "my domains" page from the client area for the SSL checker.
    class
    Set a class for the row.
    content
    Set a class for the row.
  • products-menu
    Generates admin products management page menu.
  • (custom element name)
    Generates a custom template element.
    Options
    array("customElement")
    Declare this element as a custom one, this option is required and cannot be changed.
  • (others)
    Generates a basic element.
    Options
    class
    Set a custom class for the element.
    content
    Set a custom content for the element.
Copy to clipboard
<!-- Get custom menu addon list --> <?php $menu = getMenuItems(); if(is_array($menu)) { foreach($menu as $item) { ?> <a href="<?php echo $item['href']; ?>"> <div class="icon menu-item"><?php echo $item['icon']; ?></div> <div class="text menu-item"><?php echo $item['item_display'];?></div> </a> <?php } } ?>