locked
Adjusting default Layout RRS feed

  • Question

  • User1324715958 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:

    Tuesday, May 21, 2019 7:05 PM

All replies

  • User-1174608757 posted

    Hi UOKSoftware,

    According to your description, if you want to change the height of headers which means you want to set the height of the image , you could change the height attribute of image as below:
     

    <img src="@Url.Content("~/Content/Images/Logo_Main.png")" style="height:60px;width:300px"/>

    Then could you please tell which background you want to change?if you want change the background of image,It couldn't be done because the background of picture is fixed, you don't  have any way but to rebuild the picture.

    Else if you want to change the color the body you could write as below:

    <body style="background-color:aqua"></body>

    Best Regards

    Wei

    Wednesday, May 22, 2019 3:03 AM