Hoja de trucos (cheatsheet) para personalizar de forma básica WHMCS

CSS (Cascading Style Sheets) es un lenguaje de programación que se utiliza para personalizar la apariencia de una página web. En el contexto de personalizar WHMCS, CSS te permite modificar colores, fuentes, tamaños y otros aspectos visuales de la interfaz de usuario.

Guia rápida de CSS

A continuación una tabla con las reglas más comunes para personalizar tu WHMCS. Esta guía no supone ser una guía completa para aprender CSS. Si no tienes experiencia previa con CSS o deseas realizar ajustes más avanzados en tu WHMCS solicita el apoyo de un desarrollador web.

Selectores

Propiedades y valores comunes

Guia rapida de Hooks en WHMCS

La siguiente guía está diseñada para proporcionarte algunos ejemplos de código listos para copiar y pegar para personalizaciones comunes realizadas en los menús de navegación del área de cliente de WHMCS. Para obtener documentación más detallada, consulta la documentación oficial de WHMCS

Búsqueda de un nombre de elemento de menú

Cada elemento del menú en WHMCS tiene un nombre único que se utiliza para hacer referencia a él. Necesitarás este nombre para manipularlo. El nombre de cada elemento del menú esté disponible en la fuente HTML de la página, lo que significa que se puede recuperar usando la opción Inspeccionar elemento disponible en la mayoría de los navegadores modernos. Un ejemplo de esto se muestra a continuación.

Una vez que tengas el nombre del elemento de menú que deseas manipular, puedes manipularlo de las siguientes formas.

Cambiar a dónde apunta un elemento de menú

En el siguiente ejemplo, el submenú Anuncios apuntara hacia https://aprende.nodored.com/blog

<?php
use WHMCS\View\Menu\Item as MenuItem;
add_hook('ClientAreaPrimaryNavbar', 1, function (MenuItem $primaryNavbar)
{
    $navItem = $primaryNavbar->getChild('Support');
    if (is_null($navItem)) {
        return;
    }
    $navItem = $navItem->getChild('Announcements');
    if (is_null($navItem)) {
        return;
    }
    $navItem->setUri('https://aprende.nodored.com/blog');
});

Agregar un ítem de menú

En el siguiente ejemplo, crearas un nuevo item de menú principal con el nombre Ir a nuestra tienda que apuntara hacia https://nodored.com

<?php
#agregando elemento de menú a la barra de navegación principal
use WHMCS\View\Menu\Item as MenuItem;
add_hook('ClientAreaPrimaryNavbar', 1, function (MenuItem $primaryNavbar)
{
    $primaryNavbar->addChild('Ir a nuestra tienda')
        ->setUri('https://nodored.com')
        ->setOrder(70);
});

Agregar un ítem de menú secundario (submenú)

En el siguiente ejemplo, crearás un nuevo submenú dentro del ítem de menú Soporte cuyo nombre será Soporte por WhatsApp y apuntara hacia https://api.whatsapp.com/

<?php
use WHMCS\View\Menu\Item as MenuItem;
add_hook('ClientAreaPrimaryNavbar', 1, function (MenuItem $primaryNavbar)
{
    if (!is_null($primaryNavbar->getChild('Support'))) {
        $primaryNavbar->getChild('Support')
            ->addChild('Soporte por WhatsApp', array(
                'label' => 'Soporte por WhatsApp',
                'uri' => 'https://api.whatsapp.com/',
                'order' => '100',
            ));
    }
});

Esconder un item de menu

En el siguiente ejemplo, esconderas el item de menú Estado de Red

<?php
use WHMCS\View\Menu\Item as MenuItem;
add_hook('ClientAreaPrimaryNavbar', 1, function (MenuItem $primaryNavbar)
{
    if (!is_null($primaryNavbar->getChild('Network Status'))) {
        $primaryNavbar->removeChild('Network Status');
    }
});

Puedes usar el siguiente código para esconder un submenú, en este caso esconderemos el submenú Anuncios

<?php
use WHMCS\View\Menu\Item as MenuItem;
add_hook('ClientAreaPrimaryNavbar', 1, function (MenuItem $primaryNavbar)
{
    if (!is_null($primaryNavbar->getChild('Support'))) {
        $primaryNavbar->getChild('Support')->removeChild('Announcements');
    }
});

Abrir enlaces en una pestaña nueva

En el siguiente ejemplo, el submenu Preguntas Frecuentes se abrirá en una pestaña nueva al momento de dirigirse a https://aprende.nodored.com/docs

<?php
use WHMCS\View\Menu\Item as MenuItem;
add_hook('ClientAreaPrimaryNavbar', 1, function (MenuItem $primaryNavbar)
{
$navItem = $primaryNavbar->getChild('Knowledgebase');
if (is_null($navItem)) {
	return;
}
$navItem->setUri('https://aprende.nodored.com/docs');
$navItem->setAttribute("target", '_blank');
});