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

chris2009 · #1 Feb 24, 2009, 03: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, 11: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, 03: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, 08: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, 05: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, 09: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.

ray-zin · #7 Mar 10, 2009, 09:00 AM

Perfect solution. Thanks guys. I just took Flynn's image (Thanks!!!) and stretched it using gimp to fit my 900px page and its already made a huge difference to my sites look-n-feel. Many many many thanks!!!

Now I just gotta tweek it a bit.

krystyna · #8 Jul 4, 2009, 06:48 PM

Actually, I re-did my background to cover the entire area, and it worked. The only difference, with the gradient, is I used "no-repeat" instead of "repeat-y".

SharonJ · #9 Jan 16, 2012, 01: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/

lmilesw · #10 Jan 17, 2012, 07:43 AM

Not sure what you are going for but I would reduce the vertical shadow to 0, increase the blur to somthing like 40px or 50px and reduce the spread to something like 1px or 2px. Also you might change the color to black.

EGeografija · #11 May 24, 2012, 03:53 PM

Dear all,
I am a teacher of geography. I made a site and use excellent Atahualpa theme. I do not know much about web design and programming. I tried to put the shadow on the body site. I followed a previous advice. However, I did not succeed.
Is there a way to just insert the code in the part of the Theme Options -> Body, Text & Links -> Body Style?
With inserting images I have not succeeded.
Do you have a simple suggestion?
Sorry for bad English, I live in Serbia.
My site, http://www.egeografija.org

lmilesw · #12 May 24, 2012, 04:07 PM

Go to the CSS Inserts area of the theme options and paste in the following.

HTML Code:

#container {
-webkit-box-shadow: 0px 0px 15px 5px rgba(000, 000, 000, .5);
box-shadow: 0px 0px 15px 5px rgba(000, 000, 000, .5); 
}

The shadow will not show in IE8 and before however. A neat tool for CSS3 code is at cssgenerator.com

SharonJ · #13 May 24, 2012, 04:21 PM

That is a nifty site, Larry, thank you.

EGeographia, your English is just fine!

The way I did this was go to Atahualpa Theme Options / HTML and CSS Inserts (near the bottom of the page)
and put this in the white area at the bottom of that page:

div#container {
border-radius: 5px;
-moz-border-radius: 5px;
-moz-box-shadow: 0 5px 3px 10px #5a98cb;
-webkit-box-shadow: 0 5px 3px 10px #5a98cb;
box-shadow: 0 5px 3px 10px #5a98cb;
}

This is similar to Larry's but I made the shadow blue. You can see it here:

http://oceanviewsvacationrentals.com

EGeografija · #14 May 24, 2012, 04:31 PM

Dear all,
many, many thanks for help.
Atahualpa was the best choice.
I am grateful.
Once again, thank you.
Best regards!