I want to dynamically change the header of my website based on whether it is in dev QA or production environment. Below is the HTML code:
<div id="wrapper">
<form id="form1" runat="server">
<div class="wrapper">
<div>
<div id="siteHeader" runat="server">FTP Forms</div>
...other stuff
<div>
<div class="wrapper">
<asp:ContentPlaceHolder id="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</form>
</div>
In my .css file, I have included the relevant CSS styles for #siteHeader based on different environments.
#siteHeader.header {
background-color: forestgreen;
color: white;
font-size: 24pt;
font-weight: bold;
padding: 5px;
border-bottom: 1px solid #000;
}
#siteHeader.headerQa {
background-color: yellow;
color: white;
font-size: 24pt !important; // Tried using !important without success...
font-weight: bold;
padding: 5px;
border-bottom: 1px solid #000;
}
siteHeader.headerPrd {
background-color: red;
color: white;
font-size: 24pt;
font-weight: bold;
padding: 5px;
border-bottom: 1px solid #000;
}
I have attempted various methods to achieve this functionality but faced challenges with applying CSS changes. Here are some things I have tried:
string hostName = Request.ServerVariables["Server_Name"];
if (hostName.ToUpper().Contains("DEV") || hostName.ToUpper().Contains("LOCALHOST))
{
siteHeader.InnerText = "FTP Forms -Development";
siteHeader.Attributes["class"] = "header";
Page.Title = "FTP Dev";
}
else if (hostName.ToUpper().Contains("STAGE") || hostName.ToUpper().Contains("LOCALHOST"))
{
siteHeader.InnerText = "FTP Forms - QA";
siteHeader.Attributes["class"] = "headerQa";
Page.Title = "FTP QA";
}
else
{
siteHeader.InnerText = "FTP Forms - Production";
siteHeader.Attributes["class"] = "headerPrd";
Page.Title = "FTP Prod";
}
I also attempted to use JavaScript to change the styling based on the hostname, but encountered issues with applying the CSS:
<script type="text/javascript">
var hostName = location.hostname;
if (hostName.indexOf("dev") > -1) {
document.getElementById("siteHeader").className = "header";
document.getElementById("siteHeader").innerText = "FTP - Forms Development";
} else if (hostName.indexOf("stage") > -1) {
document.getElementById("siteHeader").className = "headerQA";
document.getElementById("siteHeader").innerText = "FTP - Forms QA"
} else {
document.getElementById("siteHeader").style = "background-color: red; color: white; font-size: 24pt; font-weight: bold; padding: 5px; border-bottom: 1px solid #000;";
document.getElementById("siteHeader").innerText = "FTP - Forms Production"
}
</script>