I am using twitter boostrap for a conversion project that I am workng on. I need to change the color of the Nav-bar, the links color, hover color of the links and finally the default size of the text of the links. Can you point me to a tutorial to make those changes, and if not a collection of the selectors in the CSS file to adjust.
Thanks

Recommended Answers

The best way to find out what you need to change is to use a HTML element inspector. I suggest FireBug for Firefox or developer's tools for IE (I prefer Firebug). I think Chrome and Safari must have something similiar too.

In example, using FireBug:
1. Open the page
2. …

Jump to Post

Use your browser's web development tools... firebug is prefered

Jump to Post

Chrome's "developer tools" are pretty good and included in the browser (Ctrl-Shift-I), or click on Tools, "Developer Tools". You can inspect as with the other tools mentioned, and make changes to the page's settings. Great for testing and debugging.

Jump to Post

All 9 Replies

The best way to find out what you need to change is to use a HTML element inspector. I suggest FireBug for Firefox or developer's tools for IE (I prefer Firebug). I think Chrome and Safari must have something similiar too.

In example, using FireBug:
1. Open the page
2. Open Firebug ( F12 )
3. Click in the 'Inspect Element' tool (Second button from the left)
4. Click the element you want to inspect
5. Read the styles that are applied to the element

This way you can see what css classes are being applied to the element. You can even change the properties at run time and see the results.

Use your browser's web development tools... firebug is prefered

Chrome's "developer tools" are pretty good and included in the browser (Ctrl-Shift-I), or click on Tools, "Developer Tools". You can inspect as with the other tools mentioned, and make changes to the page's settings. Great for testing and debugging.

I was able to find the text color by using chrome as suggested above, but I am not able to locate the hove state which is the problem that I have on hand.
Thanks.

can you send the link?

I will make a moment to solve this for you...

or at least assist you :)

Here style from Bootstrap that you need to change what you want:
Put it under Bootstrap.css style in your html

<style>

/* NAV */
.navbar-inner {
    background: #fafafa;  /* ADD COLOR HERE in HEX# or grba() */
}

/* LINKS */

.navbar .nav > li > a {
        float: none;
        padding: 15px 20px 15px;
        color: #777777; /*here link color*/
        text-decoration: none;
        text-shadow: none;
        font-size:14px;
        font-wight:bold;
        text-transform:uppercase;
    }
    .navbar .nav > .active > a, 
    .navbar .nav > .active > a:hover, 
    .navbar .nav > .active > a:focus {
        color: #333;
        text-decoration: none;
        background-color: #fff;
        -webkit-box-shadow:  none;
            -moz-box-shadow:   none;
                box-shadow:  none;
    }
    /************* NAVBAR BRAND ************/
    .navbar .brand {
        padding: 15px 0px 15px;
        margin-left:0px;
            color: #777777; /*brand  color*/
    }
</style>

Put it in your *.html file

You can find free samples examples bootstrap templates on bootstrap samples

Be a part of the DaniWeb community

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