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 How to Build a WordPress Theme Converting Static HTML into WordPress Templates Coding the Header and Footer Templates

Posted by Carina Gerrelli
Carina Gerrelli
158 Points

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

Carina Gerrelli
Carina Gerrelli
158 Points

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
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.

Carina Gerrelli
Carina Gerrelli
158 Points
Carina Gerrelli
Carina Gerrelli
158 Points

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' );

?>