Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Background around Magento Container
 
redegifts
Member
 
Total Posts:  41
Joined:  2007-12-04
 

I’m sure this is a newbie question, but I would like to create the main magento containers (header, main, footer) and have them surrounded by a background image.  It seems that currently, the header is one long image.  Can the the header, main, footer be a width of say, 800px and have a background image take up the rest of the space.  Something similar to what MSN.com/ESPN.com does with the gray background on all sides. 

Not sure where this is located.  Couldn’t find it in the boxes.css

An simple example of what I mean is in the attached image. 

Thank you for any help you can give me.

Russ

Image Attachments
sample.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
kameko.rouge
Member
 
Total Posts:  58
Joined:  2007-10-11
 

yes, you can do that.

 
Magento Community Magento Community
Magento Community
Magento Community
 
AnnaM
Guru
 
Avatar
Total Posts:  325
Joined:  2008-01-29
San Francisco
 

What I did, and its in boxes.css btw, is make the image I want in photoshop, choose your size, do whatever you want, then in boxes.css
comment out middle container or as I did, make it all black to match the bg I wanted.  I saw little use to it,its just a vertical stripe that screwed up things IMO, and just put in your photoshop image as main_bg.gif

Works fine, lasts a long tmie.

http://www.epicurecookware.com

middle-container { background:url(../images/main_container_bg.gif) repeat-x 50% 0 #000000; }
/*.this gif seems useless-puts a small vert line on either side of page. I made it all black */
.middle { background:url(../images/main_bg.gif) repeat-x #000000; padding:25px 25px 0px 25px; }

I think I made it the width of the origianl main_bg.gif 950 and aheight of 1025 or so. If that wil work on all pages remains to be seen, and be aware that font colors are going to be visible or invisible depending on your backgrouond. Thats what I am wrestling with right now.

I’m a rookie so what I did might or might not be wise, not sure yet, but so far it seems fine, just have to change some font colors.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Bill007
Sr. Member
 
Avatar
Total Posts:  179
Joined:  2008-01-15
New Zealand
 

Yep thats fine AnnaM

you should be able to do a total reskin in CSS alone

apart from re shuffling of internal template blocks

Just see how magento have pulled in their images and repeat it

Mozilla does a great CSS Developer plug in that allows you to change the CSS on the Fly
I reccommend that you get it and start using you will learn CSS fast that way

https://addons.mozilla.org/en-US/firefox/addon/60 great CSS Developer plug

http://www.mozilla.com/en-US/ Mozilla Download if you dont have it

Bill007 http://www.euphorish.com Web and Design development

 
Magento Community Magento Community
Magento Community
Magento Community
 
AnnaM
Guru
 
Avatar
Total Posts:  325
Joined:  2008-01-29
San Francisco
 
Bill007 - 09 February 2008 11:53 PM

Yep thats fine AnnaM

you should be able to do a total reskin in CSS alone

apart from re shuffling of internal template blocks

Just see how magento have pulled in their images and repeat it

Mozilla does a great CSS Developer plug in that allows you to change the CSS on the Fly
I reccommend that you get it and start using you will learn CSS fast that way

https://addons.mozilla.org/en-US/firefox/addon/60 great CSS Developer plug

http://www.mozilla.com/en-US/ Mozilla Download if you dont have it

Bill007 http://www.euphorish.com Web and Design development

Thanks Bill, I appreciate the info I installed that addon, not sure what it does yet or how to use it. Is it more useful than Firebug which Ihave been using to locate where the css is, then trying to figure out how to change it!  smirk

 
Magento Community Magento Community
Magento Community
Magento Community
 
Bill007
Sr. Member
 
Avatar
Total Posts:  179
Joined:  2008-01-15
New Zealand
 

Sorry AnnaM there is a time difference

Go to in your mozilla browser

TOOLS>>Web Developer>>css>>edit css

Now at the bottom of the browser you should see a CSS panel

This will list all the CSS files called into that particular page of you store

select which files contents you need to change IE boxes.css menu.css etc

cut all the css out of boxes.css and watch what happens the page in the browser will render with no Style

refresh the browser and it all comes back

Hope that gets you started

Bill007 http://www.euphorish.com web and Graphic Design

 
Magento Community Magento Community
Magento Community
Magento Community
 
AnnaM
Guru
 
Avatar
Total Posts:  325
Joined:  2008-01-29
San Francisco
 

Great, not sure what you were apologizng about, something must have got misintrepeted but once again, thanks for thaht info. I am going to see what I can do. I have been using Firebug, not sure if you are familiar with thath? It has an Inspect function where you point to sections of the page and it brings up a window showing which css file it came from, and the line numbers and the code, then also shows the html that was developoed from it. Fifrefox puts it out, I don’t think you can edit with it though.  This one you are talking about souonds likeit might be more enlightening in real time. 

Yes there is quite a time change twixt us! Its tomrrow there and yesterday here.  grin Its a crazy world.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Bill007
Sr. Member
 
Avatar
Total Posts:  179
Joined:  2008-01-15
New Zealand
 

Oh yeah CSS on the fly

Your about to see how bad Windows IE really is

what I do is change the files to suit

select all - copy and past into your Dreamweaverequivalent file and up load

I was saying sorry for the length of time it took to see your answer its one of those sorries i did not really mean

Bill007 wink

 
Magento Community Magento Community
Magento Community
Magento Community
 
Bill007
Sr. Member
 
Avatar
Total Posts:  179
Joined:  2008-01-15
New Zealand
 

AnnaM Do you want to color up your footer

find boxes.css and then find this

/* this controls the footer*/
.footer {
    width
:930px;
    
margin:0 auto;
    
padding:1em 1em 4em 1em;
    
position:relative;
    
background:green;/* this is the background Color*/
}

The way I have used color in the background style is not really acceptable but for testing purposes is all right the format should read like #000000 (this is black obviously)

the other setting are for my site

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top