ti-enxame.com

Fluxo de trabalho para desenvolver / ajustar modelos

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 o 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 web local com o Joomla, que tinha a vantagem de poder usar um IDE adequado para escrever código css e php. já tem 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?

16
halirutan

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.

Há uma série de boas razões pelas quais é imprudente "Ajustar" em um site ao vivo ...

10
Seth Warburton

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

  • Faça exatamente o que você fez antes com sua instalação local, mas uma vez instalada, altere a instalação local do Joomla para usar seu banco de dados MySQL remoto ao vivo em 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 extplorer e edite os arquivos de modelo diretamente no navegador, com outra guia aberta exibindo o site, ainda usando 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 enviar 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 YooTheme modelos. 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.

10
codinghands

Se forem apenas alterações de CSS que você está fazendo, também poderá visualizá-las em Chrome Ferramentas de desenvolvimento e usar um ambiente de desenvolvimento on-line, como Cloud9 ou ShiftEdit você pode se conectar diretamente ao seu servidor via FTP e fazer ajustes no site ao vivo usando um bom IDE semelhante ao que você fazia quando estava 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 um servidor gratuito VM de koding.com ), clonar o site com Akeeba e usar Git * para Enviar alterações ao site ativo depois de testadas.

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

6
Adam B

Método 1

Um método que usei é adicionar meu próprio arquivo css ao arquivo de modelo index.php. Isso pode ser empacotado 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).

5
Peter Wiseman