In trying to fine-tune the appearance of my Web API page, I'm making changes to CSS classes, and adding new classes, to \Content/Site.css, yet they do not alter the appearance of the page as they should, even when I append "!important" to specific rules.
For example, I added a horizontal rule to the page, which does show up, but quite unobtrusively (with a faint, barely discernible line). So I added this .css class to Site.css:
hr {
border: 0;
height: 1px;
color: navy;
background: #333;
}
...which works just fine in another project, but doesn't in this one. The line remains faint even when I append "! important" to the "height" rule there:
height: 1px !important;
I tried right-clicking the page at runtime and selecting "Reload Page" but that made no difference, either.
Other CSS changes (margins and paddings) are not having any effect, either; this is just one specific case whose resolution should work for all of them.
What do I need to do to get modified/added CSS rules to be applied?
UPDATE
Even when I, acquiescing to Algernop K's suggestion, change the code from this:
. . .
builder.Append(string.Format("<h1 style=\'margin-left:16\'>Available PRO*ACT Reports for <span style='color: #000080;'>{0}</span></h1>", _unit.ToUpper()));
builder.Append("<p style='margin-left:16;'>(Click any link below to download the Excel spreadsheet file to your computer)</p>");
builder.Append("</div>");
builder.Append("<div class=\"row\">");
builder.Append("<div class=\"col-md-12\">");
builder.Append("<hr />");
. . .
...to this:
. . .
builder.Append(string.Format("<h1 style=\'margin-left:16; margin-top:48;\'>Available PRO*ACT Reports for <span style='color: #000080;'>{0}</span></h1>", _unit.ToUpper()));
builder.Append("<p style='margin-left:16;'>(Click any link below to download the Excel spreadsheet file to your computer)</p>");
builder.Append("</div>");
builder.Append("<div class=\"row\">");
builder.Append("<div class=\"col-md-12\">");
builder.Append("<hr style=\'size:4;\' />");
. . .
...(adding "; margin-top:48;" to the h1 element, and "size" to the hr), no change is evident.
UPDATE 2
A "funny" thing happened on the way to the Inspecting of Elements. As Chris W suggested, I right-clicked the hr element on the page, but it's so miniscule that I may have got a different element to inspect. Nevertheless, an err msg in the console may be revealing the basic problem - there it says, "bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery"
UPDATE 3
Should I explicitly add my \Content\Site.css file to the html? I tried dragging it from Solution Explorer below the lines shown above, hoping it would generate the correct code, but instead it gave me:
C:\Projects\ProActWebReports\ProActWebReports\Content\Site.css
...and a prompt to add "'System.Security.Policy.Site' and all other references in file"
Note that I have a related question here
UPDATE 4
FWIW, here's the entire (relevant) code that builds up this html:
namespace PlatypusWebReports.Controllers
{
[RoutePrefix("api")]
public class LandingPageController : ApiController
{
private string _unit;
[Route("{unit}")]
public HttpResponseMessage Get(string unit)
{
_unit = unit;
string beginningHtml = GetBeginningHTML();
string deliveryPerformanceHtml = GetDeliveryPerformanceHTML();
string fillRateHtml = GetFillRateHTML();
string priceComplianceHtml = GetPriceComplianceHTML();
string produceUsageHtml = GetProduceUsageHTML();
string endingHtml = GetEndingHTML();
String HtmlToDisplay = string.Format("{0}{1}{2}{3}{4}{5}",
beginningHtml,
deliveryPerformanceHtml,
fillRateHtml,
priceComplianceHtml,
produceUsageHtml,
endingHtml);
return new HttpResponseMessage()
{
Content = new StringContent(
HtmlToDisplay,
Encoding.UTF8,
"text/html"
)
};
}
private string GetBeginningHTML()
{
StringBuilder builder = new StringBuilder();
builder.Append("<html>");
builder.Append("<head>");
builder.Append("<title>");
builder.Append(string.Format("Available Reports For {0}", _unit));
builder.Append(_unit);
builder.Append("</title>");
builder.Append("<script src='https://code.jquery.com/jquery-1.12.2.min.js' integrity='sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=' crossorigin='anonymous'></script>");
builder.Append("<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet' />");
builder.Append("<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>");
builder.Append("</head>");
builder.Append("<body class=\"body-content\" style='margin-top:0;margin-left:60;margin-right:60;'>");
builder.Append("<div class=\"jumbotronjr\">");
builder.Append("<img src=\"http://www.Platypususa.com/wp-content/themes/Platypus/images/pa_logo_notag.png\" alt=\"Platypus logo\">");
builder.Append(string.Format("<h1 style=\'margin-left:16; margin-top:48;\'>Available Platypus Reports for <span style='color: #000080;'>{0}</span></h1>", _unit.ToUpper()));
builder.Append("<p style='margin-left:16;'>(Click any link below to download the Excel spreadsheet file to your computer)</p>");
builder.Append("</div>");
builder.Append("<div class=\"row\">");
builder.Append("<div class=\"col-md-12\">");
builder.Append("<hr style='color:red;height:12;' />");
builder.Append("</div>");
builder.Append("</div>");
// for beginning the row div
builder.Append("<div class=\"row\">");
return builder.ToString();
}
private string GetEndingHTML()
{
StringBuilder builder = new StringBuilder();
// for ending the row div
builder.Append("</div>");
builder.Append("</body>");
builder.Append("</html>");
return builder.ToString();
}
. . .
Everything is displaying basically as I want it to, it's just not allowing me to add the "gingebread" (adding margins, hrs, shadow around the used area)
UPDATE 5
Even though _ViewStart.cshtml points to Layout:
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
...and _Layout.cshtml renders (supposedly) the Styles in the Content/css folder, which contains the Sites.css which I have been adding CSS styles madly to:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - PRO*ACT USA</title>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css")
</head>
<body>
<div class="container body-content">
@RenderBody()
</div>
@*@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")*@
@RenderSection("scripts", required: false)
</body>
</html>
...all that does nothing to add these styles I want. The only way seems to use inline styles:
builder.Append("<body style='margin-top:40;margin-left:60;margin-right:60;'>");
. . .
builder.Append("<hr style='border:0;height:1;background:#333;color:navy;' />");
The whole process could certainly be made much clea[n,r]er / more straightforward.
