Changing bootstrap.css

Question

Blueie 13 Junior Poster

10 Years Ago

Hello

There seems to be a problem with the editing and posting facility here - the page has asked me to start a new discussion and not allowing me to reply, but this is a follow on from:

https://www.daniweb.com/web-development/aspnet/threads/484864/site.master-file-question#post2121613

Thanks madCoder for your explanation. That accounts for the wild difference in how the form is displayed.

When I load the form up in my browser and go to View Code, I see this:

 <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                   <!--<a href="../" class="navbar-brand">Application name</a>-->
                </div>
                <div class="navbar-collapse collapse">
                   <!--<ul class="nav navbar-nav">
                        <li><a href="../">Home</a></li>
                        <li><a href="../About">About</a></li>
                        <li><a href="../Contact">Contact</a></li>
                    </ul>-->

                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="Register">Register</a></li>
                                <li><a href="Login">Log in</a></li>
                            </ul>

                </div>
            </div>
        </div>

Those attributes, such as 'navbar-inverse' and 'navbar-fixed-top', are only available in bootstrap.css. When I copy and paste bootstrap.css into a Word document, it fills 110 pages.

What should I be looking for in bootstrap.css in order to change that bar colour?

Many thanks.

asp.net

4 Contributors
9 Replies
828 Views
3 Days Discussion Span
Latest Post 10 Years Ago Latest Post by Blueie

mattster 195 Practically a Master Poster

10 Years Ago

That's wierd, it's open for me to reply?

madCoder 17 Junior Poster

10 Years Ago

Line 9 in the listing above is likely a syntax error.

Simply uncomment the H1 element on line 7 for a title heading.

You can't have more than one HEAD element in a document. That HEAD element already exists in the master page.

Check your master page to see if it contains a content area that lies within the HEAD element. This is pretty common. Add your <style> element to that content area if you wish to make the change on just one page. If, as I suspect, you want to change the nav bar for your entire site, then simply add the style element to the master page itself AFTER the webopt:bundlereference.

JorgeM 958 Problem Solver

10 Years Ago

Register.aspx, remain unaffected. They should be white and then underlined when the mouse is over them.

Do you have this site online to take a look? You could also use your browser's dev tools to inspect the styling that is applied to the element.

When you have a lot of styles applied to different selectors, there is a order of precedence that is applied. it could be that some other style is overriding the .nav class selector you showed in your example.

Reply to this topic

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.

Blueie 13 Junior Poster · Answer 1 · 2014-09-16T18:17:07+00:00

Thanks for your reply!

I have actually left bootstrap.css alone and placed this:

.navbar-inverse { 
    background-color: #BD2CBB;

}

in Site.css.

Then I placed this in Register.aspx (the page that the bar and Web form appear on

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">        

<link href="<%= ResolveUrl("~/Content/Bootstrap.css") %>" rel="stylesheet" type="text/css" />

<link href="<%= ResolveUrl("~/Content/Site.css") %>" rel="stylesheet" type="text/css" />

<--<h2><%: Title %>.</h2>-->

<%:title></%>       

</asp:Content>

without <head> tags. I get an error with </asp:Content> saying that a semi- colon ; is expected.

If I include the <head> tags, I get a green underline error on the opening <head> tag: 'Text is not allowed between the opening and closing tags for element head'.

Blueie 13 Junior Poster · Answer 2 · 2014-09-17T17:04:19+00:00

Thanks for your advice madCoder - I will give it a try!

Blueie 13 Junior Poster · Answer 3 · 2014-09-19T17:42:41+00:00

Hello

I have placed my <style></style> script in the <head> tags on Site.master but the two text links on my main page, Register.aspx, remain unaffected. They should be white and then underlined when the mouse is over them.

This is what I have:

 </asp:PlaceHolder>

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

    <style type="text/css">

.nav a:link { color: #ffffff; text-decoration: none; }
.nav a:hover { color: #ffffff; text-decoration: underline !important; }

p.center {
    text-align: center;
}

</style>

What is strange is that that other CSS class attribute, text-align: center; DOES work -the text IS centered!

When the .nav a:link and .nav a:hover didn't work, I created a new stylesheet with the above script in it and I can see it in Solution Explorer, but that has not affected the two text links I want to style, either.

Blueie 13 Junior Poster · Answer 4 · 2014-09-19T19:09:30+00:00

It's not online Jorge or even compiled.

I am going through the 'inspectors' of IE11 and Chrome, but not too sure what I am looking for!

The two links I am aiming to stylise are these in my Site.master file:

 <ul class="nav navbar-nav navbar-right">

 <li><a runat="server" href="~/Account/Register">Register</a></li>
 <li><a runat="server" href="~/Account/Login">Log in</a></li>

 </ul>

So what I need to locate in bootstrap.css are the CSS class properties for this:

"nav navbar-nav navbar-right">

That's right, isn't it?

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 5 · 2014-09-19T19:46:50+00:00

Yes is the simplified answer. Hard to say without seeing the whole picture. My point was that if there are various styles being applied from various sources, what you expect to be applied may not be the actual result. Using your browser's dev tools would be of much help. When you inspect the element, you should be able to see the styles (and in order) that are applied to the element. I prefer Chrome over IE, but that's up to you.

That would be the first place i take a look at when I have an element that's not being styled as I anticipated.

Blueie 13 Junior Poster · Answer 6 · 2014-09-19T21:11:32+00:00

Jorge

Do you think this line in bootstrap may be relevant (screenshot).

The bootstrap code seems to refer to the code below in Site.master whose two links, 'Register' and 'Log in', I am trying to stylise:

<div class="navbar-collapse collapse">
<!--<ul class="nav navbar-nav">
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Contact">Contact</a></li>
</ul>-->

<asp:LoginView runat="server" ViewStateMode="Disabled">
<AnonymousTemplate>
<ul class="nav navbar-nav navbar-right">
<li><a runat="server" href="~/Account/Register">Register</a></li>
<li><a runat="server" href="~/Account/Login">Log in</a></li>
 </ul>
</AnonymousTemplate>

Thanks again for your time.