Normalmente, apenas ajusto os modelos gratuitos existentes e altero cores e fontes. A questão é: quando eu já tenho minha página do Joomla online, qual é a maneira mais fácil de fazer alterações no modelo css?

Atualmente, estou usando as Ferramentas de desenvolvimento do Chrome para encontrar e ajustar estilos específicos para uma visualização. Se eu gostar, ajusto o arquivo css do modelo diretamente no editor online na área de administração.

Quando eu comecei e não tinha nenhum conteúdo, usei um servidor da Web local com o Joomla que tinha a vantagem de poder usar um IDE adequado para escrever código css e php. Como eu já tenho algum conteúdo agora, gostaria de ver como as alterações que eu faço parecem com o conteúdo que tenho.

Sei que essa é uma pergunta básica, mas existe um fluxo de trabalho preferido quando alguém deseja ajustar o design de um site existente?

Clone o site com Akeeba, instale-o localmente e ajuste conforme necessário. Quando você terminar o SSH / FTP, os arquivos alterados voltarão ao site ativo.

Existem várias razões pelas quais é imprudente "ajustar" em um site ao vivo ...

Você tem algumas opções aqui, dependendo se seu foco é a facilidade de uso, automação ou custo:

• Faça exatamente o que você fez antes com a instalação local, mas uma vez instalada, altere a instalação local do Joomla para usar seu banco de dados MySQL remoto e ativo configuration.php, se o seu host suportar acesso remoto. Tenha cuidado, porém - quaisquer alterações no banco de dados serão transferidas para o live ...

• Use um componente como o extensor e edite os arquivos de modelo diretamente no navegador, com outra guia aberta exibindo o site, ainda usando as ferramentas de desenvolvimento do Chrome. O extplorer possui coloração de código e é ótimo para fazer pequenas alterações rapidamente.

• Use um sistema de controle de versão para realizar alterações - por exemplo, desenvolva seu modelo em uma instalação local do Joomla usando o IDE escolhido, com o modelo em um repositório. Quando terminar, confirme as alterações no seu site ativo. Use um gancho pós-confirmação para fazer check-out dessas alterações como uma versão de trabalho. Embora seja mais complicado de configurar, isso significa que você sempre pode reverter para versões antigas do modelo se cometer um erro. Adicione o MySQL remoto para garantir a consistência dos dados local e ao vivo.

• Pague por uma estrutura de modelo / modelo adequada - na minha empresa, usamos modelos YooTheme . Essa estrutura de modelo possui um recurso chamado 'Customizr', que é basicamente uma janela de dois painéis com centenas de variáveis ​​CSS (bem, variáveis ​​MENOS) à esquerda e uma visualização ao vivo à direita. Essas variáveis ​​controlam quase o suficiente todos os elementos do modelo, do preenchimento da calha à sombra do texto do item de menu e tudo mais. As alterações são aplicadas instantaneamente na visualização e vários 'estilos' podem ser definidos para que você possa jogar com diferentes configurações de variáveis. Tudo isso dito, tenho certeza de que outras estruturas de modelo têm recursos muito semelhantes.

NB: Não tenho nenhuma relação com o extplorer nem com o YooTheme, exceto como usuário.

Se forem apenas alterações de CSS que você está fazendo, continue visualizando-as nas Ferramentas de Desenvolvimento do Chrome e usando um ambiente de desenvolvimento on-line, como Cloud9 ou ShiftEdit, você pode conectar-se diretamente ao servidor via FTP e fazer ajustes no site ao vivo usando um IDE adequado semelhante ao que você fez quando foi hospedado localmente.

No entanto, eu não recomendaria isso para alterações maiores que possam danificar seu site (eu aprendi da maneira mais difícil há alguns anos). Para isso, recomendo configurar um servidor local (ou uma VM gratuita do koding.com ), clonar o site com o Akeeba e usar o Git * para enviar alterações ao seu site ativo depois de testadas.

* Se você não deseja que seu código seja público no GitHub, uma boa alternativa é o BitBucket .

Método 1

Um método que usei é adicionar meu próprio arquivo css ao arquivo index.php do modelo. Isso pode ser quebrado para adicioná-lo apenas se você for o usuário.

Uma maneira de estender isso é escrever um plugin simples que adicione um arquivo css se você for o usuário. Usei isso para fazer alterações no modelo de administrador padrão, para evitar alterações diretamente no modelo que podem ser substituídas pela próxima atualização.

Algo como...

class plgSystemBB extends JPlugin {
    public function onBeforeCompileHead() {

    if (JFactory::getUser()->username == 'my.login.name.goes.here')
    {
        JFactory::getDocument()->addStylesheet("/templates/protostar/css/test.css");
    }

    if(!JFactory::getApplication()->isAdmin()){
        return;
    }   

    JFactory::getDocument()->addStylesheet("/templates/isis/css/admin-extra.css");
}

Método 2

Para visualizar as alterações do modelo, você pode duplicar o modelo e fazer alterações na duplicata. Para visualizar essas alterações, anexe "? Template = test" ao URL, que substitui o modelo. Substitua "teste" pelo nome que você decidiu usar para a duplicata.

Observe que você precisa duplicar o modelo inteiro, e não apenas um estilo. Estilos e modelos podem ser duplicados na interface do administrador.

Não acredito que seja possível substituir um estilo no URL. [PW: Acabei de descobrir que no J3, você pode substituir um estilo no URL. Veja o método 3.]

Método 3

Semelhante ao método 2, mas com estilos. Use um estilo "teste" e modifique o modelo principal para incluir a folha de estilo de teste. Para substituir um estilo no URL, adicione? TemplateStyle =, onde está o identificador do modelo (ou seja, numérico).