[SOLVED] How to create (drop) shadow effect around the layout container ?

chris2009 · #1 Feb 24, 2009, 02:31 AM

Hi all,

I'd like to have a shadow around the container which includes the page.
How do I create such one ? Where should I put the html/css to in this great theme?

Thanks
Chris

Flynn · #2 Feb 24, 2009, 10:03 AM

You need to create one image and repeat it in the background:

A. Theme Options -> Body, Text & Links -> Body Style

HTML Code:

background: #cccccc url(/wp-content/themes/atahualpa/images/bg.gif) top center repeat-y;

I've attached the background image of my theme Willy the Cat below. It is made for a 740px wide layout though. Either look at the image and create a new one, or open that image in an image editor, copy one of the two shadows and move it farther away from the other shadow until you got the right width for your layout. Distance between [right end of the left shadow] and [left end of the right shadow] = width of your layout.

chris2009 · #3 Feb 25, 2009, 02:50 AM

Wow that was fast!

Somehow I don't get it to run. I did use your picture and put the html code where you told me, but I can't see any border/shadow. Honestly I don't know what to do.

Update: I am getting nearer the desired result. Many thanks for your help.

djmom70 · #4 Mar 7, 2009, 07:45 PM

I figured out how to do this based on this thread, so thank you very much. I have another question though. What if I want to have an additional background image that shows up on the left and right sides rather than a solid color. Is it possible to have two background sets? It seems to only see the second one.

Here is the code I tried:
background: url(wp-content/themes/atahualpa/images/bg.jpg) repeat top left;
background: #e8d9c8 url(wp-content/themes/atahualpa/images/bg3.png) top center repeat-y;

All that shows up is the color and the drop shadow that I am indicating in the second one. I tried to make it a .png file so it would be transparent. The idea is for that one to "sit" on top of the other. Am I making sense? I'm so sorry I'm such a newbie!!

I will definitely be donating. I am LOVING this theme and if I can just solve this one little problem (as well as trying to change the look of the calendar but I haven't searched the forum yet on that one) I will be good to go on this.

Thanks so much!!

Flynn · #5 Mar 8, 2009, 04:29 AM

You can only put one background image on body. But there are 2 more containers

<body>
<div id="wrapper">
<div id="container">
<table id="layout">

You can put the other background image on div#wrapper or div#container. You'll need to set padding too to make the background visible. The div#container can be styled at A. Theme Options -> Layout. For div#wrapper you'd have to add a CSS Insert, i.e.
div#wrapper {
padding: 10px;
background: url(/path/to/image.gif);
}

The calendar style is a whole section in style.css. Copy that, paste it into HTML/CSS Inserts -> CSS Inserts and edit it there. That way it will not be overwritten when you update Atahualpa

djmom70 · #6 Mar 8, 2009, 08:15 PM

oh my gosh! You absolutely rock!!!!!

It took me awhile to get the drop shadow just right, but putting the thing in the css part worked!!

thank you so much for your help AND for your fantastic theme.

SharonJ · #7 Jan 16, 2012, 12:48 PM

Quote:

Originally Posted by Flynn

You can only put one background image on body. But there are 2 more containers

<body>
<div id="wrapper">
<div id="container">
<table id="layout">

I managed to have a background photo and a drop shadow using container as suggested. Almost there! I wanted to know if there is a way to make the dropshadow more transparent. When I added
filter: alpha(opacity=50);
opacity: 0.5;
It made the whole page 50% EEEK.

Here is the page I am working on:
http://oceanviewsvacationrentals.com/

Here is my code:
div#container {
border-radius: 5px;
-moz-border-radius: 5px;
-moz-box-shadow: 0 5px 3px 10px #7d7f7e;
-webkit-box-shadow: 0 5px 3px 10px #7d7f7e;
box-shadow: 0 5px 3px 10px #7d7f7e;
}

Here is the effect from an older html website that I want to achieve:
http://www.oceanviewretirement.com/