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

Bradley Maravalli
Bradley Maravalli
8,927 Points
Posted by Bradley Maravalli
Bradley Maravalli
8,927 Points

Need CSS for Bootstrap 4? For your style.css file, copy and paste the code below.

As of September 2017, insert the following code into your style.css file. Enjoy!

NOTE: For marking a current page, I use an underline rather than a black background.

/*
Theme Name: Bootstrap to WordPress
Theme URI: http://wptreehouse.com/from-bootstrap-to-wordpress
Author: Zac Gordon
Author URI: http://wp.zacgordon.com/
Description: Example theme for Treehouse course on how to convert static Bootstrap site into dynamic WordPress theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bootstrap-to-wp

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/


/* GENERAL */
body {
  padding-top: 50px;
  padding-bottom: 20px;
}

/* ADMIN BAR */
.admin-bar nav.fixed-top {
    margin-top: 30px;
}
@media screen and (max-width: 782px)  {
    .admin-bar nav.fixed-top {
        margin-top: 44px;
    }
}

/* NAVBAR */
@media screen and (max-width:768px) {
    .navbar-nav {
        margin-top: 5px;
    }
}

/* SUB MENU */
@media (min-width:768px) {
    .sub-menu {
        display: none;
        position: absolute;
        background: #222;
        padding: 10px 15px;
        width: 200px;       
    }
    li:hover .sub-menu {
        display: block;
    }
}
.sub-menu li {
    margin-bottom: 10px;
    list-style: none;
}
.sub-menu li:last-child {
    margin-bottom: 0;
}
.sub-menu a  {
    color: #999;
    text-decoration: none;
}
.sub-menu a:hover  {
    color: #fff;    
}
@media screen and (max-width:768px) {
    .sub-menu li {
        margin-bottom: 0px;
    }
}
ul.sub-menu {
    margin-left: -20px;
}


/* CURRENT MENU ITEM */
.current-menu-parent .current-menu-item a {
    color: #fff;
    font-weight: bold;
}
.current-menu-item > a {
    color: white !important;
    padding-bottom: 4px;
    border-bottom: 2px solid white;
}

/* MENU ITEM */
.menu-item > a {
    text-decoration: none;
}
.menu-item > a {
    color: #999d9d;
}
@media (min-width: 768px) {
    .navbar-nav .menu-item {
        padding-right: .5rem;
        padding-left: .5rem;
    }
}