Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Darren Healy
seal-mask
.a{fill-rule:evenodd;}techdegree
Darren Healy
Front End Web Development Techdegree Student 23,565 Points
Posted by Darren Healy
.a{fill-rule:evenodd;}techdegree
Darren Healy
Front End Web Development Techdegree Student 23,565 Points

Loading Up IE Stylesheet in Wordpress

Hi there,

I'm working on a project and I'm looking for a bit of helpful advice for loading up a stylesheet that loads only when the browser detects it is a certain version of IE. I've never done it in WordPress before and I really just need some guidance doing it in the functions.php file for the first time so that I get it right.

The reason for this is that my CSS code (see below, it's a little untidy), specifically the glyphicons display slightly out of place or absolutely huge depending on the webpage, only within IE. I have tested it on chrome and firefox and it looks ok, it's just IE where the issues happen.

So, 

/******************** 
General Styling 
*********************/

body {
  padding-top: 50px;
  padding-bottom: 20px;
  background-color: #F2F2F4;
  font-size: 1.65em;
  line-height: 1.5em;
}

.img-rounded {
    max-width: 100%;
    height: 240px;
}

h2 {
    margin-bottom: 25px;
}

.border-rad {
    border-radius: 15px;
}

.border-rad-side {
    border-radius: 5px;
}

.row {
    margin-bottom: 15px;
}

.widget {
    margin: 10px 0 30px;
}

.callout {
    padding: 35px 0;
    margin-top: 10px;
    text-align: center;
    border: 1px solid #e3e3e3;
    border-right: none;
    border-left: none;
}

.callout.glyphicon {
    margin-left: 10px;
}

.glyphicons.right_arrow:before {
    left: 50%;
    top: -15px;
    font-size: 1.25em;
}

.col-sm-6.ft-copy > h2 {
    margin-top: 3px;
    margin-bottom: 13px;
}

.btn-home {
    margin-top: 5px;
}

.btn-success {
    box-shadow: 0 3px 0 #23812f;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    font-size: 1.5em;
    width: 390px;
    padding: 15px 0;
}


/******************** 
Navigation
*********************/

.navbar {
    padding: 10px;
}

.admin-bar .navbar-fixed-top {
    margin-top: 30px;
    padding: 10px;
}

.navlogo {
    position: relative;
    height: 50px;
    top: -15px;
}

.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
    margin-left: -15px;
    padding-right: 15px;
}

.navbar-nav>li>.dropdown-menu {
    background-color: #F8F8F8;
}

.navbar-default .navbar-nav>li>a {
    color: #777;
    font-weight: bold;
}


/******************** 
Jumbotron Styling
*********************/

.jumbotron {
    background-image: url('http://localhost/localgtwstorage.co.uk/wp-content/uploads/2014/10/iStock_000017864843LargeResize.jpg');
    background-repeat: no-repeat;
    background-position: center;
    padding: 200px 0 140px 0;
    margin-bottom: 70px;
}

.jumbobg {
    background-color: rgba(0, 0, 0, 0.9);
    border-radius: 15px;
    color: #fff;
    padding: 0 0 10px 0;
}


/******************** 
Homepage divs, icons, backgrounds, buttons
*********************/

/*********** Home divs ***********/

.ft-icon-1 {
    width: 94%;
    height: 196px;
    position: relative;
    background: #B19CD9;
    margin-bottom: 45px;
}

.ft-icon-2 {
    width: 94%;
    height: 196px;
    position: relative;
    background: #F5B1B6;
    margin-bottom: 45px;
}

.ft-icon-3 {
    width: 94%;
    height: 196px;
    position: relative;
    background: #B8D8EB;
    margin-bottom: 45px;
}

.ft-icon-4 {
    width: 94%;
    height: 196px;
    position: relative;
    background: #78CAC6;
    margin-bottom: 45px;
}


/*********** Homepage Glyphicons ***********/

.glyphicons.cargo:before,
.glyphicons.beer:before,
.glyphicons.package:before,
.glyphicons.folder_open:before {
    font-size: 8em;
    top: 25px;
    left: -35px;
}

.home-icons {
    text-align: center;
}


/********************* 
Footer Section
*********************/

.footerjustification > div {
    text-align: center;
    margin: 25px 0 0 0;
}

.glyphicon-envelope,
.glyphicon-earphone {
    font-size: 3.25em;
    color: #EBECED;
}

.footbackground {
    background-color: #404040;
    border-radius: 15px;
    max-width: 100%;
    color: #EBECED;
}

/*.social.facebook:before,
.social.twitter:before,
.social.google_plus:before,
.social.linked_in:before {
    font-size: 2em;
    margin: 5px;
}*/

/*********** Horizontal Rule **********/

hr {
    border: 0;
    height: 1px;
    background: #EBECED;
/*    background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); 
    background-image:    -moz-linear-gradient(left, #ccc, #333, #ccc); 
    background-image:     -ms-linear-gradient(left, #ccc, #333, #ccc); 
    background-image:      -o-linear-gradient(left, #ccc, #333, #ccc); */
}


/*********** Sidebars ***********/

.sidebar {
    background-color: #B8D8EB;
    border-radius: 15px;
    margin-top: 40px;
    color: #444;
    padding-top: 2px;
    padding-bottom: 0.125px;
}

.sidebar h3 {
    color: #000;
}

.sidebar p {
    font-size: 0.875em;
}

.well {
    margin-top: -20px;
}


/*********** Panels ***********/

.panel-default>.panel-heading {
    color: #333;
    background-color: #F5B1B6;
    border-color: #ddd;
}

.panel-default>.panel-heading:hover {
    color: #333;
    background-color: #F76873;
    border-color: #ddd;
}

.panel-group {
    margin-bottom: -20px;
}

.panel-title>a {
    color: inherit;
    text-decoration: none;
}

/*********** Media Queries ***********/

@media (max-width: 372px) {

    /*********** Navbar ***********/
    .admin-bar .navbar-fixed-top {
        margin-top: 46px;
        padding: 10px;
    }

    .row {
        margin-bottom: -5px;
    }

}


@media (max-width: 549px) {

    /*********** Navbar ***********/
    .admin-bar .navbar-fixed-top {
        margin-top: 46px;
        padding: 10px;
    }

    .row {
        margin-bottom: -5px;
    }

}


@media (max-width: 673px) {

    /*********** Navbar ***********/
    .admin-bar .navbar-fixed-top {
        margin-top: 46px;
        padding: 10px;
    }

}


@media (max-width: 782px) {

    /*********** Navbar ***********/

    .admin-bar .navbar-fixed-top {
        margin-top: 46px;
        padding: 10px;
    }

    #wpadminbar {
        position: fixed;
    }

    .btn-success {
        width: 85%;
        font-size: initial;
    }

}


@media (min-width: 372px) {


}


@media (min-width: 480px) {


}


@media (min-width: 640px) {


}

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {

    /*********** Page divs, icons, backgrounds, buttons ***********/

    /*********** Business ***********/
    .biz-div {
        max-width: 100%;
        height: 196px;
        position: relative;
        background: #B19CD9;
        margin-bottom: 15px;
        margin-top: 15px;
    }

    .biz-div>div {
        text-align: center;
    }

    .glyphicons.shop:before {
        font-size: 7em;
        margin: 30px 0px 0px -35px;
    }

    /*********** Student ***********/
    .stud-div {
        max-width: 100%;
        height: 196px;
        position: relative;
        background: #B8D8EB;
        margin-bottom: 15px;
        margin-top: 15px;
    }

    .stud-div>div {
        text-align: center;
    }

    .glyphicons.underwear:before {
        font-size: 7em;
        margin: 30px 0px 0px -35px;
    }

    /*********** Shredding ***********/
    .shred-div {
        max-width: 100%;
        height: 196px;
        position: relative;
        background: #FF6961;
        margin-bottom: 15px;
        margin-top: 15px;
    }

    .shred-div>div {
        text-align: center;
    }

    .glyphicons.saw_blade:before {
        font-size: 8em;
        margin: 20px 0px 0px -35px;
    }

    /*********** Document ***********/
    .doc-div {
        max-width: 100%;
        height: 196px;
        position: relative;
        background: #78CAC6;
        margin-bottom: 15px;
        margin-top: 15px;
    }

    .doc-div>div {
        text-align: center;
    }

    .glyphicons.sort:before {
        font-size: 7em;
        margin: 30px 0px 0px -35px;
    }

    /*********** Removals ***********/
    .rem-div {
        max-width: 100%;
        height: 196px;
        position: relative;
        background: #FA9D58;
        margin-bottom: 15px;
        margin-top: 15px;
    }

    .rem-div>div {
        text-align: center;
    }

    .glyphicons.truck:before {
        font-size: 7em;
        margin: 30px 0px 0px -35px;
    }


}


/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {

    .glyphicons.hand_right:before {
        font-size: 4em;
        top: 31px;
        left: 28px;
    }

    /*********** Page divs, icons, backgrounds, buttons ***********/

    /*********** Business ***********/
    .biz-div {
        max-width: 100%;
        height: 196px;
        position: relative;
        background: #B19CD9;
        margin-bottom: 15px;
        margin-top: 15px;
    }

    .biz-div>div {
        text-align: center;
    }

    .glyphicons.shop:before {
        font-size: 7em;
        margin: 30px 0px 0px -35px;
    }

    /*********** Student ***********/
    .stud-div {
        max-width: 100%;
        height: 196px;
        position: relative;
        background: #B8D8EB;
        margin-bottom: 15px;
        margin-top: 15px;
    }

    .stud-div>div {
        text-align: center;
    }

    .glyphicons.underwear:before {
        font-size: 7em;
        margin: 30px 0px 0px -35px;
    }

    /*********** Shredding ***********/
    .shred-div {
        max-width: 100%;
        height: 196px;
        position: relative;
        background: #FF6961;
        margin-bottom: 15px;
        margin-top: 15px;
    }

    .shred-div>div {
        text-align: center;
    }

    .glyphicons.saw_blade:before {
        font-size: 8em;
        margin: 20px 0px 0px -35px;
    }

    /*********** Document ***********/
    .doc-div {
        max-width: 100%;
        height: 196px;
        position: relative;
        background: #78CAC6;
        margin-bottom: 15px;
        margin-top: 15px;
    }

    .doc-div>div {
        text-align: center;
    }

    .glyphicons.sort:before {
        font-size: 7em;
        margin: 30px 0px 0px -35px;
    }

    /*********** Removals ***********/
    .rem-div {
        max-width: 100%;
        height: 196px;
        position: relative;
        background: #FA9D58;
        margin-bottom: 15px;
        margin-top: 15px;
    }

    .rem-div>div {
        text-align: center;
    }

    .glyphicons.truck:before {
        font-size: 7em;
        margin: 30px 0px 0px -35px;
    }
}


/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

    /*********** Page divs, icons, backgrounds, buttons ***********/

    /*********** Business ***********/
    .biz-div {
        max-width: 100%;
        height: 196px;
        position: relative;
        background: #B19CD9;
        margin-bottom: 15px;
        margin-top: 15px;
    }

    .biz-div>div {
        text-align: center;
    }

    .glyphicons.shop:before {
        font-size: 7em;
        margin: 30px 0px 0px -35px;
    }

    /*********** Student ***********/
    .stud-div {
        max-width: 100%;
        height: 196px;
        position: relative;
        background: #B8D8EB;
        margin-bottom: 15px;
        margin-top: 15px;
    }

    .stud-div>div {
        text-align: center;
    }

    .glyphicons.underwear:before {
        font-size: 7em;
        margin: 30px 0px 0px -35px;
    }

    /*********** Shredding ***********/
    .shred-div {
        max-width: 100%;
        height: 196px;
        position: relative;
        background: #FF6961;
        margin-bottom: 15px;
        margin-top: 15px;
    }

    .shred-div>div {
        text-align: center;
    }

    .glyphicons.saw_blade:before {
        font-size: 8em;
        margin: 20px 0px 0px -35px;
    }

    /*********** Document ***********/
    .doc-div {
        max-width: 100%;
        height: 196px;
        position: relative;
        background: #78CAC6;
        margin-bottom: 15px;
        margin-top: 15px;
    }

    .doc-div>div {
        text-align: center;
    }

    .glyphicons.sort:before {
        font-size: 7em;
        margin: 30px 0px 0px -35px;
    }

    /*********** Removals ***********/
    .rem-div {
        max-width: 100%;
        height: 196px;
        position: relative;
        background: #FA9D58;
        margin-bottom: 15px;
        margin-top: 15px;
    }

    .rem-div>div {
        text-align: center;
    }

    .glyphicons.truck:before {
        font-size: 7em;
        margin: 30px 0px 0px -35px;
    }

}

If I haven't clarified anything please let me know.

1 Answer

Rich Bagley
Rich Bagley
25,869 Points

Hi Darren,

Hopefully wpscholar's code on GitHub Gist is what you're looking for.

Thanks

-Rich

Rich Bagley
Rich Bagley
25,869 Points

No problem. Happy to help.