View Full Version : How to modify Joomla background
techknowcafe
03-04-2006, 11:37 AM
I'm currently using the default Joomla design but I want to change the white background of the site to a CSS controlled background. I see that I can change the BODY tag in the template CSS but changing that also changes the background of Joomla's admin. Also, adding the CSS to the index.php file doesn't work either. Any ideas? Site is TechKnowCafe.com. TIA!
traction
03-05-2006, 05:13 AM
have a look at the CSS file for the theme you are changing, you will notice there is a Body tag at the top of the file, but there is also a body tag near the bottom, this is the one you need to change.
Hope that helps.
If you want to change the colour :
background-color: red;
this changes the background to red.
background-image: url (images/background.gif);
This changes the background to an image called background.gif which is saved in the images folder on your webspace.
O.
techknowcafe
03-05-2006, 11:45 AM
Ok, I tried your info and it still doesn't display the background image. Not sure why because it looks right.
body {
margin: 15px;
height: 100%;
padding: 0px;
font-family: Arial, Helvetica, Sans Serif;
line-height: 120%;
font-size: 11px;
color: #333333;
background-image: url (../images/background.jpg);
}
I even tried the path as absolute and that didn't work either.
techknowcafe
03-05-2006, 11:51 AM
I got it! I put the CSS code in the HEAD tag of the index.php file.
style type="text/css"
body
{
background-image: url('put image path here');
background-repeat: repeat;
background-attachment: fixed
}
/style
traction
03-06-2006, 03:47 AM
you shouldnt need to do that, but if it works then excellent :)
kokopel1
06-02-2008, 04:05 PM
[NOTE: solved my issue--see bottom of this post].
Sorry to ask (seen lots of people scolded on the forum), but I have searched both SiteGround and other forums regarding changing the background image for a Joomla 1.0 template for about two weeks, and tried multiple suggestions others received, without a solution.
I am using 'Constellation' (#73), but trying to change the background to our custom wallpaper LBGRND2.jpg
I have changed the CSS to replace BODY-BG.jpg with LBGRND2.jpg, but it only comes up with a blank background--usually black, sometimes white (I messed with the color, thinking the black may have been covering up the wallpaper.
I have tried leaving the CSS alone and deleting the BODY_BG.jpg file and renamine the LBGRND2.jpg file as BODY_BG.jpg, with the same results.
I have tried using a WRAPPER text in the HTMP (index.php) file, but that didn't work. I have also tried the instructions in this thread, but that did not seem to work either (still, black blank background).
Can anyone help me? I am including the initial text that I changed for the edited CSS (first), and the partial original CSS text (second). I am not including the index.php file since the changes I made with that did not seem to have any effect, so I don't think I have made any progress.
Thanks,
DP
P.S. I am wondering if this may be an issue with the unzipped/extracted file folder versus the files within the zipped file. Could the site (still local, unpublished) be accessing the zipped folder which would not have the custom wallpaper in it? The LBGRND2.jpg file is in the unzipped images file folder
________________
body {
background:#000 url(../images/LBGRND2.jpg) fixed bottom center no-repeat;
margin:0;
padding:0;
font:normal 11px Tahoma, Verdana, Helvetica, sans-serif;
color:#fff;
text-align:center;
}
___________________
body {
background:#000 url(../images/body_bg.jpg) fixed bottom center no-repeat;
margin:0;
padding:0;
font:normal 11px Tahoma, Verdana, Helvetica, sans-serif;
color:#fff;
text-align:center;
}
======
OKAY, I FOUND THE SOLUTION. I had not uploaded the replacement files via CPanel. Here is an excerpt from a thread regarding replacing the Logo, but it works the same for the background by replacing "sg_joomla" in the text below with "body_bg" (thanks Holmancarey):
=====
"Access your cPanel by typing in yoursite.com/cpanel into your browsers address bar. When it prompts you for your username and password enter in the username and password provided to you in your welcome email. That will open a page that has a bunch of different icons. Look for the one that says "File Manager" After clicking on that you will get a window that opens up that has some folders inside of it. Look for the one that says "www" and click the folder icon just to the left of where it says www. Inside of here you should see a folder that says "templates", click the folder icon to the left of where it says templates. Now you will be inside of the folder that has your sites templates. If you haven't changed the template your site uses the default one will be called "sg_joomla", click the folder icon to the left of sg_joomla. Now you should be in your template folder, find the folder called images and open it just like the rest of the folders.
Inside of here is where you will make the change. Find the file named "header_bg.jpg" and click the left mouse button on it. Your screen should now look something like this:
Notice that in the top right hand corner you will have some actions you can perform on the header_bg.jpg file. Click the option that says "Rename File" and type in "header_bg_old.jpg" (without the quotes) for the new file name. Now that you have renamed the old file you are ready to add your own banner to the site. When making your banner you will want to make sure the size is about the same as the one it originally had (so it's looks nice) I believe the default size of the banner is 760 pixels wide X 115 pixels tall although only about 360 pixels of the left side of the banner is viewable. That's a different topic though
Once you have the picture you want to use for the banner (I'm assuming you do since you are wanting to change the banner) from the File Manager window you have opened click the link that says "Upload Files" as outlined in this picture:
That will take you to a screen with a bunch of boxes that have a Browse... button next to them. Click the top button that says "Browse..." and then browse to where your new banner is located at on your computer. Once you have selected the file click the "Open" button on the window and when it closes you will now see some text entered into the first box. Click the "Upload" button at the bottom of the boxes and wait for your file to upload. Be sure to not close the window at this point or the upload process will be aborted. Once it takes you back to where all of the files are listed at your file will now be uploaded. Look for it's name in the list and click the left mouse botton on it. Notice the text in the top right hand corner again, and click where it says "Rename File". Type in the name header_bg.jpg and then click "Rename"