Jump to content
Sign in to follow this  
jnop2001

shadow box in background homepage

Recommended Posts

jnop2001    0
jnop2001

hi

 

i am trying to put a shadow box in my homepage site

 

ie nok

fiferfox nok

chrome ok but in footer doesn´t work

 

the sintax i am using is:

.section-brandnav .content   {
  
box-shadow: -3px -3px -3px #888; 
-moz-box-shadow: -3px -3px -3px #888; 
-webkit-box-shadow: -3px -3px -3px #888; 
  margin-top: -5px; 
  position: relative;
  width: 100%;
}


#site .content   {
  
box-shadow: -3px -3px -3px #888; 
-moz-box-shadow: -3px -3px -3px #888; 
-webkit-box-shadow: -3px -3px -3px #888; 
  position: relative;
  width: 100%;
}


#footer .content {
  
box-shadow: -3px -3px -3px #888; 
-moz-box-shadow: -3px -3px -3px #888; 
-webkit-box-shadow: -3px -3px -3px #888; 
  position: relative;
  width: 100%;

}

Please, Can you help me to find de class/ids to resolv this?

site: www.vpl.pt

 

best regard for all the team

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, try applying the box shadow to the #sb_footercols


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
jnop2001    0
jnop2001

i try to apply the box shadow to the #sb_footercols but i dont have sucess!

 

 inisde the CSS/LESS Rules:

post-46740-0-51794200-1366418521_thumb.j

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, I've just tried the following and it's working on my test install.

body.fixed_width #footer {
box-shadow:5px 5px 5px 5px;
-moz-box-shadow: 5px 5px 5px 5px; 
-webkit-box-shadow: 5px 5px 5px 5px;
}

As your using negative figures so the shadow effect goes inwards, have you got any css which colors the footer area that could be covering the shadow affect? Or a color in the color control tab for the content/page canvas area which could be covering the shadow effect?

 

When i use the above on mine i get http://screencast.com/t/epkhLugeO


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
jnop2001    0
jnop2001

hi the color is just a exemple to split the diferents class/ids i use ( header, page, footer). I will try the class "body.fixed_width #footer"

Share this post


Link to post
Share on other sites
Rob    547
Rob

Hi,

 

Depending on the layout selected, the method of applying the box-shadow may change.  The one sure way of doing this is to apply a background image, but that's not responsive or necessarily desirable.

 

Can you take a screenshot of your layout settings and post them here? I'll try to reproduce your settings and see if I can find a way to apply the box-shadow.  The footer is outside the scope of the page's content area, so it tends to require custom solutions.

 

I will be in most of the day tomorrow, Sunday, and will be happy to work on it then.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
jnop2001    0
jnop2001

you mean the settings of "Layout Editor"?

 

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

The image you provided is super tiny, so I can't make out what you're trying to accomplish, but if I understand correctly, you want to have something like this.

 

http://cl.ly/image/3W1j1S0p3620

 

If so you want to target the page-canvas class, something like this: (remember that this is a basic example)

 

 

#page .page-canvas {
box-shadow: 0 0px 10px #000;
}

You will also need to target your footer area too, as this is not connected to the page-canvas container.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

No problem!


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jnop2001    0
jnop2001

well my feed back:

 

for


#page .page-canvas  {
  
box-shadow: -3px -3px -3px #888; 
-moz-box-shadow: -3px -3px -3px #888; 
-webkit-box-shadow: -3px -3px -3px #888; 
  position: relative;
  width: 100%;
}
 
 
 

chrome ok

ie nok

firefox nok

 

and 

 


#footer .content {
  
box-shadow: -3px 3px 3px #888; 
-moz-box-shadow: -3px 3px 3px #888; 
-webkit-box-shadow: -3px 3px 3px #888; 
  position: relative;
  width: 100%;

}

ie, chrome and firefox ok

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×