Sobrescrever CSS só funciona em modo mobile. | ASP.NET Core parte 1: Crie uma aplicação MVC com EF Core e Bootstrap

Solucionado (ver solução)

Solucionado
(ver solução)

6
respostas

por Cayo Costa

| 143.9k xp | 21 posts

Dev Pleno

Boa noite! Caros, Tentei sobrescrever as classes :

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

    .navbar-brand {
        background: url('../images/Produtos/logo.png');
        width: 215px;
        height: 55px;
    }

    .navbar-inverse {
        background-color: #F8965D;
        border-color: white;
    }

porém só surte efeito quando entro em dev tools e seleciono a visualização para celular. segue a view carrossel.cshtml:


@{
    ViewData["Title"] = "Carrossel";
}

<div id="my-carousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#my-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#my-carousel" data-slide-to="1"></li>
        <li data-target="#my-carousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img alt="First slide" src="http://placehold.it/1200x675&text=First+slide">
            <div class="carousel-caption">
                <h3>Caption heading 1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
        <div class="item">
            <img alt="Second slide" src="http://placehold.it/1200x675&text=Second+slide">
            <div class="carousel-caption">
                <h3>Caption heading 2</h3>
                <p>Morbi eget libero quis metus consectetur semper.</p>
            </div>
        </div>
        <div class="item">
            <img alt="Third slide" src="http://placehold.it/1200x675&text=Third+slide">
            <div class="carousel-caption">
                <h3>Caption heading 3</h3>
                <p>Suspendisse ullamcorper massa eget eleifend iaculis.</p>
            </div>
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#my-carousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#my-carousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

OBS.: Limpei o cache e até instalei o firefox que eu não tinha.. xD

Desde já, agradeço!

6 respostas

por Henrique Maich

| 287.2k xp | 84 posts

08/08/2017

Cara parece ser algo em relação a ordem de carregamento dos CSS em si, nada a ver com o ASP.NET.

A como ta a ordem de importação dos CSS no HTML final gerado? Chegou a dar uma olhada no Developer Tools do seu browser?

por Cayo Costa

| 143.9k xp | 21 posts

Dev Pleno

08/08/2017

E ai Henrique, eu colei a view errada. Esse aqui é o meu Layout:

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"] - Casa do Código</title>


        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />


    @Html.Raw(JavaScriptSnippet.FullScript)
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand"></a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
                    <li><a asp-area="" asp-controller="Pedido" asp-action="Carrossel">Carrossel</a></li>
                    <li><a asp-area="" asp-controller="Pedido" asp-action="Pedido">Pedido</a></li>
                    <li><a asp-area="" asp-controller="Pedido" asp-action="Resumo">Resumo</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; 2017 - CasaDoCodigo</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>
    @RenderSection("Scripts", required: false)
</body>
</html>

por Cayo Costa

| 143.9k xp | 21 posts

Dev Pleno

10/08/2017

Caros, eu iniciei sem depurar e funcionou. Alguém sabe me dizer por quê?

por Henrique Maich

| 287.2k xp | 84 posts

10/08/2017

Provavelmente seu navegador esta cacheando seu CSS antigo, da uma olhada no developers tool na aba de network e ve se arquivo que está sendo importado não é o antigo.

Tente atualizar a pagina com Ctrl + F5 para dar refresh sem cache.

Abraços

por Cayo Costa

| 143.9k xp | 21 posts

Dev Pleno

11/08/2017

Provavelmente estava cacheando mesmo. Mas é que o VS2017 está abrindo uma nova janela no chrome, e essa janela é "crua", não carrega nem o tema que eu instalei no chrome. Quando eu publiquei o site e acessei por uma janela normal carregou o css certinho. No VS2015 não abria essa janela "crua". Alguém sabe como configurar para ser igual ao do VS2015? Eu tentei anexar aos processos em andamento em debug>attach to process e escolhi uma janela do chrome... Esse é o procedimento correto?

solução!

por Cayo Costa

| 143.9k xp | 21 posts

Dev Pleno

11/08/2017

Encontrei a solução senhores: https://blogs.msdn.microsoft.com/webdev/2016/11/21/client-side-debugging-of-asp-net-projects-in-google-chrome/

Se desmarcar aopção "enable JavaScript debugging..."no vs2017 ele abre em uma janela normal...