Loading Css in PHP for Joomla

curty409

Junior Member
Hi guys, I'm new here but after looking around a good place to go I decided to try here.

Anyway I was wondering if you could help me with a problem I have run into. I'm creating a Joomla template from scratch. I have managed to get the template to load up on my local server with no problems at all. The problem comes when I try to get images to appear on the localhost webpage.

I have 2 CSS files; 1 called template.CSS and another called Background.CSS

At the moment all I am bothered about doing is getting the background.CSS to work. I have added a piece of CSS code into it to load a background URL with no repeat.
I then want to load this into my index.PHP file so it should load up on my joomla page.

After looking around it seems that I'm doing everything correctly but for some reason it will not show on my localhost webpage when refreshed, etc. I have made sure the files have updated too.

Here is my CSS code:
body {
}#background {
background-image: url(../Images/Background.jpg);
background repeat: no-repeat;
}


Here is my PHP code:
<!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; ?>" >
<link rel="stylesheet" type="text/css" href="../css/template.css">
<link rel="stylesheet" type="text/css" href="../css/background.css">
<head>
<jdoc:include type="head" />
</head>
<body>
<div id="background">

<div id="header"><jdoc:include type="modules" name="top" /> </div>
<div id="left" class="float"><jdoc:include type="modules" name="left" /></div>
<div id="content" class="float"><jdoc:include type="component" /></div>
<div id="right"class="float"><jdoc:include type="modules" name="right" /></div>
<div id="footer" class="clear"><jdoc:include type="modules" name="footer" /></div>
</div>
</body>
</html>



Thanks in advance for replies I may get and I hope someone can help me out as I am new to Joomla and PHP.
 
If you sort your spacing out does it work?
original:
Code:
[COLOR=Magenta]body {[/COLOR][COLOR=Magenta]}#background {    background-image: url(../Images/Background.jpg);    background repeat: no-repeat;}[/COLOR]


Should be more like

Code:
[COLOR=Magenta]body #background {[/COLOR][COLOR=Magenta]    background-image: url(../Images/Background.jpg);    background repeat: no-repeat;}[/COLOR]
or just

Code:
[COLOR=Magenta]#background {[/COLOR][COLOR=Magenta]    background-image: url(../Images/Background.jpg);    background repeat: no-repeat;}[/COLOR]
 
Changed the CSS with no luck.

Is there something within my PHP stopping it from being called upon?
like not having the correct code there?
 
the only thing I know about php is how to spell it. You got that bit right so im out :)

Maybe PM Jazzajay?
 
Okay for starters there are several things wrong with this.

1 -
body {
}

No, just no,
Remove that rule its empty and just not needed.

2. This:
#background {
background-image: url(../Images/Background.jpg);
background repeat: no-repeat;
}


Should be:
#background{background:url("../Images/Background.jpg") no-repeat}

But to answer your question if its no showing in only IE I'm pretty sure in IE8 you had to have quotes around the path, could be wrong as I always add them but it sound correct, so if adding quotes and you are viewing it in IE doesn't resolve it its a referance problem pure and simple.

Next things to check are these lines in your php file

<link rel="stylesheet" type="text/css" href="../css/template.css">
<link rel="stylesheet" type="text/css" href="../css/background.css">


You don't need the ../ before either of them if the CSS files are located in a css folder in your root directory, also close them properly so /> not >

If they are located in your joomla template directory, which is where I am going to guess they are and why this is not working, change that to:

<link rel="stylesheet" type="text/css" href="templates/template-folder-name/css/template.css">
<link rel="stylesheet" type="text/css" href="
templates/template-folder-name/css/background.css">


If you need the Joomla code to do that for you let me know.

If that still hasn't fixed it make a change in your template css file something like:

body{background:#000}

If the body of the page does not have a black background when you then refresh the page then the CSS files are still not being referanced correctly, if it does its a problem with referancing the images in the CSS file, and we are thus narrowing it down.

So if the body has not changed you need to put the correct path to the CSS files in the index.php file.
Remember in Joomla the index.php file is not relative to your template folder, where the index.php file is located, but your root directory.

If the background has changed then next you need to find out where the images are, and see if its a problem in the name and path.

Now I am asumming you FTP/saved these rather than using media manager.

If you used media manager, they will be placed in, err....crap hate user centered problems either images/ probably media/ sorry Joomla from a developer point of view not a users, pretty sure it is images/ but could be wrong, check both can't think off the top of my head.

But if you used media manager the css files wont find them.
If you used an FTP/placed them locally in your templates directory then they will be relative to the css folder.

So if this is the case is there a folder named exactly:

Images

In your templates folder and in their does it contain an image named exactly:

Background.jpg

But thats where your problem is, I would say the CSS referances are not able to find the CSS files as you have made them relative to the templates directory and not the root directory where the index.php file actually gets loaded.

Any problems let me know and I'll see if I can help, provide info though. :)
 
Back
Top