0

------------ I implement bootstrap SB Admin template for my asp.net core Identity project. Now I am personalising it. The problem is that I cannot change the background colour of the template neither the colour of navigation menu. When I inspect the elements the colour is changing but when I rewrite or delete the code on style.css file, it doesn't work. Here is my code for the login page. ------------

@page

@model LoginModel

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>Login</title>
    <link href="css/styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js" crossorigin="anonymous"></script>
</head>
<body class="login">
    <div id="layoutAuthentication">
        <div id="layoutAuthentication_content">
            <main>
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-lg-5">
                            <div class="card shadow-lg border-0 rounded-lg mt-5">
                                <div class="card-header"><h3 class="text-center font-weight-light my-4">Login</h3></div>
                                <div class="card-body">
                                    <form id="account" method="post">
                                        <h4 class="text-center">Use a local account to log in.</h4>
                                        <hr />
                                        <div asp-validation-summary="All" class="text-danger"></div>
                                        <div class="form-group">
                                            <label asp-for="Input.UserName"></label>
                                            <input asp-for="Input.UserName" class="form-control" />
                                            <span asp-validation-for="Input.UserName" class="text-danger"></span>
                                        </div>
                                        <div class="form-group">
                                            <label asp-for="Input.Password"></label>
                                            <input asp-for="Input.Password" class="form-control" />
                                            <span asp-validation-for="Input.Password" class="text-danger"></span>
                                        </div>
                                        <div class="form-group">
                                            <div class="checkbox">
                                                <label asp-for="Input.RememberMe">
                                                    <input asp-for="Input.RememberMe" />
                                                    @Html.DisplayNameFor(m => m.Input.RememberMe)
                                                </label>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <button type="submit" class="btn btn-primary">Log in</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
    <script src="js/scripts.js"></script>
</body>
@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}


@charset "UTF-8";
/*!
* Start Bootstrap - SB Admin v6.0.2 (https://startbootstrap.com/template/sb-admin)
* Copyright 2013-2020 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-sb-admin/blob/master/LICENSE)
*/
/*!
 * Bootstrap v4.5.3 (https://getbootstrap.com/)
 * Copyright 2011-2020 The Bootstrap Authors
 * Copyright 2011-2020 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}    
.bg-primary {
    background-color: #007bff !important;

}

1 Answers1

0

It looks like the Boorstrap specifity is higher than your declared style. So you can add specificity to your classes or use !important. Adding specificity is better way. However, let me show how classes can be overriden using !important:

.container { 
    background-color: lightgreen !important; 
}

An example where we add more specificity to the class container by adding div color can be seen here.

Read more about specificity here.

StepUp
  • 36,391
  • 15
  • 88
  • 148
  • I tried but still it doesn't work. The color isn't changing even when I change the color code directly in .bg-primary { background-color: #007bff !important; } – YoungDeveloper Apr 11 '21 at 18:49
  • @YoungDeveloper double check that you have just one `style.css` file. Maybe you have another `.css` file? [You can find your stylesheet using Chrome Developer Tools](https://stackoverflow.com/questions/50873548/css-how-can-i-find-a-css-file-from-inspector) – StepUp Apr 11 '21 at 19:15
  • @YoungDeveloper Feel free to ask any question. If reply helped to you, you can mark it as an answer to simplify the future search of other users. [How accepting of answer works.](https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) – StepUp Apr 13 '21 at 16:44
  • I found out that the theme sorf of inherites its .css rules from datatables.min.css. The interesting thing is that this file is only visible from the inspector. In this file it says: To rebuild or modify this file with the latest versions of the included * software please visit: * https://datatables.net/download/#bs4-4.1.1/dt-1.10.24/b-1.7.0/date-1.0.3/fc-3.3.2/fh-3.1.8/r-2.2.7/sc-2.0.3/sb-1.0.1/sp-1.2.2/sl-1.3.3 * I am super confused right now – YoungDeveloper Apr 14 '21 at 15:42
  • @YoungDeveloper it looks like this file can be taken by default when ASP.NET creates bundles. There should be `script` tag like this ``. See more in [this datatables tutorial](https://codewithmukesh.com/blog/jquery-datatable-in-aspnet-core/) – StepUp Apr 14 '21 at 15:57