CODEWITHSUNDEEP
csswordpressthemes
ahnbizcad
ahnbizcad

Reputation: 10797

Why doesn't WordPress (.org) recognize my css stylesheet?

I'm making a wordpress template from scratch. I've eliminated many of the files and kept in just the header.php, footer.php, index.php, and style.css to rule out many of my potential problems.

I've played with the code, looked up questions, googled for my solution, but I'm not sure why my style isn't being recognized when i go to my site

the following are my 4 files:

style.css

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

/* MAIN STYLE */

html {
    font-size: 20px;
}

body {

}

#bodywrapper {
    background:     gray;
    font-family:    arial, sans-serif;
    font-size:      5em;
}

header {
    height:20em;

    background: #000;
    color: #fff;
    margin: 0 auto;
}

#nav {

}
#nav ul {
    list-style-type:    none;
}
#nav ul li {
    display:    inline-block;
    padding:    1em;
}
#nav ul li a{
    padding:    1em;
    text-align: center;
    text-decoration:none;
}
#nav ul li a div{
    height:     5em;
    width:      auto;
    padding:    1em;
    background-color: black;
}

#sandwichwrapper {
    margin: 2em;
    border: 1em solid black;
}

#sidebar {
    float:  right;
    width:  15em;
    margin: 2em;
    border: 1em solid green;
}

#main {
    float:  right;
    width:  15em;
    margin: 2em;
    border: 1em solid blue;
}

#comments{
    clear:  both;
    margin: 2em;
    border: 1em solid yellow;
}

#comment-form{

}

footer {
    clear:      both;
    margin:     0 auto;
    padding:    1em;
    background: #000;
    color:      #fff;
}





/* BUNDLED STYLES */

 header, footer{
    width:100%;
    margin:0 auto;
    padding: 5em;
    overflow:auto;
}

nav #sandwich {
    width:  50em;    
}





/* TEXT RULES */
h1 {
    size:   10em;
    color:  green;
}
h2 {
    size:   8em;
}
h3 {
    size:   6em;
}
h4 {
    size:   4em;
}
h5 {
    size:   2em;
}

header.php

<!doctype html>
<html>
    <head>

        <title>The Logic Spot</title>
        <link type="text/css" rel="stylesheet" href="style.css" />
        <meta charset="utf-8" />
        <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
        header("Content-type: text/css");

    </head>    
    <body>        

    <div id="bodywrapper">

        <header>
            <h1><a href="<?php echo home_url('/')?>"><?php bloginfo('name')?></a></h1>
        </header>

        <div id="nav">
            <?php wp_nav_menu();?>
        </div>

        <div id="sandwichwrapper">

index.php

<?php get_header()?>
<!--div#bodywrapper contained in header.php-->
<!--div#sandwich contained in header.php-->

<?php get_sidebar()?>

<div id="main">

    <?php while(have_posts()): the_post()?>

        <h2><a href="<?php the_permalink()?>"><?php the_title()?></a></h2>
        <p>By <?php echo get_the_author_link();?></p>
        <?php the_content(__('Continue Reading'))?>

    <?php endwhile?>

</div>

<!--div#sandwich contained in footer.php-->
<!--div#bodywrapper contained in header.php-->
<?php get_footer()?>

footer.php

        </div> <!-- close div#sandwichwrapper-->

        <footer>
            <?=date('Y')?> Copyright
        </footer>

    </div> <!-- close div#bodywrapper-->
    </body>
</html>

Upvotes: 1

Views: 2073

Answers (2)

StreetCoder
StreetCoder

Reputation: 10061

Add this line in the <head> tag

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

Upvotes: 3

Malyo
Malyo

Reputation: 2000

Hey you need to specify absolute path to the stylesheets, for example 

<link type="text/css" rel="stylesheet" href="http://www.yourwebsite.com/wp-content/themes/yourtheme/style.css" />

Also as Matt stated, you can use functions like get_stylesheet_directory_url() or get_stylesheet_uri() to make your path more dynamic.

Upvotes: 1

Related Questions