✅ Prestashop - Modificando o CSS

Índice

Com as folhas de estilo ou CSS Podemos conseguir quase tudo no ambiente web, os efeitos que alcançamos são aplicados a todo o site, dando a possibilidade de criar uma identidade homogênea em toda a página.
Felizmente Prestashop É construído com base neste padrão, pelo que podemos fazer alterações ao seu aspecto muito rapidamente e se seguirmos as convenções podemos obter efeitos que se aplicam a toda a nossa loja, criando assim a nossa identidade gráfica.
Conhecendo os arquivos CSS Prestashop
Como sempre antes de começar a modificar algo em nossa loja, a primeira coisa que devemos fazer é saber onde estamos, neste caso devemos nos familiarizar com a estrutura de Prestashop e onde podemos obter os diferentes arquivos CSS.
Se abrirmos a estrutura de pastas de nossa instalação de Prestashop devemos ir para a pasta temas, nele estarão os diferentes temas disponíveis para a nossa loja, graças a isso podemos ter diferentes variações da nossa imagem.
É sempre importante lembrar que se vamos fazer alguma modificação, devemos primeiro fazer backup dos dados, para isso podemos copiar a pasta do tema para modificá-lo e salvá-lo com outro nome, desta forma podemos retornar ao versão anterior, se necessário.
Uma vez na pasta temas e depois que já inserimos o tema a modificar, devemos localizar a pasta cssVamos ver a imagem a seguir para ilustrar o caminho que devemos ter percorrido:

Muito bom, uma vez dentro desta pasta devemos ter os seguintes arquivos:

global.css
manutenção.css
cenas.css

Os arquivos CSS do Prestashop trabalhar com o mecanismo de template Smarty (.tpl) que está localizado por padrão na pasta de módulos, embora trabalhar com este módulo não seja estritamente necessário conhecê-lo a fundo, no entanto, ter algumas noções pode nos ajudar muito.
Outro aspecto importante é conhecer um pouco a sintaxe do CSSEmbora isso possa ser um pouco complicado, é muito importante saber o que cada coisa em nosso arquivo significa para que possamos agir com conhecimento de causa cada vez que fizermos uma alteração.
global.css
Este é o arquivo geral, que nos permite alterar a aparência geral de todas as páginas de nossa loja.
Os aspectos que podemos controlar com este arquivo são os seguintes:

Cor de fundo
Tamanho da fonte
Tipo de fonte
Cor
Alinhamento de texto
Formato de parágrafo e página

Como podemos perceber, esses aspectos são fundamentais em nossa imagem gráfica, portanto este arquivo é vital para manter o fluxo de nosso site.
Embora possamos fazer muitas alterações, ao iniciar é recomendável não modificar a sintaxe existente, senão seus valores, para que possamos utilizar o arquivo CSS como base e desta forma aprender quais mudanças estão ocorrendo com cada modificação dos valores que fazemos.
Já temos uma base para começar a modificar a aparência de nossa loja através de seus arquivos de estilo e também já sabemos que existem outros conceitos que devemos investigar e aprender para alcançar resultados mais profissionais.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo