Hi Joomla Users!!

I have been trying to set the main area of the joomla page where both articles and modules are displayed with a background image. For this I have just modified the html and CSS on the default rhuk_milkyway template and still can not get the back ground image to appear.
Is there any templates that allows one background image or can any one help with where I need to insert the background image tags to achieve this.
Does any one have the CSS and index.php files that they could send?
I want to use the image as a background and than lay buttons etc over the top using models and articles to achieve this.
Any help would be greatly appreciated.

Thanks in advance

Brendon

Hi Brendon

Yep can be done. What version of Joomal are you on?

Can you post your css changes?

d

Hi

I am using Joomla 1.5
Firstly I have edited the index.php to remove the header and footer and other parts I dont want. Basically I am just left with the main body area where modules and content go.
I have attached the CSS file but I obviously have the wrong idea and its in the wrong spot. Please note I dont want the background image right on the back page. I just want it where the articles and modules go as per the screen shot I have attached.

Hope this makes sense

CSS file is below. Everything is default accept what I added to the top CSS file (../images/photocreate_bg.png 0 0 no-repeat;


Thanks

Brendon

/* white */
#page_bg {
background: #fff url (../images/photocreate_bg.png 0 0 no-repeat;

div#wrapper {
background: #f7f7f7 url(../images/white/mw_shadow_l.png) 0 0 repeat-y;
}

div#wrapper_r {
background: url(../images/white/mw_shadow_r.png) 100% 0 repeat-y;
}

div#header {
background: url(../images/photocreate_bg.png) 0 0 repeat-x;
}

div#header_l {
background: url(../images/white/mw_header_t_l.png) 0 0 no-repeat;
}

div#header_r {
background: url(../images/white/mw_header_t_r.png) 100% 0 no-repeat;
}

div#footer {
background: #f7f7f7 url(../images/white/mw_footer_b.png) 0 100% repeat-x;
}

div#footer_l {
background: url(../images/white/mw_footer_b_l.png) 0 0 no-repeat;
}

div#footer_r {
background: url(../images/white/mw_footer_b_r.png) 100% 0 no-repeat;
}

Hi

If you re using Mozilla, are you using Firebug? It's a free extension. With it, you can right-click on any part of your page and get a list of all the classes applied to the HTML tag you clicked on/in. It's supremely handy for diagnosing where to apply changes to your style sheet. See attached screenshot of it in action.

In your case, the style for the content box is called 'whitebox_m' so that's where to apply your background image.

Your own CSS mods looked promising, so it should work.

Any good?

[OK, I had to reduce the screenshot v small to be allowed to upload it. must fix this...]

here is the missing screenshot

Hi

How can I give you my email address to get a larger photo? I dont want to post it public.

Thanks

Brendon

Hi

Well the usual way is to PM me. But hey, you can email me at admin [at] joomladay.org.au instead.

D

Firebug is a great tool for working with Joomla Templates in Firefox

The CSS D is pointing to is
File: template.css
CSS: #whitebox_m {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
width: auto;
padding: 1px 8px;
}

This controls the middle area of the round box

Try changing to this:
CSS: #whitebox_m {
border: 1px solid #ccc;
width: auto;
padding: 1px 8px;
background: url(../images/photocreate_bg.png) 0 0 repeat-x;
}

You will then have to decide if you want rounded corners for the box.
If you do, then you'll have to make new graphics for the corner images. (this may affect all other rounded corners in the site - so best to make a new css id's just for the main box)

If you don't want rounded corners, then you will need to go to the index.php and remove all the corner divs you don't need: <div id="whitebox_t">, <div id="whitebox_tl">, <div id="whitebox_tr"> etc etc

Remember to make sure your divs close in the right place or the template will look messed up.

Thanks D

That worked and firebug is a great tool. Your help is appreciated

Regards

Brendon

Excellent. Glad you sorted it.