CSS qui ne s'applique pas sur mon thème

bloum
PHP Wordpress

Bonjour
j'essai de créer un thème wordpress mais je galère dès le début.
J'ai pour l'instant, dans mon dossier de mon thème :

  • un fichier index.php
  • un fichier header.php
  • un fichier style.css
    -un dossier "images" avec les photos dont j'ai besoin.

Voici mon fichier index.php : 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mon titre</title>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css">
  </head>
  <body>
    <?php get_header(); ?>
  </body>
</html>

Mon fichier header.php :

<!DOCTYPE html>
<html>
  <head <?php language_attributes(); ?>>
    <meta charset="<?php bloginfo('charset'); ?>">
    <title><?php the_title(); ?></title>
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
    <?php wp_head(); ?>
  </head>
  <body>
    <div class="wrap">
      <header>
        <div id="header">
        <h1><a><?php bloginfo('name'); ?></a></h1>
        <h2><?php bloginfo('description'); ?></h2>
        </div>
      </header>

Et mon style.css

#header{
    background-image:url("wp-content/themes/cnd/images/header.png");
}

Lorsque je vais sur mon site, j'ai une page blanche avec écrit le titre du site et la description. Mais mon image de fond n'y est pas. J'ai essayé en mettant background à la place de background-image mais ça ne change rien. J'ai fait attention à la casse etc.

Auriez vous une idée de pourquoi la feuille de style ne s'applique pas ?

Merci par avance

9 réponses

Damarus
Réponse acceptée

Peut-être le cache.

maxslayer44

Bonjour,

essaye de mettre le lien de l'image en absolut :

#header{
    background-image:url("/wp-content/themes/cnd/images/header.png");
    /* ou background-image:url("http://www.ton-site.fr/wp-content/themes/cnd/images/header.png"); */
}

Si ça résoud ton problème, c'est que c'est le lien de l'image qui pose problème dans ton CSS

Damarus

Salut, l'URL de ton image est relative à ton fichier css, donc 

#header{
    background-image:url("images/header.png");
}
bloum
Auteur

Déjà merci à vous
Maxslayer44 : j'ai essayé ça ne change rien
Damarus : j'avais essayé avec ça aussi et ça ne marche pas

Damarus

Si tu ouvres la console et que tu vas dans "Ressources/Frames/Styles" tu vois ton fichier CSS ? Il est bien chargé ?

bloum
Auteur

Quand je vais sur wordpress dans Apparence>Editeur, ma feuille de style apparait. Mais je ne suis pas sur que tu parles de ça

Damarus

Non non, affiche la page de ton site, clique droit au millieu de la page, "Inspecter l'élément" et jette un oeil à la console voir si tu n'as pas d'erreur de chargement. S'il ne trouve pas ton fichier CSS lors du chargement, tu aura une erreur dans la console.

bloum
Auteur

Non pas d'erreurs mon style est bien détécté
Je précise que je suis en local (je sais pas sis ça change quelque chose ou pas)

Edit : sur mon fichier css j'ai enlevé la ligne background-image et à la place j'ai mis un margin top pour voir si ça fonctionne. Et le margin-top se met en place.
ça ne résout pas complétement mon problème étant donné que je ne vois pas ce qui cloche, mais c'est rassurant pour la "détection" du fichier css

bloum
Auteur

J'ai remis ce que j'avais supprimé et cette fois ça a fonctionné, c'est étrange...