2
respostas

No Django quando colocamos os arquivos staticos, não pode mudar, por exemplo o css e javascript, adicionar uma nova class ou uma nova função? tentei mas ele não funciona

No Django quando colocamos os arquivos staticos, não pode mudar, por exemplo o css e javascript, adicionar uma nova class ou uma nova função? tentei mas ele não funciona

2 respostas

Oi Jean, tudo bem?

Peço desculpas pela demora em obter um retorno.

Podemos realizar essas alterações nos arquivos frontend, basta ir na pasta static dentro do aplicativo alurareceitas, fazer as alterações necessárias e recarregar a página. É importante que seja em uma guia anônima, pois como estamos desenvolvendo em ambiente local, tem a tendência do navegador guardar em cache as configurações iniciais referentes a JS e CSS da página.

Vamos a um exemplo prático: Atualmente o texto de título das receitas que aparece na página principal e abaixo das imagens, está na cor preta:

Imagem com fundo branco, com o site feito no curso: Alura Receita. No canto superior esquerdo possui a logo alura receita. No canto superior direito possui um botão escrito Home e ao lado desse botão, um ícone de lupa simbolizando um campo de pesquisa. Abaixo desses elementos possui três receitas com foto e logo abaixo um título na cor preta, respectivamente: suco de laranja, bolo de chocolate e sopa de legumes.

Porém, suponha que queremos mudá-lo para a cor vermelha. Para isso, vá na pasta alurareceitas logo após acesse a pasta static, abra o arquivo site.css e altere a classe CSS referente aos headings (títulos de H1, H2, H3, H4…). O código ficará da seguinte maneira:

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #ff0707;
  line-height: 1.3;
  font-weight: 600; 
}

Após isso, abra o endereço localhost:8000 em guia anônima e como resultado, teremos o título das receitas em vermelho, como mostro abaixo:

Imagem com fundo branco, com o site feito no curso: Alura Receita. No canto superior esquerdo possui a logo alura receita. No canto superior direito possui um botão escrito Home e ao lado desse botão, um ícone de lupa simbolizando um campo de pesquisa. Abaixo desses elementos possui três receitas com foto e logo abaixo um título na cor vermelha, respectivamente: suco de laranja, bolo de chocolate e sopa de legumes.

O mesmo ocorre para as funções JS que você deseja modificar ou adicionar. Vale ressaltar que em caso de criação de novas funções no javascript ou estilizações no CSS, temos que adicionar essas novas funções no nosso arquivo HTML, que fica dentro da pasta de templates. Ou seja, caso você crie uma classe “teste”, terá que utilizar o atributo “class” no HTML e linkar a classe “teste”:

<p class="teste">Texto aqui</p>

Qualquer dúvida estou à disposição.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Olá Felippe, Obrigado por tirar a duvida, vou teste.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software