Forums

Back ground shadow

Permalink
Hello!

I am trying to get this shadow on my page but I can't do it. Can any body help me with this?

In attachment is picture what I want to do and main css.

I would like to have shadow on the left and right side of the page like on this site:
http://tanakateruyo.com/

Thank you in advance!

2 Attachments

graviton
 
olliephillips replied on at Permalink Reply
olliephillips
This code will do it.

The #leftpagebackground and #rightpagebackground css selectors just need a 20px wide shadow image set up i.e.

#leftpagebackground{background: #000000 url('path/to/image.gif') top left repeat-y;}


Hope that helps

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body{background:#000000;margin:0px;padding:0px;}
#pagewrapper{position:relative;width:960px;height:auto;margin-left:auto;margin-right:auto;}
#floater{position:relative; width:960px;height:auto;}
#leftpageshadow{float:left;width:940px;height:auto;background:#FFFFFF;}
#page{float:right;width:920px;height:auto;background:#CA0000;}
#rightpageshadow{float:right;width:960px;height:auto;background:#999999;}
.clear{clear:both;}
</style>
</head>
<body>
<div id="pagewrapper">
Viewing 15 lines of 27 lines. View entire code block.
Steevb replied on at Permalink Reply 1 Attachment
Steevb
You could use CSS with a .class or an #id

{-moz-box-shadow:0px 3px 10px #333;-webkit-box-shadow:0px 3px 10px #333;box-shadow:0px 3px 10px #333}

Shows in MOST browsers, but not Camino or IE, except IE9.


Or use an image the width of the content, give it a glow in Ps or Fw. cut it to 1px or 2px high.

{background: #fff url(image/bg.jpg) repeat-y}

See attached.
graviton replied on at Permalink Reply
graviton
Hey Steev,

thank you for such a quick reply.
Still walking in circles here :0)

Can you be more specific where to put something?

Thanx a milion!
graviton replied on at Permalink Reply
graviton
Hey Ollie,

thank you for your quick answer, but I am still scratch my head with this.

Can you give me more details where to put this code?

I attached my main.css file in my first question, if it's any help to you?

I use default concrete theme.

Thank you in advance man!
olliephillips replied on at Permalink Reply
olliephillips
What I gave you there was a basic html page layout that would let you get the shadows working, not something you'd just paste into your theme as is.

If you get that working as a html file, outside of a C5 theme, you could either, use it as a basis for your own C5 theme, or move the elements that do the shadows into the C5 theme you are using.

Good luck
Steevb replied on at Permalink Reply 1 Attachment
Steevb
Find where you to place the shadow

#page #central {background: #fff url(images/bg.jpg) repeat-y; }


Put the image in the images folder to call it

Your CSS will want altering.

Try playing with padding?
graviton replied on at Permalink Reply 1 Attachment
graviton
Steev, you rock man!

I did it like you recommend and it works.
I almost got what I had in mind, but still not there yet.

Is there a way to expand #page#central area so the shadows on left and right side will be outside content area if you know what I mean?

I was trying to play with padding, but since I am still learning CSS you can imagine I am quite lost. I attach the picture in what kind of situation I am right now, and what would I like to achieve.

Really appreciated your advices and your time to help me.
Steevb replied on at Permalink Best Answer Reply 1 Attachment
Steevb
Try changing line 47 in your CSS to:-

#page{background: #fff url(images/bg.jpg) repeat-y; width:1000px; margin:auto; text-align:left; padding:0 20px}

with attached image.
graviton replied on at Permalink Reply
graviton
Hey Steev,

I did it. Thanx a million!
I had to do some changes with bg picture of entire content to achieve transparent shadow effect on background of the web site, and now it looks almost perfect. Still have to scratch my head with some css corrections and then I am done.

Your support helped me a lot!

Thank you!