Bootstrap Theme Editing

[kwikstand]

What is the best way to change the shortcuts color? more specifically, the nav-pills.


Thanks,

Scott

[Katie]

Do you use an add-on that helps you identify the CSS for any element on the page? It is almost impossible to work with on a page without the use of something like Firefox's Firebug or Inspector add-ons. Click on any element (link, layout, ect) and it will show you in a separate pane where the CSS code is coming from. Then you can temporarily change the CSS directly on the webpage. If it is what you want, then it will also show you the file, line number, and code to change permanently.

[meer2005]

You can edit the navs.less and add a direct color or change using a variable.
Find:

Code: Select all

.nav-pills {
  > li {
      padding-top: 7px;
    float: right;

    // Links rendered as pills
    > a {color:#000;
      border-radius: @nav-pills-border-radius;
    }
    + li {
      margin-left: 2px;
    }

Code: Select all

.nav-pills {
  > li {
      padding-top: 7px;
    float: right;

    // Links rendered as pills
    > a {color:#000; //Changed text color black
      border-radius: @nav-pills-border-radius;
    }
    + li {
      margin-left: 2px;
    }

[kwikstand]

Thanks guys. I already figured out a way to do it. Perhaps it isn't the right way to do it. Does it matter? Should I change it?

I didn't know what "pills" are. I usually take them for a headache.

Code: Select all

#storeHeader {
    .shortcuts {
        .pull-right;
        padding:5px 0 10px 0;
        background:url(images/shortcuts_bg_grey.jpg) top repeat-x;//Specifies shorcuts background
        li > a > i {
            color: white;//Changes icon color of shortcuts in top right
            .glyphicon;
            &:before {
                margin-right:5px;
            }

My site is almost done. You can see it here: http://www.contractors-solutions.net/