web-dev-qa-db-fra.com

La feuille de style CSS pour le modèle Joomla personnalisé n'est pas affichée

Ainsi, j’utilise actuellement le codage HTML et CSS de base pour créer un site Web pour un client. Le modèle est chargé dans le gestionnaire d'extensions, mais lorsque je l'aperçois, la page ne ressemble en rien à ce qu'elle est supposée. Aucun des styles de ma feuille de style css ne se présente. Je suis nouveau sur Joomla, donc une aide pour ce débutant serait grandement appréciée. Si vous avez besoin de plus d'informations, je serai heureux de vous les donner. Malheureusement, je suis incapable de fournir un lien car le site n'est pas encore en ligne, mais je vous donnerai des liens vers des captures d'écran.

A quoi ça ressemble dans les outils de développement Web: http://i.imgur.com/0yoQHBR.jpg

Résultat final pour le site: http://i.imgur.com/lI7gqdI.jpg

Fichier Index.php d'origine:

<?php
    defined('_JEXEC') or die;
?>

<!Doctype html>
    <html>
        <head>
            <meta charset="utf-8">
            <title> Deda's Couture</title>
            <link rel="stylesheet" href="css/normalize.css">
            <link rel="stylesheet" href="css/main.css">
            <link rel="stylesheet" href="css/responsive.css">
            <link rel="stylesheet" href="css/component.css">
            <meta="viewport" content="width=device-width, initial-scale=1.0">
            <jdoc:include type="head" />
            <!--[if lt IE 9]>
                <script src="<?php echo $this->baseurl ?>/media/jui/js/html5.js"></script>
            <![endif]-->
    </head>
templatescss
2
Starlight1992

Joomla fonctionne un peu différemment lors de l'importation de fichiers CSS et JS.

Vous devez définir la racine de votre site. Essayez de remplacer ceci:

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/component.css">

Avec ça:

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/normalize.css">
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/main.css">
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/responsive.css">
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/component.css">

$this->baseurl obtient l'URL de base de votre site et $this->template obtient votre nom de modèle

3
Lodder

Étant donné que vous utilisez réellement un script PHP pour générer la page, il serait préférable que vous utilisiez les appels de l'API Joomla pour ajouter le code CSS à la page rendue, par exemple:

<?php
....
$tempDoc = JFactory::getDocument();
$tempDoc->addStyleSheet(JURI::root(true).'/css/normalize.css');
$tempDoc->addStyleSheet(JURI::root(true).'/css/main.css');
$tempDoc->addStyleSheet(JURI::root(true).'/css/responsive.css');
$tempDoc->addStyleSheet(JURI::root(true).'/css/component.css');

Ensuite, plus tard dans le fichier index.php de votre modèle, incluez la dernière (ou presque la dernière) "instruction" dans la section d'en-tête HTML, par exemple:

<head>
....
    <jdoc:include type="head" />
....
</head>

De cette manière, les exigences CSS et JavaScript de toutes les extensions Joomla seront également incluses - vous n'en avez peut-être pas pour l'instant, mais il serait surprenant que vous n'en ayez pas ultérieurement.

De plus, pour vous aider à comprendre pourquoi votre CSS original n'a pas été chargé, je constate que vous utilisez déjà les "outils de développement" de votre navigateur ( the Chrome terme ) ou encore mieux l'add-( Firebug pour FireFox - cela vous aidera à voir le Les URI complets utilisés pour chaque "composant" de page, ainsi que de nombreuses autres informations essentielles sur les pages générées.

Depuis votre capture d’écran des outils du développeur, votre génération de page s’est sérieusement détériorée, les méta, scripts et autres éléments HTML se trouvant tous dans l’élément body html - dans votre capture d'écran, vous n'avez pas développé l'élément principal généré. ' Ne vois pas ce qu'il y a dedans. N'oubliez pas qu'avec les outils de développement, vous ne regardez pas réellement le code source de la page, mais la version analysée et interprétée du navigateur/de l'outil (vous pouvez donc consulter les deux).

Vous voudrez peut-être rendre vos déclarations de type et html un peu plus complètes aussi, comme:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">

Cependant, le contenu exact de ceux-ci peut nécessiter des recherches supplémentaires de votre part.

1
Mark Bradley

@ Mark Bradley, JURI::root(true) affiche / css/main.css au moins dans Joomla 3 mais nous avons besoin de templates/our_tmpl/css/main.css so le chemin correct est:

$tempDoc->addStyleSheet($this->baseurl.'/templates/'.$this->template.'/css/main.css');
1
stckvrw