Grow your CSS skills. Land your dream job.

WordPress index.php not picking up my style sheet

  • # November 13, 2012 at 7:37 am

    Haha @CameronDuthie, it’s an easy mistake to make, glad you sorted it mate.

    # November 4, 2013 at 11:52 pm

    Hi
    I have the same problem. It’s for 2 days that I’m searching for the result,I really confused. My index.php doesn’t pick up my style sheet but in other pages(e.g sample page) there’s no problem. Can any one help me? This is the style.css:
    @charset “utf-8″;

    /*
    Theme Name: Night Star Pizza
    Theme URI:
    Author: the WordPress team
    Author URI:
    Description: The 2011 theme for WordPress is sophisticated, lightweight, and adaptable. …
    Version: 1.3
    License: GNU General Public License
    License URI: license.txt
    Tags: dark, light, white, black, …
    */

    @media screen {
    * {
    margin : 0;
    padding : 0;
    }

    article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }

    .group:after { visibility: hidden; display: block; font-size: 0; content: ” “; clear: both; height: 0; }
    .group { display: inline-block; clear: both; }
    /* start commented backslash hack */ * html .group { height: 1%; } .group { display: block; } /* close commented backslash hack */

    html{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background:#784f2a ;
    }
    @font-face {
    font-family: ‘BYekan’;
    src: url(‘fonts/BYekan.eot?#’) format(‘eot’), /* IE6–8 / url(‘fonts/BYekan.woff’) format(‘woff’), / FF3.6+, IE9, Chrome6+, Saf5.1+/ url(‘fonts/BYekan.ttf’) format(‘truetype’); / Saf3—5, Chrome4+, FF3.5, Opera 10+ */
    }
    body {
    direction: rtl;
    font: 13px BYekan;
    }

    page{

    width: 900px; height: 1435px; margin:0px auto; 
    background: url( images/bg.jpg);
    

    }

    a:link{
    color: #FFF;
    text-decoration:none;
    }
    a:visited {
    text-decoration: none
    }
    a:hover {
    text-decoration: none
    }
    .boarder{
    width:720px;
    height:285px;
    margin : 0px auto;
    }
    .header-text{
    margin:0px 56px;
    }
    .header-textright{
    float:right;
    }
    .header-textleft{
    float:left;
    }
    .clear{
    clear:both;
    }
    .header-textright h2{
    font-size:25px;
    color: #ecdeb7;
    text-shadow:7px 7px 7px #030000;
    font-weight:bold;
    font-family: ‘BYekan’;
    }
    .header-textleft h2{
    font-size:25px;
    color: #ecdeb7;
    text-shadow:7px 7px 7px #030000;
    font-weight:bold;
    font-family: ‘BYekan’;

    }
    .header-textright:hover h2{
    background: #784f2a;
    border-radius:10px;
    color:#260a00;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    }
    .header-textleft:hover h2{
    background: #784f2a;
    border-radius:10px;
    color:#260a00;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    }

    .logo-right{
    float:right;
    }
    .logo-left{
    float:left;
    }
    .menu{
    width:900px;
    height:96px;
    background: rgba(35, 6, 0, 0.5);
    margin:0 0 0 0;

    }

    nav ul {
    height:96px;
    }
    nav li a{
    width:116px;
    height:96px;
    }
    nav ul { list-style: none; margin: 0 0 0 0; }
    nav li { margin: 0 0 0px 0; }
    nav li a{ font-size: 15px; width: 116px; display: block; position: relative; top:20px; float:right; left:-6px; }
    nav li:nth-child(1) a{background:url(images/home.jpg); background-repeat:no-repeat; margin:0px 0px 0px 0px;}
    nav li:nth-child(2) a{background:url(images/cafe.jpg); background-repeat:no-repeat;}
    nav li:nth-child(3) a{background:url(images/about.jpg); background-repeat:no-repeat;}
    nav li:nth-child(4) a{background:url(images/testimonials.jpg); background-repeat:no-repeat;}
    nav li:nth-child(5) a{background:url(images/delivery.jpg); background-repeat:no-repeat;}
    nav li:nth-child(6) a{background:url(images/contactus.jpg); background-repeat:no-repeat;}

    .aboutus{
    width:900px;
    height:194px;
    padding:32px 0px 0px 0px;
    border-radius:10px;

    }
    .chef{
    width:467px;
    float:right;
    margin:146px 0px 0px 0px;
    }
    .amar{
    width:183px;
    height:58px;
    background:rgba(200,67,41,0.3);
    float:left;
    margin:-70px 0px 34px 357px;
    font-weight:bold;
    color:#ecdeb7;
    text-shadow:1px 1px #000000;
    }
    .sidebar{
    width:81px;
    position:relative;
    float:left;
    margin:-5px 0px 0px 59px;
    }
    .sidebar .column{
    width:81px;
    height:660px;
    position:absolute;
    padding:32px 0 0 0;

    }
    .men {
    margin: 10px 0;
    }
    .men ul {
    list-style: none;
    }

    .men ul li {

    float: left;
    margin: 34px 0px 0px -62px;
    

    }
    .men li a{
    float: left;
    height:98px;
    width:419px;

    }
    .men li:nth-child(1){background:url(images/pishghaza.jpg); background-repeat:no-repeat;}
    .men li:nth-child(2){background:url(images/pizza.jpg); background-repeat:no-repeat;}
    .men li:nth-child(3){background:url(images/burger.jpg); background-repeat:no-repeat;}
    .men li:nth-child(4){background:url(images/sandwich.jpg);background-repeat:no-repeat;}
    .men li:nth-child(5){background:url(images/drink.jpg); background-repeat:no-repeat;}
    .footer{
    width:900px;
    height:86px;
    background: rgba(42, 2, 0, 0.6);
    margin:-169px 0px 0px 0px;
    font-size:15px;
    color:#e39335;
    line-height:1px;
    }
    .footer-menu{
    margin: 145px 35px 0 0;
    font-size:18px;
    }
    .footer .footer-menu ul{
    list-style:none;
    padding:0px 200px 0 0;
    }
    .footer .footer-menu ul li {
    float:right;
    margin: 10px 40px 0 0;
    }
    .footer .footer-menu ul li a {
    font-size:18px;
    color:#e39335;
    text-decoration: none;
    }
    .footer .footer-text{
    text-align:center;
    padding:40px 25px 0 0;
    margin:45px 0 0 0;
    text-align:center;
    font-size:12px;
    font-weight:bold;
    }

    # November 4, 2013 at 11:55 pm

    And this is the codes above my header.php :

    <?php if (is_search()) { ?>
    
    <?php } ?>
    
    <title>
           <?php
              if (function_exists('is_tag') && is_tag()) {
                 single_tag_title("Tag Archive for ""); echo '" - '; }
              elseif (is_archive()) {
                 wp_title(''); echo ' Archive - '; }
              elseif (is_search()) {
                 echo 'Search for "'.wp_specialchars($s).'" - '; }
              elseif (!(is_404()) && (is_single()) || (is_page())) {
                 wp_title(''); echo ' - '; }
              elseif (is_404()) {
                 echo 'Not Found - '; }
              if (is_home()) {
                 bloginfo('name'); echo ' - '; bloginfo('description'); }
              else {
                  bloginfo('name'); }
              if ($paged>1) {
                 echo ' - page '. $paged; }
           ?>
    </title>
    
    <link rel="shortcut icon" href="http://cdn.css-tricks.com/favicon.ico">
    
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
        <?php wp_head(); ?>
    </head>
    
    # November 11, 2013 at 4:30 pm

    I recommend using a text editor that highlights your code in a meaningful way such as Sublime Text or Notepad++. Both will highlight your CSS nicely.

    I can always tell when there is a problem when my rules are not the right color. Just look for where the highlighting gets ‘off’ and see if you have a ; where a : should be or a ] where a } should go. Typos will get ya every time.

    swirv

Viewing 4 posts - 16 through 19 (of 19 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".