Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

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


  #1  
Old Feb 24, 2009, 02:31 AM
chris2009
 
2 posts · Feb 2009
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

Last edited by chris2009; Apr 29, 2010 at 04:22 AM.
  #2  
Old Feb 24, 2009, 10:03 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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.
Attached Images
File Type: jpg bg.jpg (876 Bytes, 14116 views)
  #3  
Old Feb 25, 2009, 02:50 AM
chris2009
 
2 posts · Feb 2009
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.

Last edited by chris2009; Feb 25, 2009 at 03:08 AM. Reason: update
  #4  
Old Mar 7, 2009, 07:45 PM
djmom70
 
14 posts · Mar 2009
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!!
  #5  
Old Mar 8, 2009, 04:29 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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
  #6  
Old Mar 8, 2009, 08:15 PM
djmom70
 
14 posts · Mar 2009
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.
  #7  
Old Mar 10, 2009, 08:00 AM
ray-zin
 
14 posts · Mar 2009
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.
  #8  
Old Jul 4, 2009, 05:48 PM
krystyna
 
121 posts · Apr 2009
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".
  #9  
Old Jan 16, 2012, 12:48 PM
SharonJ's Avatar
SharonJ
 
644 posts · Sep 2010
Duncan BC Canada
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/
  #10  
Old Jan 17, 2012, 06:43 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #11  
Old May 24, 2012, 02:53 PM
EGeografija
 
3 posts · May 2012
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
  #12  
Old May 24, 2012, 03:07 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
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
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #13  
Old May 24, 2012, 03:21 PM
SharonJ's Avatar
SharonJ
 
644 posts · Sep 2010
Duncan BC Canada
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
  #14  
Old May 24, 2012, 03:31 PM
EGeografija
 
3 posts · May 2012
Dear all,
many, many thanks for help.
Atahualpa was the best choice.
I am grateful.
Once again, thank you.
Best regards!

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Delay in changes taking effect? Jerry Atahualpa 3 Wordpress theme 11 Jan 7, 2010 02:59 PM
[SOLVED] Layout WIDTH vs. Layout Container Olivier Header configuration & styling 2 Jul 13, 2009 06:18 PM
Drop shadow in center column kal Header configuration & styling 6 Jun 18, 2009 07:39 PM
How to turn of the form/text field shadow? Fux Atahualpa 3 Wordpress theme 2 Apr 27, 2009 08:06 PM
Need drop shadow added to the body of my post's nickcee Atahualpa 3 Wordpress theme 1 Feb 26, 2009 06:21 PM


All times are GMT -6. The time now is 11:12 PM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.