Jump to content


Photo
- - - - -

shadow box in background homepage


Best Answer jnop2001 , 22 April 2013 - 03:31 PM

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

Go to the full post


  • Please log in to reply
14 replies to this topic

#1 jnop2001

jnop2001

    Advanced Member

  • Members
  • 55 posts
  • Country: Country Flag

Posted 19 April 2013 - 03:51 PM

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:

Please Login or Register to see this Hidden Content

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

site: www.vpl.pt

 

best regard for all the team



#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 19 April 2013 - 04:27 PM

Can you please post a link to your site?



#3 jnop2001

jnop2001

    Advanced Member

  • Members
  • 55 posts
  • Country: Country Flag

Posted 19 April 2013 - 11:17 PM

Please Login or Register to see this Hidden Content



#4 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 20 April 2013 - 12:12 AM

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



#5 jnop2001

jnop2001

    Advanced Member

  • Members
  • 55 posts
  • Country: Country Flag

Posted 20 April 2013 - 12:42 AM

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

 

 inisde the CSS/LESS Rules:

Attached Files



#6 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 20 April 2013 - 01:15 AM

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

Please Login or Register to see this Hidden Content

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

Please Login or Register to see this Hidden Content



#7 jnop2001

jnop2001

    Advanced Member

  • Members
  • 55 posts
  • Country: Country Flag

Posted 20 April 2013 - 08:41 AM

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"



#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 20 April 2013 - 02:55 PM

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.



#9 jnop2001

jnop2001

    Advanced Member

  • Members
  • 55 posts
  • Country: Country Flag

Posted 22 April 2013 - 11:12 AM

you mean the settings of "Layout Editor"?

 



#10 Danny

Danny

    Is Awesome!

  • Moderators
  • 16358 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 22 April 2013 - 11:52 AM

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.

 

Please Login or Register to see this Hidden Content

 

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

 

 

Please Login or Register to see this Hidden Content

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



#11 jnop2001

jnop2001

    Advanced Member

  • Members
  • 55 posts
  • Country: Country Flag

Posted 22 April 2013 - 11:56 AM

i will try thaks



#12 Danny

Danny

    Is Awesome!

  • Moderators
  • 16358 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 22 April 2013 - 11:58 AM

No problem!



#13 jnop2001

jnop2001

    Advanced Member

  • Members
  • 55 posts
  • Country: Country Flag

Posted 22 April 2013 - 03:31 PM   Best Answer

well my feed back:

 

for

Please Login or Register to see this Hidden Content

#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 

 


Please Login or Register to see this Hidden Content

ie, chrome and firefox ok



#14 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 22 April 2013 - 06:05 PM

Do you need further assistance with this issue?



#15 jnop2001

jnop2001

    Advanced Member

  • Members
  • 55 posts
  • Country: Country Flag

Posted 22 April 2013 - 06:37 PM

issue resolved

 

thaks