Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

WordPress How to Build a WordPress Theme Converting Static HTML into WordPress Templates Coding the Header and Footer Templates

My main style.css won't work??

Hello, i've watched the video several times.. can't see where i am going wrong but it appears the style.css won't work? yet when I view source the stylesheet is actually on there and shows up when I click it?? like the nav isn't aligned and the footer is all over the place :( Help? Thanks

3 Answers

Thank you!!! Here is the header;

<!DOCTYPE html>

<html> <head>

    <title>
        <?php 
            wp_title( '-', true, 'right' );

            bloginfo( 'name' );

            bloginfo( 'stylesheet_url' );


        ?>
    </title>
    <meta name="viewport" content="width=device-width, initial-scale = 1.0">

    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

<?php wp_head(); ?>

    </head>
<body>

    <div class="container clearfix">
        <header>
            <div class="grid_12 omega none">
                <hgroup>
                    <h1><a href="index.html">Patricia's Kitchen</a></h1>

                </hgroup>
            </div>
            <div class="grid_12 omega">
                <nav>

                </nav>
            </div>
        </header>

<?php

$args = array(
    'menu'=> 'main-menu'
    );

wp_nav_menu( $args );

?>

here is the footer;

        <p>This is the footer</p>
    <footer>
        <div class="grid_12 omega clearfix">
            <div id="twitter" class="grid_4">
                <h5>Twitter</h5>
                <p>We're accepting submissions for the next episode of Treeviews! Submit your website/app for feedback! <a href="#">trhou.se/treeviews</a></p>

                <a href="#" class="post-link">Follow me on Twitter &rarr;</a>
            </div>
            <div id="dribbble" class="grid_4">
                <h5>Dribbble</h5>
                <p>Dribbble Shots</p>
            </div>
            <div id="treehouse" class="grid_4 omega">
                <h5>Treehouse</h5>
                <p>Treehouse Badges</p>
            </div>
        </div>
                    <div id="copyright">
                <p>&copy; Copyright 2013 <a href="#">Treehouse</a>. All Rights Reserved.</p>
            <div class="grid_12 ss-icon omega">
                    <a href="#">&#xF610;</a>
                    <a href="#">&#xF611;</a>
                    <a href="#">&#xF612;</a>
                    <a href="#">&#xF613;</a>
                    <a href="#">&#xF660;</a>
                    <a href="#">&#x2709;</a>
            </div>
            </div>
        </footer>
</body>

</html>

here is the css

/* Theme Name: Portfolio for Allison Grayce Theme URI: http://wptreehouse.com/portfolio-project/ Description: A custom WordPress portoflio site for Allison Grayce built for the Treehouse tutorial series, "How to Build a WordPress Theme." Author: Zac Gordon Author URI: http://blog.teamtreehouse.com/author/zacgordon Version: 1.0 Tags: clean, light, responsive, two-column, custom-post-types, custom-fields, portfolio

License: GNU General Public License v2.0 License URI: http://www.gnu.org/licenses/gpl-2.0.html

This theme goes along with the How to Build a WordPress Theme tutorial series from teamtreehoulse.com */

body { color: #ababab; font-family: 'GoudyRegular', serif; /* 1 */ }

/* ========================================================================== Typography ========================================================================== */

@font-face { font-family: 'GoudyItalic'; src: url('css/webfonts/oflgoudystm-italic-webfont.eot'); src: url('css/webfonts/oflgoudystm-italic-webfont.eot?#iefix') format('embedded-opentype'), url('css/webfonts/oflgoudystm-italic-webfont.woff') format('woff'), url('css/webfonts/oflgoudystm-italic-webfont.ttf') format('truetype'), url('css/webfonts/oflgoudystm-italic-webfont.svg#ofl_sorts_mill_goudyitalic') format('svg'); font-weight: normal; font-style: normal;

}

@font-face { font-family: 'GoudyRegular'; src: url('css/webfonts/oflgoudystm-webfont.eot'); src: url('css/webfonts/oflgoudystm-webfont.eot?#iefix') format('embedded-opentype'), url('css/webfonts/oflgoudystm-webfont.woff') format('woff'), url('css/webfonts/oflgoudystm-webfont.ttf') format('truetype'), url('css/webfonts/oflgoudystm-webfont.svg#ofl_sorts_mill_goudyregular') format('svg'); font-weight: normal; font-style: normal;

} @font-face { font-family: 'brandon_grotesque_bolditalic'; src: url('css/webfonts/brandon_bld_it-webfont.eot'); src: url('css/webfonts/brandon_bld_it-webfont.eot?#iefix') format('embedded-opentype'), url('css/webfonts/brandon_bld_it-webfont.woff') format('woff'), url('css/webfonts/brandon_bld_it-webfont.ttf') format('truetype'), url('css/webfonts/brandon_bld_it-webfont.svg#brandon_grotesque_bolditalic') format('svg'); font-weight: normal; font-style: normal;

}

@font-face { font-family: 'brandon_grotesque_boldregular'; src: url('css/webfonts/brandon_bld-webfont.eot'); src: url('css/webfonts/brandon_bld-webfont.eot?#iefix') format('embedded-opentype'), url('css/webfonts/brandon_bld-webfont.woff') format('woff'), url('css/webfonts/brandon_bld-webfont.ttf') format('truetype'), url('css/webfonts/brandon_bld-webfont.svg#brandon_grotesque_boldregular') format('svg'); font-weight: normal; font-style: normal;

}

@font-face { font-family: 'brandon_grotesque_blackitalic'; src: url('css/webfonts/brandon_blk_it-webfont.eot'); src: url('css/webfonts/brandon_blk_it-webfont.eot?#iefix') format('embedded-opentype'), url('css/webfonts/brandon_blk_it-webfont.woff') format('woff'), url('css/webfonts/brandon_blk_it-webfont.ttf') format('truetype'), url('css/webfonts/brandon_blk_it-webfont.svg#brandon_grotesque_blackitalic') format('svg'); font-weight: normal; font-style: normal;

}

@font-face { font-family: 'brandon_grotesque_blackRg'; src: url('css/webfonts/brandon_blk-webfont.eot'); src: url('css/webfonts/brandon_blk-webfont.eot?#iefix') format('embedded-opentype'), url('css/webfonts/brandon_blk-webfont.woff') format('woff'), url('css/webfonts/brandon_blk-webfont.ttf') format('truetype'), url('css/webfonts/brandon_blk-webfont.svg#brandon_grotesque_blackRg') format('svg'); font-weight: normal; font-style: normal;

}

@font-face { font-family: 'brandon_grotesque_lightitalic'; src: url('css/webfonts/brandon_light_it-webfont.eot'); src: url('css/webfonts/brandon_light_it-webfont.eot?#iefix') format('embedded-opentype'), url('css/webfonts/brandon_light_it-webfont.woff') format('woff'), url('css/webfonts/brandon_light_it-webfont.ttf') format('truetype'), url('css/webfonts/brandon_light_it-webfont.svg#brandon_grotesque_lightitalic') format('svg'); font-weight: normal; font-style: normal;

}

@font-face { font-family: 'brandon_grotesque_lightRg'; src: url('css/webfonts/brandon_light-webfont.eot'); src: url('css/webfonts/brandon_light-webfont.eot?#iefix') format('embedded-opentype'), url('css/webfonts/brandon_light-webfont.woff') format('woff'), url('css/webfonts/brandon_light-webfont.ttf') format('truetype'), url('css/webfonts/brandon_light-webfont.svg#brandon_grotesque_lightRg') format('svg'); font-weight: normal; font-style: normal;

} h1, h2 { margin: 0; }

h1 { font-family: 'brandon_grotesque_lightRg'; text-transform: uppercase; text-align: center; letter-spacing: -2px; } h1 a { color: #474747; }

h2 { color: #ccc; font-family: 'GoudyItalic', serif; /* 1 */ font-weight: normal; font-size: 1.25em; line-height: 1em; text-align: center; }

h3 { font-family: 'brandon_grotesque_lightRg'; text-transform: uppercase; font-size: 3.5em; line-height: 1.25em; margin: 1% 0; color: #000; } h4 { font-family: 'brandon_grotesque_lightRg'; text-transform: uppercase; font-size: 2em; line-height: 1.25em; margin: 2% 0; color: #000; } h5 { font-family: 'GoudyRegular', serif; /* 1 / text-transform: uppercase; font-size: .75em; line-height: 1em; color: #474747; padding: 0 0 2% 0; border-bottom: 1px solid #e6e6e6; } h6 { color: #474747; font-family: 'GoudyRegular', serif; / 1 / font-weight: normal; font-size: 1em; line-height: 1.5em; text-align: left; margin: 20px 0; } img { max-width: 100%; height: auto; } p { font-size: 1.15em; line-height: 1.75em; } ul li { font-size: 1.15em; } a:hover { color: inherit; } .btn { font-family: 'GoudyItalic', serif; / 1 */ font-size: 1em; padding: 10px 25px; margin: 2% 0; display: inline-block; color: #fff; } .btn a { color: #fff; } .btn a:hover { color: #fff; } .pink { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #ee5356; } .blue { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #88e1d8; } .dropshadow { box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.35); } .fade { opacity: 0.5; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; }

.fade:hover { opacity: 1; }

hr { border: none; background-color: #e6e6e6; color: #e6e6e6; height: 1px; }

/* ========================================================================== Header ========================================================================== */

header { margin: 4% 0 0 0; }

nav { display: -webkit-box; -webkit-box-orient:horizontal; padding: 2% 0; border-bottom: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6;
margin: 2% 0 2% 0; }

nav a { font-family: 'GoudyRegular'; display:block; -webkit-box-flex:1; text-align:center; font-size: 1.25; color: #666; }

/* ========================================================================== Homepage ========================================================================== */

.divider { margin: 4% 0 2% 0; }

/* Work ----------- */

#featured {
    text-align: center;
    padding: 2% 0 0 0;
}
#work {
    text-align: center;
}

#featured {border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;}
#featured img {
    margin: 0;
}
#featured-info {
    margin-top: 4%;
  text-align: left;

}
#featured h3, #featured h5, #featured p {
    color: #fff;
}

.spotlight {
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    text-align: left;
    border: 1px solid #e6e6e6;
    padding: 6% 4%;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

.spotlight h4, .spotlight h5, .spotlight p {
    color: #ddd;
    text-align: left;
}

/* Testimonial ----------- */

blockquote {
    font-family: 'GoudyItalic';
    font-size: 1.75em;
    margin: 4% 0;
    border-left: 10px solid #e3e3e3;
    padding-left: 4%;
    color: #474747;
}
cite {
    font-family: 'GoudyRegular', serif; /* 1 */
    font-style: normal;
    text-transform: capitalize;
    font-size: 1.25em;
    line-height: 1em;
    color: #474747;
    margin: 0 0 6% 4%;
 }

/* Articles ----------- */

article { text-align: left; } .excerpt:after { content: "[...]"; } ul.info { padding: 0; font-size: 1em; } ul.info li { list-style: none; margin: 0 2% 0 0; padding: 1% 0; }

ul.info li, .excerpt, .post-link { float: left; }

ul.info a, .post-link { font-family: "GoudyItalic"; } .post-link { font-size: 1em; }

/* ========================================================================== Social ========================================================================== */

twitter p {

  font-family: "GoudyItalic";
  font-size: 1.25em;
  line-height: 1.5em;
  margin: 2% 0;

}

/* ========================================================================== Footer ========================================================================== */

footer { margin-top: 2%; padding: 2% 0; }

copyright {

border-top: 1px solid #e6e6e6;
padding-top: 2%;
text-align: center;
font-family: "GoudyItalic";

}

copyright p {

margin: 1% 0;

}

.ss-icon { font-size: 1.25em ; }

.ss-icon a { color: #ccc; margin-right: 2%; } .ss-icon a:hover { color: #666; }

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

@media only screen and (max-width : 875px) {

#featured {
    padding: 4% 0;
}
#featured .grid_4, #featured .grid_8 {
    width: 100%;
}
#featured .grid_8 {
    margin: 0;
}
#featured-info {
    margin: 0;
}
.grid_6 {
    width: 100%;
}

#sidebar img {
margin: 0 auto;

}

}

/* Smaller ----------- */

@media only screen and (max-width : 600px) {

nav {
    margin: 10% 0;
}

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12{
    width: 100%;
    margin: 2% 0;
}
.push_1, .push_2, .push_3, .push_4, .push_5, .push_6, .push_7, .push_8, .push_9, .push_10, .push_11 {
    margin: 0;
}
.popular {
    display: none;
}

}

Any suggestions would be great thank you!!

Wayne Priestley
Wayne Priestley
19,579 Points

Hi Carina, its more than likely something very simple, could you post your code here so i can take a look.

also here is the functions just incase

<?php

//LOAd theme css

function theme_styles() {

wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css');

wp_enqueue_style( 'normalize', get_template_directory_uri( ). '/css/normalize.css' );
wp_enqueue_style( 'grid', get_template_directory_uri() . '/css/grid.css' );
wp_enqueue_style( 'googlefonts', 'http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy:400,400italic' );

wp_enqueue_style( 'social', get_template_directory_uri() .'/css/webfonts/ss-social.css' );

wp_register_style( 'flexslider', get_template_directory_uri() . '/css/flexslider.css' );
if( is_page( 'home' ) )
    wp_enqueue_style( 'flexslider' );

}

//Load theme Js

function theme_js() {

wp_register_script( 'flexslider', get_template_directory_uri(). '/js/flexslider.js', array('jquery'), '', true);
wp_register_script( 'flexslider', get_template_directory_uri() . '/css/flexslider.css' );
if( is_page( 'home' ) )
    wp_enqueue_script( 'flexslider' );

} wp_enqueue_script( 'theme_js', get_template_directory_uri(). '/js/theme.js', array('jquery'), '', true);

add_action( 'wp_enqueue_scripts', 'theme_js' );

add_action( 'wp_enqueue_scripts', 'theme_styles' );

// Enable custom menu

add_theme_support( 'menus' );

?>