BillingFox client area styles

 
Copy to clipboard

$this->setBootstrap(true)

 
Copy to clipboard

$this->loadResourcesMap(".resource");

 
Copy to clipboard

$this->BF_print($obj = array("test" => true));

 
Copy to clipboard

$this->loadResources($location = "header", $docBase = "/");

 
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
));

 
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.

 
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.

 
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());

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