[SOLVED] How to create (drop) shadow effect around the layout container ?
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 |
1 Attachment(s)
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; |
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. |
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!! |
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 |
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. |
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. ;) |
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".
|
Quote:
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/ |
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.
|
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 |
Go to the CSS Inserts area of the theme options and paste in the following.
HTML Code:
#container { |
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 |
Dear all,
many, many thanks for help. Atahualpa was the best choice. I am grateful. Once again, thank you. Best regards! |
All times are GMT -6. The time now is 03:48 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.