how to change background color for the body?-CodePudding

How can I change the background color in main layout its now dark and I cannot find it with navbar I need to change the body I cannot find it is it in the bootstrap file ?

Also how to change the text fields size and colors as well ?

This is the layout code :

<!DOCTYPE html>
<html>
<head>
    <title> store system  </title>
    @RenderSection("head", required: false)

    <meta charset="utf-8">
    <title></title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="" name="keywords">
    <meta content="" name="description">

    <!-- Favicon -->
    <link href="img/favicon.ico" rel="icon">

    <!-- Google Web Fonts -->
    <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=Heebo:wght@400;500;600&family=Nunito:wght@600;700;800&display=swap" rel="stylesheet">

    <!-- Icon Font Stylesheet -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet">

    <!-- Libraries Stylesheet -->
    <link [email protected]("/Contents/lib/animate/animate.min.css") rel="stylesheet">
    <link [email protected]("/Contents/lib/owlcarousel/assets/owl.carousel.min.css") rel="stylesheet">

    <!-- Customized Bootstrap Stylesheet -->
    <link [email protected]("/Contents/css/bootstrap.min.css") rel="stylesheet">

    <!-- Template Stylesheet -->
    <link [email protected]("/Contents/css/style.css") rel="stylesheet">
</head>
<body style="background-color:darkgray ">
    <div id="spinner" >
        <div  style="width: 3rem; height: 3rem;" role="status">
            <span >Loading...</span>
        </div>
    </div>
    <!-- Spinner End -->
    <!-- Navbar Start -->
    <nav >
        <a href="#" >
            <h2 ><i ></i>Store System</h2>
        </a>
        <button type="button"  data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
            <span ></span>
        </button>
        <div  id="navbarCollapse">
            <div >
                <a href="index.html" >Home</a>
                <a href="about.html" >About</a>

                <a href="@Url.Action("Index", "Quantities")" >Quantity</a>
                <div >
                    <a href="#"  data-bs-toggle="dropdown">Setup</a>
                    <div >
                        <a href="team.html" >Our Team</a>
                        <a href="testimonial.html" >Testimonial</a>
                        <a href="404.html" >404 Page</a>
                    </div>
                </div>
                <a href="contact.html" >Contact</a>
            </div>
            <a href="" >Join Now<i ></i></a>
        </div>
    </nav>
    <a href="#" ><i ></i></a>


    <!-- JavaScript Libraries -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <script [email protected]("/Contents/lib/wow/wow.min.js")></script>
    <script [email protected]("/Contents/lib/easing/easing.min.js")></script>
    <script [email protected]("/Contents/lib/waypoints/waypoints.min.js")></script>
    <script [email protected]("/Contents/lib/owlcarousel/owl.carousel.min.js")></script>

    <!-- Template Javascript -->
    <script [email protected]("/Contents/js/main.js")></script>
    @RenderBody()
</body>
</html>

see the image please :

enter image description here

this is the VIEW code :

@model warehouse.Models.ITEMS_STOCK

@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_LayoutDashboard.cshtml";
}

<h2>Create</h2>


@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
    <div >
        <h4>ITEMS_STOCK</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div >
            @Html.LabelFor(model => model.BATCH_NO, htmlAttributes: new { @class = "control-label col-md-2" })
            <div >
                @Html.EditorFor(model => model.BATCH_NO, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.BATCH_NO, "", new { @class = "text-danger" })
            </div>
        </div>

        <div >
            @Html.LabelFor(model => model.PROD_DATE, htmlAttributes: new { @class = "control-label col-md-2" })
            <div >
                @Html.EditorFor(model => model.PROD_DATE, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.PROD_DATE, "", new { @class = "text-danger" })
            </div>
        </div>

        <div >
            @Html.LabelFor(model => model.EXPIRY_DATE, htmlAttributes: new { @class = "control-label col-md-2" })
            <div >
                @Html.EditorFor(model => model.EXPIRY_DATE, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.EXPIRY_DATE, "", new { @class = "text-danger" })
            </div>
        </div>

        <div >
            @Html.LabelFor(model => model.QUANTITY, htmlAttributes: new { @class = "control-label col-md-2" })
            <div >
                @Html.EditorFor(model => model.QUANTITY, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.QUANTITY, "", new { @class = "text-danger" })
            </div>
        </div>

        <div >
            @Html.LabelFor(model => model.RECEIVEDBY, htmlAttributes: new { @class = "control-label col-md-2" })
            <div >
                @Html.EditorFor(model => model.RECEIVEDBY, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.RECEIVEDBY, "", new { @class = "text-danger" })
            </div>
        </div>

        <div >
            @Html.LabelFor(model => model.SENDBY, htmlAttributes: new { @class = "control-label col-md-2" })
            <div >
                @Html.EditorFor(model => model.SENDBY, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.SENDBY, "", new { @class = "text-danger" })
            </div>
        </div>

        <div >
            @Html.LabelFor(model => model.SUPPLYERID, htmlAttributes: new { @class = "control-label col-md-2" })
            <div >
                @Html.EditorFor(model => model.SUPPLYERID, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.SUPPLYERID, "", new { @class = "text-danger" })
            </div>
        </div>

        <div >
            @Html.LabelFor(model => model.SUPPLYID, htmlAttributes: new { @class = "control-label col-md-2" })
            <div >
                @Html.EditorFor(model => model.SUPPLYID, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.SUPPLYID, "", new { @class = "text-danger" })
            </div>
        </div>

        <div >
            @Html.LabelFor(model => model.DATE, htmlAttributes: new { @class = "control-label col-md-2" })
            <div >
                @Html.EditorFor(model => model.DATE, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.DATE, "", new { @class = "text-danger" })
            </div>
        </div>

        <div >
            @Html.LabelFor(model => model.USER_ID, htmlAttributes: new { @class = "control-label col-md-2" })
            <div >
                @Html.EditorFor(model => model.USER_ID, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.USER_ID, "", new { @class = "text-danger" })
            </div>
        </div>

        <div >
            @Html.LabelFor(model => model.item_code_id, htmlAttributes: new { @class = "control-label col-md-2" })
            <div >
                @Html.EditorFor(model => model.item_code_id, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.item_code_id, "", new { @class = "text-danger" })
            </div>
        </div>

        <div >
            <div >
                <input type="submit" value="Create"  />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

UPDATE :

I run the view then select inspect and select body there is one line in style.css body part :

/* background: linear-gradient(#141e30, #243b55);

I changed it in the file style.css but always show this line in inspect and no changes ? Can I save changes from inspect ? and why not reading changes from style.css ?

I checked the source from where its reading and changed it but its always so same color see the image please its source style.css line 443 I removed it and save but when run the view its still there !!

enter image description here

CodePudding user response：

Try to force the coloring:

body{background-color:red !important;}

At best directly in the html, which is highest prio:

...
<body style="background-color:red !important;">
...

CodePudding user response：

1- Try to copy the file style.css

2- paste it then change the color

<body style="background-color:red;">

3- read from new file style1.css

 <!-- Template Stylesheet -->
 <link [email protected]("/Contents/css/style1.css") rel="stylesheet">

4- build the solution.