Helix 3 e Fabrik - corrigindo o layout

Utilizo como template em meus sites o Helix 3 da JoomShaper (https://www.joomshaper.com/joomla-templates/helix3) e percebi uma pequena incompatibilidade visual em alguns detalhes do Fabrik no que se refere às listas, mais precisamente nos links paginação. Veja a imagem:
helix fabrik 01
Podemos perceber duas irregularidades aí. A primeira se refere às alturas das caixas de informação em relação ao select para escolhermos a quantidade de registros exibidos por página e a segunda nos links de paginação mais abaixo.

A primeira resolvemos aplicando um override no css do template. O Helix 3, assim como outros templates do mercado, já prevendo alguma incompatibilidade ou mesmo desacordo com alguma extensão instalado, previram a utilização de overridas de CSS, que nada mais é do que carregarmos por último um arquivo css que sobrescreverá classes escritas em outros arquivos previamente carregados. Com isso, mesmo que se faça uma atualização no template ou em qualquer extensão, nosso override será preservado, haja vista que ele se encontra em um arquivo separado, que não será substituído ou apagado durante qualquer atualização.

No Helix 3, esse arquivo deve chamar-se “custom.css” e deve ser armazenado em: “templates/shaper_helix3/css”. Se meu site está em www.meusite.com.br, o endereço para o arquivo custom.css será:

www.meusite.com.br/templates/shaper_helix3/css/custom.css

helix fabrik 02

Ao inspecionarmos o elemento na página, verificamos o seguinte:

helix fabrik 03

Note que ele está com um “encadeamento” das classes .input-append e .add-on, onde não é prevista a altura (height) do elemento. Isso pode ser facilmente corrigido no arquivo custom.css, inserindo o seguinte código:

.input-append .add-on {
height: 35px;
}

Perceba que só inserimos nesse arquivo aquelas propriedades que desejamos alterar ou acrescentar. Aquelas que permanecerão conforme o padrão do template ou extensão não precisamos inserir ali. Salve seu arquivo custom.css e perceba que agora a formatação está melhor.

helix fabrik 04

Agora vamos resolver a segunda inconformidade. Essa não é resolvida no arquivo CSS mas sim no próprio arquivo php do Fabrik, que está localizado em:

www.meusite.com.br/componentes/com_fabrik/layouts/pagination/fabrik-pagination-links.php

Perceba a linha 21 do arquivo:

helix fabrik 05

Ela faz referência a uma classe que o helix não consegue resolver. Eu corrigi o problema alterando essa linha para:

helix fabrik 05A

Ou seja, tirando o “-list” do nome da classe... deixando exatamente como na linha 20 do arquivo.
Salve o arquivo e releia a página, verificando que o problema foi resolvido.

helix fabrik 06

Ratifico que essas alterações são realizadas por conta do uso do Helix 3 como template. Outro template talvez não apresente essas incompatibilidades.