Twitter Bootstrap question

[rouse]

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

[AleMonteiro]

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.

[<M/>]

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

[JorgeM]

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.

[rouse]

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.

[<M/>]

can you send the link?

[<M/>]

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

[<M/>]

or at least assist you :)

[rouse]

I just uploaded this to a directory at:
http://rouse.ws/coopCareBootstrap/index01.html
please take a look and see if you can help.
Thanks
WBR

[bootstraptor]

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