2

So I have currently used basic html and css coding to create a website for a client. The template uploads to the extension manager but when I go to preview it, the page looks nothing like it's supposed to. None of the styles from my css stylesheet are showing up. I'm new to Joomla so some help for this newbie would be greatly appreciated. If you need any more information I will be glad to give it. Unfortunately I am unable to provide a link since the site isn't live yet but will give you guys links to some screen shots.

How it looks in web developer tools: https://i.stack.imgur.com/vLDgi.jpg

End result for site: https://i.stack.imgur.com/DcJos.jpg

Original Index.php file:

<?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>
Improve this question

4 Answers 4

Reset to default
3

Joomla works a little differently when importing CSS and JS files.

You need to define the root of your site. Try replacing this:

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

With this:

<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 gets the base URL of your site and $this->template gets your template name

Improve this answer
2
  • Thank you so much. The minute I did that all my stylesheets began to function. =D
    – Starlight1992
    Apr 27, 2015 at 17:10
  • Glad it worked out for you :)
    – Lodder
    Apr 27, 2015 at 17:14
1

As you are actually using a PHP script to generate the page, I suggest it would be better if you actually use the Joomla API calls to add the CSS to the rendered page, for example:

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

Then later in your template's index.php file, include as the last (or nearly the last) "statement" in the HTML header section, for example:

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

This way, any Joomla extensions' CSS and JavaScript requirements will also be included - you may not have any now, but it would be surprising if you didn't have any later on.

Also, to help you identify why your original CSS wasn't being loaded, I can see you're already making use of your browser's "developer tools" (the Chrome term) or even better the Firebug add-on for FireFox - it'll help you see the full URIs used for every page "component", along with a vast amount of other essential information about your generated pages.

From your screen shot of the developer's tools, your page generation has gone seriously awry as the HTML meta, script and other elements are all in the html body element - in your screenshot, you haven't expanded the generated head element so I can't see what's in there. Remember that with the developer's tools you're not actually looking at the page's source, you're looking at the browser's/tool's parsed and interpreted version of it (so you may wish to look at both).

You might wish to make your doctype and html declarations a little more complete, too, such as:

<!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; ?>">

However, the exact content of those might require some further research on your part.

Improve this answer
2
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> is for XHTML 1.0 Transitional. What the OP currently uses if for HTML5. Also, the way you have defined the paths is incorrect and will not load the CSS files from the template. See JUri/root
    – Lodder
    Apr 27, 2015 at 13:49
  • Yes, you're right, although I did say "However, the exact content of these might require some further research on your part" since it's probable we only have a fraction of the full story from the OP (that's not a criticism of him/her - it's human nature)
    – Mark Bradley
    Apr 27, 2015 at 15:02
1

@Mark Bradley, JURI::root(true) displays /css/main.css at least in Joomla 3 but we need templates/our_tmpl/css/main.css so the correct path is:

$tempDoc->addStyleSheet($this->baseurl.'/templates/'.$this->template.'/css/main.css');
Improve this answer
-2

Make sure your not missing <jdoc:include type="head" /> inside head tag.

<head>
....
    < jdoc:include type="head" />
....
</head>
Improve this answer
1
  • What does this have to do with adding a custom stylesheet to a template?
    – Lodder
    Nov 19, 2015 at 21:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.