Question posted in 
In my file, there are references to bootstrap styles.
All class references are defaulting to the primary color. To illustrate. this test site, has a button on the top left with class btn btn-success, which should be green.
HTML
<!DOCTYPE html>
<html lang="en" data-ng-app="wtApp">
<head>
<meta charset="utf-8" />
<title>Writer's Tryst, where authors and publishers, producers, agents meet.</title>
<meta name="description" content="A better way for writers to find publishers, producers and agents" />
<link href='https://fonts.googleapis.com/css?family=Lobster+Two:700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Ubuntu:400,500' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="frainversegment" content="!" />
<meta name="google-site-verification" content="yVui_k1sbN4TDHx-yDmol0MzU1QXaTTGlhNa_gVLzUs" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" data-integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" data-crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" data-integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" data-crossorigin="anonymous">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<link rel="stylesheet" href="https://getbootstrap.com/dist/css/bootstrap.css" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/shares.css" />
<link rel="shortcut icon" href="img/icons/writers-tryst.png" />
<!--
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-15499108-1");
pageTracker._trackPageview();
} catch (err) { }
</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-3982825388677642",
enable_page_level_ads: true
});
</script>
-->
</head>
<body data-ng-controller="mainController">
<header>
<nav class="navbar navbar-light">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Writers-Tryst">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img id="logo" src="img/writers-tryst-logo.png" alt="logo" /></a>
</div>
<div class="collapse navbar-collapse" id="Writers-Tryst">
<ul class="nav navbar-nav">
<li class="active"><a id="homepage" href="#"><i class="glyphicon glyphicon-home"></i> Home</a></li>
<li><a href="#writers" class="glyphicon glyphicon-book"> Writers</a></li>
<li><a href="#enablers" class="glyphicon glyphicon-thumbs-up"> Enablers</a></li>
<li><a href="#about" class="glyphicon glyphicon-info-sign"> About</a></li>
<li><a href="#privacy" class="glyphicon glyphicon-info-sign"> Privacy/Rules</a></li>
<li><a href="#contact" class="glyphicon glyphicon-envelope"> Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#log-in"><i class="glyphicon glyphicon glyphicon-log-in"></i> Log-In</a></li>
<li><a id="create-account-link" href="#accounts"><i class="glyphicon glyphicon-user"></i> Create Account</a></li>
<li class="dropdown">
<a href="#" id="drop-toggle-1" class="dropdown-toggle glyphicon glyphicon-user" data-toggle="dropdown" role="button" data-aria-haspopup="true" data-aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="update-profile" href="#update-profile">Update profile</a></li>
<li><a id="manage-uploads" href="#manage-uploads">Manage uploads</a></li>
</ul>
</li>
<li ><a id="reset-pwd-link" href="#reset-pwd"></a></li>
</ul>
</div>
</div>
</nav>
<!--
<div class="google-ad-top">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-3982825388677642"
data-ad-slot="1133448516"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
-->
</header>
<div id="shares">
<!-- Twitter -->
<a href="http://twitter.com/share?url=writers.tryst.ron-tornambe.com&text=<TEXT>&via=<VIA>" target="_blank" title="twitter" class="share-btn twitter">
<i class="fa fa-twitter"></i>
</a>
<!-- Google Plus -->
<a href="https://plus.google.com/share?url=writers.tryst.ron-tornambe.com" target="_blank" title="google+" class="share-btn google-plus">
<i class="fa fa-google-plus"></i>
</a>
<!-- Facebook -->
<a href="http://www.facebook.com/sharer/sharer.php?u=http://writers.tryst.com" target="_blank" title="facebook" class="share-btn facebook">
<i class="fa fa-facebook"></i>
</a>
<!-- StumbleUpon (url, title) -->
<a href="http://www.stumbleupon.com/submit?url=http://writers.tryst.com&title=<TITLE>" target="_blank" class="share-btn stumbleupon">
<i class="fa fa-stumbleupon"></i>
</a>
<!-- Reddit (url, title) -->
<a href="http://reddit.com/submit?url=http://writers.tryst.com&title=<TITLE>" target="_blank" class="share-btn reddit">
<i class="fa fa-reddit"></i>
</a>
<!-- LinkedIn -->
<a href="http://www.linkedin.com/shareArticle?url=http://writers.tryst.com&title=<TITLE>&summary=<SUMMARY>&source=<SOURCE_URL>" target="_blank" title="linked-in" class="share-btn linkedin">
<i class="fa fa-linkedin"></i>
</a>
</div>
<button class="btn btn-success">Hello World</button>
<div>
<div id="message" class="alert m-t-10"></div>
<div id="main" class="content">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div data-ng-view></div>
</div>
</div>
<footer class="panel panel-default">
<div>© 2016 Ronald Tornambe, Inc.</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/common.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="js/pages.js"></script>
<script>
$("#drop-toggle-1").on("click", function (e) {
e.preventDefault();
});
$("#update-profile").on("click", function () {
sessionStorage.setItem("create-or-update", "update");
console.log("session-storage=" + sessionStorage.getItem("create-or-update"))
$("#create-account-link").trigger("click");
});
</script>
</body>
</html>
4
Answers
Buttons with
.btnare green by default in bootstrap, but you have overridden that inmain.csson line 123.You can either change the class of buttons you wish to be blue, or use a different CSS selector for them.
Buttons from twitter-bootstrap-3 have class
.btnplus a second class, in this case.btn-successand you are in yourmain.css(line 123) overriding the class.btnwithbackground-color: blue;My advice to is only change the second class, that is attached to some kind of event/action of button. instead of general
.btn(button)You created
.btnclass in css/main.css and this class overriding class inbootstrap.cssfileNote: If you are using Bootstrap as the base stylesheet, this is not an intended solution to the question! This can, however, highlight potential problem areas with overriding styles in custom stylesheets.
The styles for
.btnare overridden inmain.css. This is caused by loadingmain.cssafterbootstrap.css.From Chrome DevTools:
From this image, you can see that the styles for
.btninmain.cssare given higher priority than those for.btn-successfrombuttons.less(part of Bootstrap’s styles).You can easily change the priority by moving the stylesheet for
main.cssabove the one forbootstrap.css, which will make Bootstrap’s styles higher priority than the customized ones.Here’s what your site looks as is:
And after moving
main.css: