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

Add image outside 3 column layout
 
wervisser
Member
 
Total Posts:  55
Joined:  2009-11-12
 

I would like to add some holiday decorating images next to my 3 column layout. I allready managed this by calling the images from 3-column.phtml. For the correct placement I added some CSS information and voila, it worked.... but…

When I look at my site from a larger resolution screen the images will be put in far most left or right side, just like it is configured in my CSS file. I would like to ‘attach’ these images to my 3-column layout. This way it wouldn’t matter what screen resolution you would be using, it would always be just next to the 3-column layout.

If anyone has some pointers, let me know !

 
Magento Community Magento Community
Magento Community
Magento Community
 
Sugar Ray Tenorio
Jr. Member
 
Total Posts:  6
Joined:  2009-01-27
Manila Philippines
 
wervisser - 07 December 2010 06:28 AM

I would like to add some holiday decorating images next to my 3 column layout. I allready managed this by calling the images from 3-column.phtml. For the correct placement I added some CSS information and voila, it worked.... but…

When I look at my site from a larger resolution screen the images will be put in far most left or right side, just like it is configured in my CSS file. I would like to ‘attach’ these images to my 3-column layout. This way it wouldn’t matter what screen resolution you would be using, it would always be just next to the 3-column layout.

If anyone has some pointers, let me know !

Try adding your HTML on the bottom of these files on your app folder

app/design/frontent/default/YOURTEMPLATE/template/callouts/left_col.phtml
app/design/frontent/default/YOURTEMPLATE/template/callouts/right_col.phtml

That should do it smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
wervisser
Member
 
Total Posts:  55
Joined:  2009-11-12
 

Hi Sugar Ray Tenorio,

Thank you for your reply.

However I don’t want to use the standard callouts since I want some images next to the columns.

I have attached an image from my homepage and marked the spots I want to edit with a amateuristic (:-)) shape

Image Attachments
Homepage.JPG
 
Magento Community Magento Community
Magento Community
Magento Community
 
wervisser
Member
 
Total Posts:  55
Joined:  2009-11-12
 
gordenclerack - 08 December 2010 01:36 AM

Very often I go to see this site. It very greatly is pleasant to me. I am delighted after reading this.

Uhm, thank you for your reply I guess, but I’m not sure what you are trying to accomplish. Are you trying to spam this topic with useless information or what ?

 
Magento Community Magento Community
Magento Community
Magento Community
 
MagePsycho
Mentor
 
Avatar
Total Posts:  1702
Joined:  2009-06-23
 

Simply use as css background.
Wont this work?

Thanks

 
Magento Community Magento Community
Magento Community
Magento Community
 
wervisser
Member
 
Total Posts:  55
Joined:  2009-11-12
 
MagePsycho - 08 December 2010 03:15 AM

Simply use as css background.
Wont this work?

Thanks

Thank you for your reply.

Can you perhaps clarify this a bit more for me ? I currently use an image file with the dimensions of 1x1366 and use the repeat-x command to replicate this throughout the site. This way I have a very small background file and still have the same layout.

I have experimented by adding some code to the 3-column.phtml file to add the images and have used a separate <div> to allow the correct placement. This works, however when I look at the site from another (larger) screen resolution the picture jumps further to the left or right while it should be placed just outside the 3 column layout. I would like to have this images linked to the outer columns and just can’t get this to work for me.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Commative
Sr. Member
 
Avatar
Total Posts:  130
Joined:  2009-12-03
XXX
 

Hi wervisser,

You mention you have a background image for the body of your site, but I assume you’ll want this new image on top of that background.  So you’ll need to put the CSS background on a div inside the body.  I would suggest adding the background to the div with the class “wrapper” (assuming you’re doing this on http://www.kleinebolletjes.nl/ which I’m looking at right now).  This div sits just above the body and below the content of the site, and it’s full-width, so it’ll be perfect.  Just add a style along these lines:

.wrapper { backgroundurl(../images/your-image.pngscroll no-repeat 500}

This will create a centered background image aligned to the top of the page.  If you want the image to remain in place as you scroll down, just change “scroll” to “fixed” If you want the image to be a bit further down the page than the very top, just change the last “0” to “100px” or whatever is appropriate.

Hope this helps!

Magento Themes by Magentist

 
Magento Community Magento Community
Magento Community
Magento Community
 
wervisser
Member
 
Total Posts:  55
Joined:  2009-11-12
 

Hi Magentist,

Thank you for your reply.

This looks promising indeed. I have added a small picture to the frontpage and was able to move it around correctly. Also the ‘fixed’ part works as mentioned.

However, I haven’t got a larger screen resolution available at this moment to see how it looks. I am very curious if I can manage to keep the image exactly next to the column. At this moment when I change the zoom level my image moves further to the left, but perhaps this cannot be fixed....

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