WordPress Bootstrap theme not using styles

3 Views

I downloaded this template for use with WordPress. It’s exactly what I want (except for the colour), a base WordPress theme that I can modify to suit the design given to me by our designer.

I have noticed that my styles are not being applied to elements. Only some things are being applied. My head tag – of the resulting page, not in WordPress – looks like this (for sake of clarity, I’ve only included the basics):

Read More
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>WP | Just another WordPress site</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="pingback" href="http://siteurl/xmlrpc.php">

    <!-- wordpress head functions -->
    <link rel="stylesheet" id="bootstrap-css" href="http://siteurl/wp-content/themes/wordpress-bootstrap-master/library/css/bootstrap.css?ver=1.0" type="text/css" media="all">
    <link rel="stylesheet" id="wpbs-style-css" href="http://siteurl/wp-content/themes/wordpress-bootstrap-master/css/style.css?ver=1.0" type="text/css" media="all">
    <!-- more stuff -->
    <!-- end of wordpress head -->
    <!-- custom styles -->
    <link rel="stylesheet" type="text/css" href="http://siteurl/wp-content/themes/wordpress-bootstrap-master/css/editor-style.css">
    <link rel="stylesheet" type="text/css" href="http://siteurl/wp-content/themes/wordpress-bootstrap-master/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="http://siteurl/wp-content/themes/wordpress-bootstrap-master/css/fonts.css">
    <!-- end of custom styles -->
    <!-- a bunch of IE fallbacks -->
</head>

I was always under the impression that a) the last stylesheet takes priority over those loaded before it and b) a specifically targeted style overwrites a group style. Now in my custom stylesheet (style.css) loaded in the header, I have this piece of CSS: 

a.navbar-brand {
    font-family: lao_uiregular;
    font-size: 1.7em;
    color: #2a73ba;
    text-transform: uppercase;
}

But the colour isn’t showing up. I know I can force it with !important, but imagine how untidy that’ll look if everything has !important at the end. When I inspect element in Google Chrome, it shows this in my Styles-tab. 

media="all"
@media (min-width: 768px) //bootstrap.css
.navbar > .container .navbar-brand {
    margin-left: -15px;
}
localhost/media="all" //bootstrap.css
.navbar-default .navbar-brand {
    color: #777777;
}
localhost/media="all" //style.css
.navbar-brand {
    font-family: lao_uiregular;
    font-size: 1.7em;
    color: #2a73ba;
    text-transform: uppercase;
}

So according to Google (and all the other broswers), my bootstrap file is taking priority over any other stylesheet.

How can I fix this? I honestly do not want to add !important to everything because it’s untidy and it feels like bad programming practice. If I need to post any other code, please comment and I will do that. I am kind of new to WordPress so don’t know what is required to fix the issue.

Post Views: 3

Related posts

Leave a Reply

1 comment

  1. This is due to specificity, the bootstrap styles are more specific than your styles which causes them to take preference. As your custom stylesheets are included after the bootstrap ones you can override the bootstrap styles by matching the specificity of the selectors. So change .navbar-brand to .navbar-default .navbar-brand.

    HTML:

    <ul class="navbar-default">
    <li><a class="navbar-brand" href="#">This will be blue</a></li>    
    <li><a class="navbar-brand2" href="#">This will be red</a></li> 
</ul>

    CSS:

    .navbar-default .navbar-brand {
    color: red;
}
/*This will work*/
.navbar-default .navbar-brand {
    color: blue;
}
.navbar-default .navbar-brand2 {
    color: red;
}
/*This won't work*/
.navbar-brand2 {
    color: blue;
}

    JS Fiddle: http://jsfiddle.net/dtz7Ld9n/

    For more information take a look at CSS Specificity: Things You Should Know