Change div css based on hostname

Question

I am trying to change my site master header depending on whether it is being hosted on dev QA or production. Here is the html:

<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>

The relevant css in my .css file, I have tried this without #siteHeader as well.

#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; // I tried important to no avail...
    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;
}

Here are the things I have tried. CodeBehind Site.Master.cs, I have tried this in the Page_load, Pre_Init and master_Page_PreLoad and it works on my localhost and dev but not QA, I didn't try on Prod for obvious reasons. Also, the innerText is changed as it should be but not the CSS.

    string hostName = Request.ServerVariables["Server_Name"];

    if (hostName.ToUpper().Contains("DEV") || hostName.ToUpper().Contains("LOCALHOST)) // tested on local like this for each if statement.
    {
        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 tried commenting that out and doing it in JavaScript which also changed the inner text but not the CSS. I even tried making it inline style once also to no avail. This did not work on my localhost or the server. On LocalHost the else should take effect

<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>

You may want to change course completely and use environment specific web.configs: http://stackoverflow.com/questions/305447/using-different-web-config-in-development-and-production-environment — JoshNaro, Mar 03 '16 at 16:26
I already have separate configs for the connection strings, are you saying use a different site.master and specify it with the web.config? Or is there a way to target a specific html element from the web.config? — Charles Driver Jr., Mar 03 '16 at 16:40
You could use AppSettings to store your header class and text values. — JoshNaro, Mar 03 '16 at 16:46
I'm not sure how to apply your suggestion. Something like ` ` — Charles Driver Jr., Mar 03 '16 at 17:05
And then use web.config transformation rules for QA and production to change the values. — JoshNaro, Mar 03 '16 at 18:31
Ok, I need to study up on transformation and then I'll post to let you know if it worked. — Charles Driver Jr., Mar 03 '16 at 18:38
@JoshNaro See my answer below. I decided not to use the web.config option because I have to wait for an admin to create a job in Repliweb before I would be able see the effects. However, I may still end up doing it that way since I still have to wait for the config transformation to test the DB connections on QA. — Charles Driver Jr., Mar 04 '16 at 16:34

score 0 · Answer 1 · answered Mar 04 '16 at 16:30

The solution for my application was to override the Page.Render() method in my Site.Master.cs.

protected override void Render(HtmlTextWriter writer)
{
    string hostName = Request.ServerVariables["Server_Name"];

    if (hostName.ToUpper().Contains("DEV")) // tested on local like this for each if statement.
    {
        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";
    }
    base.Render(writer);
}

Change div css based on hostname

1 Answers1