Member Avatar for Blueie

Hello

I am trying to make an alteration to the CSS behind the site.master file. I have the following in my site.master code:

 <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                  ........                
                </div>
            </div>
        </div>

This refers to the fixed bar along the top of my page as in the screenshot attached.

I simply want to change the colour of that bar, presumably this: "navbar navbar-inverse navbar-fixed-top", but I can't locate the CSS file that governs site.master. In the <head> tags of site.master I can see

<webopt:bundlereference runat="server" path="~/Content/css" />

but if I go to the 'Content' folder in Solution Explorer and open the Site.css file, there is no reference at all to 'navbar', or navbar-header'.

How can I customise that bar, please?

daniWeb.jpg 26.34 KB
Edited by pritaeas because: Closed.
  • 4 Contributors
  • 10 Replies
  • 986 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by pritaeas

Recommended Answers

All 10 Replies

Member Avatar for JorgeM

Looks like you are working on an MVC web app. i'm not familiar with MVC, but am with asp.net web forms.

In any case, if you have in-fact located the style sheet (.css file), then you should be at the correct location. if there is no references to navbar, navbar-header... have you tried to add your style properties there?

Member Avatar for Blueie

Hello Jorge

This a normal ASP.NET (VB.NET) project. In my Site.css file, which is here in Solution Explorer (screenshot), I only have:

/* Move down content because we have a fixed navbar that is 50px tall */
body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 280px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }
    .body-content {
        padding: 0;
    }
}

In my Site.master file, however, I have various CSS attributes including div class="navbar navbar-inverse navbar-fixed-top", div ass="container", and others that are not referenced in Content/Style.css.

I imagine they must be referenced elsewhere.

I haven't tried to add my own style properties in Style.css, no.

SiteCSS.jpg 49.88 KB
Member Avatar for JorgeM

If this is not MVC, then i dont understand why you have this decleration. Its not used for web forms.

<webopt:bundlereference runat="server" path="~/Content/css" />

For a standard aspx web form (not MVC), In your master page, you would just point to your style sheet by linking the file in your head section.

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

Then, you would just edit your style sheet and include your styles accordingly.

there is no where else to reference it. Again, i have zero experience with MVC. For aspx web forms, its just like plain HTML.. link directly to your style sheets in the head section.

Member Avatar for Blueie

<webopt:bundlereference runat="server" path="~/Content/css" />

is what is in my Site.master file.

I don't know anything about MVC, either.

The screenshot attached shows the usual asp and aspx.vb files, plus Web config.

It cannot be the same stylesheet. The above line of code shows:

path="~/Content/css" />

but the name of the stylesheet in Solution Explorer is Site.css.

I think I will try styling it in Site.css and do what you said in my Site.master file

Member Avatar for JorgeM

If you are certain you are not building an MVC project, then this ...

 <webopt:bundlereference runat="server" path="~/Content/css" />

does not belong in your master page or any other aspx page in your project. If you create a new, blank web form project, you'll see that when you create a new master page, this will not be included. I've been working with asp.net for some time now and I had to actually look up this webopt control because I've never come accross it before.

Member Avatar for Blueie

Jorge

I have removed that line and things still seem to be working OK. I copied and pasted the code (minus that line), added a new item (right-clicking on Solution Explorer) and pasted the code into that new item.

I have had more difficulty with the CSS file. Again, I added a new item (CSS file) and inserted a link to that external stylesheet. I could see my new CSS file in Solution Explorer (right at the bottom). I previewed it in my browser and the page was distorted, so Ihave had to remove the new CSS file I created and put the styling in the <head> tags of my aspx file.

Member Avatar for Blueie

Jorge, just an update as I learn more about what is going on!

The screenshot Jorge1.jpg shows what the form looks like through my browser (IE11) without this in Site.master:

<webopt:bundlereference runat="server" path="~/Content/css" />

The screenshot Jorge2.jpg shows what the form looks like - and should look like - through my browser (IE11) with that line of code in Site.master

Blue

Jorge2.jpg 28.01 KB Jorge1.jpg 20.66 KB
Member Avatar for JorgeM

Ok, so i definately do not want to steer you in the wrong direction, but I personally have never used the webopt control.

Here is what a typical, very generic aspx page would look like (assuming no code behind page):

<%@ Page Language="c#" trace="false" %>
<script runat="server">

</script>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="path_to_your_style.css">
  </head>
  <body>
      <form runat="server">
          <asp:label id="lbl1" runat="server" cssclass="label"/> 
      </form>
  </body>
</html>

If you note in my example, you simply "link" to your external stylesheet by using the html link element and supplying the relative path.

When you run this example, if hte stylesheet does not load, you can troubleshoot with your browser (hit f12 for dev tools). If you put the incorret path, the style sheet will not load.

Member Avatar for madCoder

The webopt:bundlereference is new in .net 4.5. It is bundling ALL the css in your content folder -- including Bootstrap! Basically it concatenates the CSS files, minifies it (removes unneeded whitespace) and sends it all out in one go instead of several seperate files.

The blue halo seen around the input fields in your picture is a dead giveaway that bootstrap is in use. I'm not certain what order the rules will get loaded in Bootstrap, then Site OR Site, then Bootstrap. Hopefully Site.css gets loaded/appended to the end. As @JorgeM suggested, try adding your CSS overrides to site.css. You might need to rely on !important a lot if Bootstrap is loading last. I don't recommend you modify Bootstrap since 1) the .min version is hard to edit and likely the one being bundled and 2) you might want to upgrade Bootstrap at some point and your edits would be lost.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.