Entrar Ainda não tem acesso?
2
respostas

[Bug] A estilização na mensagem ao fazer Login não funcionou

Referente ao curso Django: autenticação de formulários e alerta, no capítulo Validações e atividade Refatoração e validação

por Kayo Werter Nicacio Campos
| 129.1k xp | 10 posts

No outro tópico sobre isso foi recomendado apenas a atualização no Ctrl + Shift + R mas aqui continou com o mesmo problema. Alguém resolveu de outro jeito?

base.html

{% load static %}
<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alura Space</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{% static '/styles/style.css' %}">
</head>

<body>
    {% include 'galeria/partial/_menu.html' %}
    {% block content %}
    {% endblock %}
    {% include 'galeria/partial/_footer.html' %}
</body>

</html>

style.css

.alert {
    --bs-alert-bg: transparent;
    --bs-alert-padding-x: 1rem;
    --bs-alert-padding-y: 1rem;
    --bs-alert-margin-bottom: 1rem;
    --bs-alert-color: inherit;
    --bs-alert-border-color: transparent;
    --bs-alert-border: 1px solid var(--bs-alert-border-color);
    --bs-alert-border-radius: 0.375rem;
    position: relative;
    padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
    margin-bottom: var(--bs-alert-margin-bottom);
    color: var(--bs-alert-color);
    background-color: var(--bs-alert-bg);
    border: var(--bs-alert-border);
    border-radius: var(--bs-alert-border-radius);
}

.alert-primary {
    --bs-alert-color: #084298;
    --bs-alert-bg: #cfe2ff;
    --bs-alert-border-color: #b6d4fe;
}
2 respostas
por SARAH CRISTINA BATISTA DOS SANTOS
| 887.8k xp | 2113 posts
Alura Scuba Team Monitor/ fórum

Olá, Kayo! Tudo bem?

Analisando o código fornecido, percebo que você está utilizando uma classe chamada .alert no seu arquivo style.css para estilizar a mensagem de alerta. Além disso, você também está utilizando a classe .alert-primary para estilizar o alerta específico de cor primária.

No entanto, parece que essas classes não estão sendo aplicadas corretamente. Uma possível solução é verificar se a referência para o arquivo style.css está correta no seu arquivo base.html. Certifique-se de que o caminho para o arquivo está apontando para o local correto.

Além disso, verifique se você está importando corretamente o arquivo style.css no seu arquivo base.html. O código abaixo mostra como você pode fazer isso:

<link rel="stylesheet" href="{% static 'styles/style.css' %}">

Certifique-se de que o caminho para o arquivo style.css está correto e que o arquivo está sendo importado corretamente.

Se você já verificou esses pontos e o problema persiste, pode ser necessário verificar se há algum conflito de estilos entre o seu arquivo style.css e o arquivo de estilos do Bootstrap. Você pode tentar remover as classes do Bootstrap que estão entrando em conflito com as suas classes personalizadas.

No arquivo base.html, remova as linhas 13 e 14 que fazem referência ao arquivo de estilos do Bootstrap. Reinicie a aplicação, faça o logout e login novamente para ver se as alterações surtiram efeito.

Caso o problema ainda persista, pode ser necessário verificar se há algum outro arquivo de estilos sendo importado que esteja interferindo na estilização da mensagem de alerta. Verifique se há outros arquivos de estilos sendo importados no seu projeto e analise se eles estão causando algum conflito.

Caso tenha dúvidas, fico à disposição!

Espero ter ajudado.

Abraços e bons estudos!

por GUILHERME NUNES CANDIDO FERREIRA
| 31.8k xp | 9 posts
Controlador de voo

fiz um post nesse fórum com a solução. Espero que ajude!