B. Clay Shannon B. Clay Shannon - 7 months ago 18
HTML Question

How can I add shading to edges of the default ASP.NET page?

"Out of the box" the Home page ASP.NET creates has a left and right edge (the page doesn't take up the whole width of the browser window).

I need to keep this, but I also need to add shading to both the left and right edges (a fair amount) and the top and botton (less). This shows how much of a shading I need - this shows the NW corner of the page, with the left edge shade thicker than the top edge:

enter image description here

I assume I need a CSS class to achieve this, but to what element do I need to apply it? The body CSS is:

body {
padding-top: 50px;
padding-bottom: 20px;
background-color: white;
}


UPDATE



Here by popular demand is the HTML:

<div class="jumbotronjr">
<img src="http://www.platypus.com/wp-content/themes/platypus/images/pa_logo_notag.png" alt="Platypus logo">
<label class="titletext">Report Scheduler</label>
</div>

<div class="row">
<div class="col-md-12">
<hr />
</div>
</div>

@* row 1: Select a Unit "combobox" *@
<div class="row">
<div class="col-md-12">
<label class="sectiontext">Select a Unit</label>
</div>
</div>


<div class="row">
<div class="col-md-12">
<select class="dropdown" id="unitsselect" name="unitsselect">
<option disabled selected value="-1">Please choose a Unit</option>
@foreach (var field in units)
{
<option id="selItem_@(field.unit)" value="@field.unit">@field.unit</option>
}
</select>
</div>
</div>

<div class="row">
<div class="col-md-12">
<label class="sectiontext">Select Report</label>
</div>
</div>

@* row 2: Select Report checkboxes *@
<div class="row">
<div class="col-md-12" id="unitsCheckboxDiv">
@foreach (var rpt in reports)
{
@* convert report name to lowercase and no spaces for use as checkbox's ID *@
var morphedRptName = rpt.report.Replace(" ", string.Empty).Replace("/", "_").ToLower();
<input class="ckbx leftmargin8" id="ckbx_@(morphedRptName)" type="checkbox" value="@rpt.report" />@rpt.report
}
</div>
</div>

@* row 3: Email recipients *@
<div class="row">
<div class="col-md-12">
<h4 class="h4 sectiontext">Specify Recipients</h4>
</div>
</div>

@* row 4: Email recipients *@
<div class="row">
<div class="col-md-12">
<input type="text" placeholder="Email 1" id="email1" />
<input type="text" placeholder="Email 2" id="email2" />
<input type="text" placeholder="Email 3" id="email3" />
</div>
</div>

@* row 5: Email recipients *@
<div class="row">
<div class="col-md-12">
<input type="text" placeholder="Email 4" id="email4" />
<input type="text" placeholder="Email 5" id="email5" />
<input type="text" placeholder="Email 6" id="email6" />
</div>
</div>

@* row 6: Email recipients *@
<div class="row">
<div class="col-md-12">
<button class="btn pseudobtn" name="btnAddlEmail" id="btnAddlEmail">+ Add Another Email</button>
</div>
</div>

@*from https://www.simple-talk.com/dotnet/asp.net/modal-input-forms-in-asp.net-mvc/*@
@* modal input form which remains invisible until the link (addlEmails) is clicked *@
<div class="modal fade halfwidth" id="add-email">
<div class="modal-header">
<a class="close" data-dismiss="modal"></a>
<h3></h3>
</div>
<div class="modal-body">
<p></p>
<label class="margin4horizontal"></label>
<input type="text" name="additionalEmail" id="additionalEmail" />
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal"></a>
<a href="#" class="btn btn-primary" id="btnSaveEmailInternal"></a>
</div>
</div>
@* row 4: "Generate and Email Report" label *@
<div class="row">
<div class="col-md-12">
<h4 class="h4 sectiontext">Generation and Email Reports</h4>
</div>
</div>

@* row 5: Label and first radio button on left, second radio button on right *@
<div class="row">
<div class="col-md-6">
<input type="radio" id="groupRptGenerationAndSendingByDayOfMonth" name="groupRptGenerationAndSendingTiming" value="day">On a specific day of the month
</div>
</div>

@* row 6: Day of month selection and label on left; Nth DOW of each (frequency) on the right *@
<div class="row">
<div class="col-md-6">
<select id="dayofmonthselect" name="dayofmonthselect">
@foreach (String day in daysOfMonth)
{
<option id="selItem_@(day) value=" day">@day</option>
}
</select>
<label> of each month</label>
</div>
</div>

<div class="row">
<div class="col-md-6">
<div>
<input type="radio" id="groupRptGenerationAndSendingBasedOnAPattern" name="groupRptGenerationAndSendingTiming" value="pattern">Based on a pattern<br>
<select id="ordinalselect">
@foreach (String ord in ordinalWeeksOfMonth)
{
<option id="selItem_@(ord) value=" ord">@ord</option>
}
</select>
<select id="dayofweekselect">
@foreach (String dow in daysOfWeek)
{
<option id="selItem_@(dow) value=" dow">@dow</option>
}
</select>
<label> of each</label>
<select id="weekormonthselect">
@foreach (String pf in patternFrequency)
{
if (pf == "Month")
{
<option id="selItem_@(pf)" value="@pf" selected="selected">@pf</option>
}
else
{
<option id="selItem_@(pf) value=" pf">@pf</option>
}
}
</select>
</div>
</div>
</div>

@* row 7: "Report Parameters" text *@
<div class="row">
<div class="col-md-12">
<h3 class="h3 sectiontext">Report Date Range Parameters</h3>
</div>
</div>

@* row 7b: Produce ge params on left, Delivery Performance on right *@
<div class="row">
<div class="col-md-6">
<h4>Produce ge (report spans up to 13 months)</h4>
<label>From</label>
<select class="dropdown" id="prodgefrom" name="prodgefrom">
@for (int i = 1; i <= maxMonthsBackBegin; i++)
{
if (i == 13)
{
<option id="selItem_@(i)" value="@i" selected="selected">@i</option>
}
else
{
<option id="selItem_@(i)" value="@i">@i</option>
}
}
</select>
<label>months back</label>
<label>To</label>
<select id="prodgeto" name="prodgeto">
@for (int i = 1; i <= maxMonthsBackEndNormal; i++)
{
<option id="selItem_@(i)" value="@i">@i</option>
}
</select>
<label>months back</label>
<button class="btn btn-sm" id="btnTestProducegeSettings">Test Settings</button>
</div>
<div class="col-md-6">
<h4>Delivery Performance (report spans up to 40 days)</h4>
<label>From</label>
<select class="dropdown" id="delperffrom" name="delperffrom">
@for (int i = 1; i <= maxDaysBackForDeliveryPerformance; i++)
{
if (i == 14)
{
<option id="selItem_@(i)" value="@i" selected="selected">@i</option>
}
else
{
<option id="selItem_@(i)" value="@i">@i</option>
}
}
</select>
<label>days back</label>
<label>To</label>
<select class="dropdown" id="delperfto" name="delperfto">
@for (int i = 1; i <= maxDaysBackForDeliveryPerformance; i++)
{
if (i == 7)
{
<option id="selItem_@(i)" value="@i" selected="selected">@i</option>
}
else
{
<option id="selItem_@(i)" value="@i">@i</option>
}
}
</select>
<label>days back</label>
<button class="btn btn-sm" id="btnTestDeliveryPerformanceSettings">Test Settings</button>
</div>

@* row 7c: Price Compliance params on left, Fill Rate on right *@
<div class="row">
<div class="col-md-6">
<h4>Price Compliance (report spans up to 13 months)</h4>
<label>From</label>
<select class="dropdown" id="pricecompliancefrom" name="pricecompliancefrom">
@for (int i = 1; i <= maxMonthsBackBegin; i++)
{
<option id="selItem_@(i)" value="@i">@i</option>
}
</select>
<label>months back</label>
<label>To</label>
<select class="dropdown" id="pricecomplianceto" name="pricecomplianceto">
@for (int i = 1; i <= maxMonthsBackEndNormal; i++)
{
<option id="selItem_@(i)" value="@i">@i</option>
}
</select>
<label>months back</label>
<button class="btn btn-sm" id="btnTestPriceComplianceSettings">Test Settings</button>
</div>
<div class="col-md-6">
<h4>Fill Rate (report spans up to 4 months)</h4>
<label>From</label>
<select class="dropdown" id="fillratefrom" name="fillratefrom">
@for (int i = 1; i <= maxMonthsBackBegin; i++)
{
<option id="selItem_@(i)" value="@i">@i</option>
}
</select>
<label>months back</label>
<label>To</label>
<select class="dropdown" id="fillrateto" name="fillrateto">
@for (int j = 1; j <= maxMonthsBackEndFillRate; j++)
{
<option id="selItem_@(j)" value="@j">@j</option>
}
</select>
<label>months back</label>
<button class="btn btn-sm" id="btnTestFillRateSettings">Test Settings</button>
</div>
</div>
</div>

@* row 8: "Save config" button on left, "View List of future reports" on right *@
<div class="row">
<div class="col-md-6">
<button class="btn btn-primary" id="btnSaveConfig" name="btnSaveConfig">Save/Update Configuration for this Unit and Clear Selections</button>
</div>
<div class="col-md-6">
<button class="btn btn-primary" id="btnViewList" name="btnViewList">View List of Future Report Generation</button>
</div>
</div>


UPDATE 2



And here's _Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Platypus</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

<script type="text/javascript">
var appInsights=window.appInsights||function(config){
function r(config){t[config]=function(){var i=arguments;t.queue.push(function(){t[config].apply(t,i)})}}var t={config:config},u=document,e=window,o="script",s=u.createElement(o),i,f;for(s.src=config.url||"//az416426.vo.msecnd.net/scripts/a/ai.0.js",u.getElementsByTagName(o)[0].parentNode.appendChild(s),t.cookie=u.cookie,t.queue=[],i=["Event","Exception","Metric","PageView","Trace","Ajax"];i.length;)r("track"+i.pop());return r("setAuthenticatedUserContext"),r("clearAuthenticatedUserContext"),config.disableExceptionTracking||(i="onerror",r("_"+i),f=e[i],e[i]=function(config,r,u,e,o){var s=f&&f(config,r,u,e,o);return s!==!0&&t["_"+i](config,r,u,e,o),s}),t
}({
instrumentationKey:"6fc2e00b-8657-47e9-841c-e033cbac3789"
});

window.appInsights=appInsights;
appInsights.trackPageView();
</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>
@Html.ActionLink("Report Scheduler", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
@*<hr />
<footer>
<p>&copy; @DateTime.Now.Year - Platypus</p>
</footer>*@
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>

Answer

Based on the HTML you provided you can create a box-shadow for your main content area with the following css in your main stylesheet:

.body-content {
   -webkit-box-shadow: -1px 0 5px 0 rgba(0,0,0,.25);
   box-shadow: -1px 0 5px 0 rgba(0,0,0,.25);
}

I used the site css3generator to create the style definition for the box-shadow. You can go there and create a new one if this doesn't create the exact shadow you are after.