How do you change the theme and colors of Site.Master in ASP.NET / C#?

Question

I have just started ASP .NET recently, I already know C# HTML and CSS so it wasn't too difficult to get a simple site running. All the online tutorials and documentation I have found , is either completely visual using the vs2005 ~ 2010 designers (I hate the designers) or mostly designing and some parts in VB .NET (I am er... not too keen on VB .NET). Overall , most only cover the basic and simple parts of web development , so I am getting problems in mastering the api. Anyway the thing that is bothering me the most is that I can't change the appearance of the web controls, the css properties work in some cases but not in all. The Site.Master part is almost completely unchanged. Screenshot:

screenshot

How do I change the blue and light blue colors of Site.Master?

Answer 1

Many of the elements I was looking for were in the bootstrap.css file.

However, I modified my site.css to overwrite elements of those style.

I'm using Visual Studio 2013 Professional.

This link was helpful. http://forums.asp.net/t/2009287.aspx?Changing+bootstrap+css

.navbar-inverse { 
    background-color: #FFF; 
    }

.navbar-inverse li { 
    font-weight:bold;
    }

Answer 2

You can open up site.master just like you would any other html page. In visual studio designer, you can do code view (html). Once in there you can make changes to your stylesheet/html page (in this case your master file) according to whatever elements you need to change. Im assuming you know htm/ css as you stated in your question.

Another way to quickly check html elements is to open the page in safari/chrome/firefox/opera, right click on the element of interest and "inspect element". Itll tell you what you need to change.

Btw: <asp:menu converts to a div. Set a class for this element then add it to your stylesheet.

Answer 3

From the looks of things, you are using the basic Web Application website which Visual Studio produces for you when creating a new project.

Going on this assumption, you need to look for the Site.css file in the /Content/ folder. Inside this, will be all the styles used for the various elements of the site.

I think the areas you are wanting to change are the #header , #header h1', #menucontainer , ul#menu`

Just change the background and color properties to the colour you want. Also change the color of the border

Answer 4

Site.Master.cs:

    protected void Page_Load(object sender, EventArgs e)
    {

        foreach (MenuItem m in NavigationMenu.Items)
        {
            if (m.NavigateUrl.ToString() == "~" + HttpContext.Current.Request.Url.LocalPath.ToString())
            {
                m.Selected = true;
            }
            else
            {
                m.Selected = false;
            }
        }

        this.DataBind();
    }

Site.css:

Besides these two, I removed the "div.menu ul li a:hover" selector, the "div.menu ul li a:visited" selector and the "div.menu ul li a:active" selector.

div.menu ul li a.selected
{
    background-color: #867F27;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

div.menu ul li a
{
    background-color: #7E5B33;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

Answer 5

Please read and learn1.

1. ASP.NET Theme and Skin .
2. Walkthrough: Customizing a Web Site Using Themes in Visual Studio
3. How to: Apply ASP.NET Themes
4. How to: Disable ASP.NET Themes
5. How to: Apply ASP.NET Themes Programmatically
6. Walkthrough: Creating User-Selectable Themes
7. How to: Define ASP.NET Page Themes