Home › forums › dezinedepot stuff › joomla templates

how to change Template Background and keep the content area white

Mon, 2006-10-02 14:52 — JEB

Hi - I'm using template ddj003 on Joomla 1.0.9 which I think is great. Very easy to navigate around, nice and clean.

What I want to do if possible is to have a colored background around the outside of the template, whilst retaining the white background of all the content pages.

I've created a gradent.jpg file that's 50px wide and the height of the template. Is it possible for someone to give me the fix for what (and where) I should put into the .css file to make this image appear.

I'm a real novice with this stuff and know nothing about css, so please be gentle with me

‹ How to display modules in User1 position only Variable or Fluid width in DD_Olive ›
Mon, 2007-05-21 00:21 — grants-tomb

Changes to index.php

I'm a little confused about the instructions for changing the index.php file. Exactly what do I add to the file and where do I add it? I understand the changes to the template_css.css file but hesitate to make the changes until I understand the index.php changes. Thanks.
Mon, 2006-10-02 14:59 — maxx

first delete some lines from

first delete some lines from template_css.css file. delete these lines (numbers on the left side are just line numbers for reference):

joomla template background

and delete these lines

joomla template background

now add these lines to the top of your template_css.css file:
body {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, Sans Serif;
line-height: 120%;
font-size: 11px;
color: #333333;
background: #ffffff;
}

#outer_wrapper {
background: yourbackgroundcolor url('../images/yourbackgroundimage.jpg') repeat-x;
width: 100%;
height: 100%;
}
make sure to replace yourbackgroundcolor and yourbackgroundimage with your own. You may wonder why you have to add yourbackgroundcolor. This template is designed to vary in height. If you have a lot of content you will need a background longer than the one you have made probably. So what you want to do with a gradient background is use the bottom color in the gradient as yourbackgroundcolor so it looks as though the image is continous. Now edit your index.php file in the ddj003 folder. Add this just after the tag but before the first tag (around line 22); <div id="outer_wrapper"> and add this just after the
<?php
mosLoadModules( 'debug', -1 );
?>
and before the closing tag (around line 117): </div> I added this outer_wrapper tag because if you use TinyMCE WYSIWYG editor your editor background will be the background of your . That is usually undesirable. In this case it will be a white background with black font. Perfect for your users to type in a new entry. save all the changes and you should be set. ;D