locked
Adjusting default LayoutRSS RRS feed

  • Question

  • User720751260 posted

    I'm trying to adjust the "out of the box" layout for windows mvc project. Trying to change the headers height (increase it) and change the background color.

    This is the default windows out of box code, so no surprises here. 

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>@ViewBag.Title - White Box Gaming</title>
        <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
        <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <script src="~/Scripts/modernizr-2.6.2.js"></script>
    </head>
    <body>
        <div 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="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="@Url.Action("Index","Home")"><img src="@Url.Content("~/Content/Images/Logo_Main.png")"/></a>  
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                    </ul>
                </div>
            </div>
        </div>
    
        <div class="container body-content">
            @RenderBody()
            <hr />
            <footer>
                <p>&copy; @DateTime.Now.Year - White Box Gaming All Rights Resevered</p>
            </footer>
        </div>
    
        <script src="~/Scripts/jquery-1.10.2.min.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
    </body>
    </html>

    Image:

    Sachin Khanna

    Saturday, July 27, 2019 3:05 PM

All replies

  • User-1174608757 posted

    Hi sachinkhanna32,

    According to your description,do you want to change the background color of header from black to another? You could directly set the background attribute in div,but if you want to set the height of header,I suggest that you could set the height of image.

    Else since you use bootstrap,if you increase height ,it will cover the content in below,so you need to set padding top of body as the height of head.You could see as below:

    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>@ViewBag.Title - White Box Gaming</title>
        <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
        <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <script src="~/Scripts/modernizr-2.6.2.js"></script>
        <style>
            body {
                padding-top: 200px;
            }
        </style>
    </head>
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top" style="background-color:yellow" >
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="@Url.Action("Index","Home")"><img src="~/Models/123.jpg" height="200" /></a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav"></ul>
                </div>
            </div>
        </div>
    
        <div class="container body-content">
            @RenderBody()
            <hr />
            <footer>
                <p>&copy; @DateTime.Now.Year - White Box Gaming All Rights Resevered</p>
            </footer>
        </div>
    
        <script src="~/Scripts/jquery-1.10.2.min.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
    </body>

    Best Regards

    Wei

    Monday, July 29, 2019 6:20 AM