Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

site.css não funcionando corretamente

Boa noite,

Estou tentando usar o comando:

.left.carousel-control,
.right.carousel-control {
    background-image: none;
}

Mas não funciona, eu entro em source pela ferramenta do desenvolvedor, e o arquivo nem é atualizado lá ...

Porem quando eu rodo o programa pelo path do código, ai ele funciona, alguém pode me dizer o que fazer ?

Obrigado,

João Vitor.

4 respostas

Olá João,

pode ser algum problema com os caminhos dentro do projeto. Em que pasta você colocou o site.css? Além disso, me manda o seu cshtml que chama o site.css para eu dar uma olhada.

Olá Lucas,

Então cara, eu não mexi nele ainda, apenas estou fazendo o passo a passo do curso acredito eu.

Ele esta na raiz wwwroot, dentro da pasta css.

site.css:

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 280px;
}

/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}

.left.carousel-control,
.right.carousel-control {
    background-image: none;
}

Eu estou usando o layout que vem no projeto já pré definido pra ser geral em todas as views.

_Layout.cshtml:

@inject Microsoft.ApplicationInsights.AspNetCore.JavaScriptSnippet JavaScriptSnippet
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - CasaDoCodigo</title>

    <environment names="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>
    <environment names="Staging,Production">
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
    </environment>
    @Html.Raw(JavaScriptSnippet.FullScript)
</head>
<body>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; 2017 - Casa do Código</p>
        </footer>
    </div>

    <environment names="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>
    <environment names="Staging,Production">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
        </script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
    </environment>

    @RenderSection("Scripts", required: false)
</body>
</html>

Espero que você possa me ajudar rs.

To sem saber como mudar isso, porque eu ainda não sei algumas coisas que vem estabelecidas no _layout.cshtml.

Como por exemplo a utilidade do < environment > não sei se vamos aprender sobre ele no decorrer do curso, ou se tem algum que mostre, mas se houver por favor me diga rs.

Obrigado.

solução!

Olá João,

só uma dúvida que eu fiquei, quando você investiga o source do navegador, ele não carrega o arquivo site.css ou ele só não carrega o comando

.left.carousel-control,
.right.carousel-control {
    background-image: none;
}

?

Porque aparentemente está tudo certinho para carregar o arquivo. Se ele apenas não carregou o comando css, pode ser que o navegador tenha feito um cache do arquivo, ai você poderia fazer o comando ctrl + shift + R para recarregar a página limpando o cache. Ou então ficou faltando passar as classes left, right e carousel-control nos elementos da sua página.

Boa tarde Lucas,

Cara é exatamente isso, a pouco eu limpei o cache do navegador com Ctrl + F5 e funcionou.

Obrigado mesmo assim,

Até uma próxima.

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