Whmcs Tutorial

How to Customising WHMCS Themes CSS

CSS STYLING

If you want to make changes to any of the CSS that is

applied by default, we recommend making those

customisations inside of the /css/custom.css file.

This file is included after styles.css allowing you to

override any of the CSS defined within it and will not be

affected by future updates to the WHMCS software.

We strongly recommend adding your custom CSS rules

to the custom.css file and not editing /css/styles.css

directly as it will make updating easier.

NAVIGATION

There are two navigation bars in WHMCS’ client area.

The primary navigation bar contains the bulk of the

menu and floats to the left of the secondary navigation

bar. The secondary navigation bar contains user-specific

items and changes if a client is logged in to WHMCS.

When a client is not logged in then the secondary

navigation contains a login link, and when a client is

logged in then the secondary menu contains links to the

client’s account.

Responsive mode is activated when WHMCS’ client area

is viewed on a smaller screen device such as a phone

or tablet. At that point, WHMCS will collapse the navbar

into a fold out menu.

The navigation bar elements are controlled in a

programmatic way allowing modules and hooks to

dynamically interact with the navigation menu elements.

The look and feel of the navigation bar can be

customised via the header.tpl and navbar.tpl (located

in /includes/) template files.

This guide assumes you are already familiar with

creating and using Hook files in WHMCS .

FINDING A MENU NAME

Every menu item has a unique name that is used to

reference it. You will need this name in order to

manipulate it. To make it easier, we have made the

name of each sidebar menu item available in the HTML

source of the page, which means it can be retrieved

using the Inspect Element option available in most

modern browsers. An example of this is shown below.

Once you have the menu item name that you wish to

manipulate, which in the example above is “Billing

Information” you can manipulate it in the following

ways.

The client area’s menu system is defined in a tree

structure. Each menu item has one parent item and can

have many child items. To manipulate a menu item

within a sidebar panel, you first need to retrieve the

parent menu item, which in the case above is “My

Account”, followed by the “Billing Information” menu

item which is a child within that.

CHANGING THE TEXT LABEL OF A MENU

ITEM

All sidebar menu items that are supplied by default use

display names controlled by language file. Simply

search in your active language file for the text you see

in the menu item label, and you can adjust/change it

there as required.

Alternatively, you can manipulate the display text via a

hook as follows:

<?php

use WHMCSViewMenuItem as MenuItem;

add_hook(‘ClientAreaPrimarySidebar’, 1, functi

{

$primarySidebar->getChild(“My Account”)

->getChild(“Billing Information”)

->setLabel(“Custom Text Here”);

});

Notice how in the above we first retrieve the Support

menu item, followed by the Announcements menu item

which is a child within that. The same logic should be

applied to all dropdown menu items.

CHANGING WHERE A MENU ITEM LINKS

TO

You can change where a menu item points to using the

setUri method. For example if we are using an external

system to control our announcements, we could do

something like the following:

<?php

use WHMCSViewMenuItem as MenuItem;

add_hook(‘ClientAreaPrimaryNavbar’, 1, functio

{

$navItem = $primaryNavbar->getChild(‘Suppo

if (is_null($navItem)) {

return;

}

$navItem = $navItem->getChild(‘Announcemen

if (is_null($navItem)) {

return;

}

$navItem->setUri(‘https://www.example.com/

});

RE-ARRANGING MENU ITEMS

You can change the display order of menu items as

follows:

<?php

use WHMCSViewMenuItem as MenuItem;

add_hook(‘ClientAreaPrimaryNavbar’, 1, functio

{

$navItem = $primaryNavbar->getChild(‘Suppo

if (is_null($navItem)) {

return;

}

$navItem = $navItem->getChild(‘Announcemen

if (is_null($navItem)) {

return;

}

$navItem->setOrder(1);

});

The following helpers are also available:

// Moves a menu item up one position

$primaryNavbar->getChild(‘Support’)->getChild(

// Moves a menu item down one position

$primaryNavbar->getChild(‘Support’)->getChild(

// Moves a menu item to the first position

$primaryNavbar->getChild(‘Support’)->getChild(

// Moves a menu item to the last position

$primaryNavbar->getChild(‘Support’)->getChild(

ADDING A MENU ITEM

You can add a new link to the primary navigation as

follows:

<?php

use WHMCSViewMenuItem as MenuItem;

add_hook(‘ClientAreaPrimaryNavbar’, 1, functio

{

$primaryNavbar->addChild(‘Menu Name’)

->setUri(‘https://www.example.com/’)

->setOrder(70);

});

ADDING AN ADDITIONAL CHILD MENU

ITEM

You can add additional menu items as follows:

<?php

use WHMCSViewMenuItem as MenuItem;

add_hook(‘ClientAreaPrimaryNavbar’, 1, functio

{

if (!is_null($primaryNavbar->getChild(‘Sup

$primaryNavbar->getChild(‘Support’)

->addChild(‘Emergency Contacts’, a

‘label’ => Lang::trans(’emerge

‘uri’ => ’emergency.php’,

‘order’ => ‘100’,

));

}

});

To add a menu item conditionally based on client login

status, you can do that using menu context as follows:

<?php

use WHMCSViewMenuItem as MenuItem;

add_hook(‘ClientAreaPrimaryNavbar’, 1, functio

{

$client = Menu::context(‘client’);

// only add menu item when no client logge

if (is_null($client)) {

$primaryNavbar->addChild(‘Example’)

->setUri(‘https://www.example.com/

->setOrder(100);

}

});

HIDING/REMOVING A MENU ITEM

You can remove a menu item as follows:

<?php

use WHMCSViewMenuItem as MenuItem;

add_hook(‘ClientAreaPrimaryNavbar’, 1, functio

{

if (!is_null($primaryNavbar->getChild(‘Sup

$primaryNavbar->getChild(‘Support’)->r

}

});

1 thought on “How to Customising WHMCS Themes CSS

  1. It is cheery news that three more marginal fields will hit first oil soon. Century Energy Exploration and Production (E&P) is on course to bring the Atala Marginal Field on stream,
    while Excel E&P has formally started to inject about 800 barrels of
    crude oil per day from Eremor field into the Trans
    Forcados pipeline and sources at Millenium Oil and Gas said it has less than two months to complete all
    the remaining hook up and commissioning facilities
    for the startup of the Oza field.

    According to Africa oil+gas Report, the licences for these fields were
    part of those awarded by the Federal Government in 2003.
    It said the Atala field is actually held by the Bayelsa Oil and Gas Company, one of the three state companies that won an asset in the 2003
    marginal field bid round. Century is only a technical and financing partner,
    but its economic interest is higher than 50 per cent, it added.

    The field development project is funded by Eunisell Solutions, a service company which
    will realise its investment from proceeds of the crude output.

    “What remains are minor permitting issues and installation of sales line metres for evacuation purposes,” said
    sources close to the Atala field production procedures.
    Africa oil+gas Report also stated that 2,000 barrels
    of oil per day (bopd) from two reservoirs will be delivered into barges and ferried into
    a floating storage and offloading vessel (FSO) for export.
    The offftaker is Monaco, it said, adding that part of the cash flow
    from Atala-1 production is expected to fund the drilling of Atala-2.

    “Millenium’s partners on Oza field are Hardy Oil and Emerald Resources. The field’s Early Production Facility (EPF) and tie-in at Shell Petroleum Development Company (SPDC’s) Isimiri flowstation, pipe laying of 27.5km of 3inches inter well flowlines and 3inches and 6inches test and crude delivery pipelines from the Oza manifold to Isimiri flow station are all done. Well test on Oza-2 short and long strings gave results suggesting productions of as high as 1,500bopd to 10,000 bopd. Oza field’s production is the least certain of the three, it added.

Leave a Reply

Your email address will not be published. Required fields are marked *