Archived

This topic is now archived and is closed to further replies.

  • 0

Resolved Drop shadow on the footer as well as on page canvas using CSS


Question

Posted · Report post

Hi all..

On a site i am putting together the page canvas has the drop shadow that goes around the page and down to the footer and then stops. i have added a colour to the footer and i intend to change this eventually to a background image. Im confident in changing it to a background image using CSS so im ok with that, however when i try to add the drop shadow to the footer i cant seem to get it to work. Looks more complicated than i at first thought.

The page canvas uses the followng CSS to generate the shadow (i think)



.content-shadow.fixed_width .page-canvas {

  -webkit-box-shadow:rgba(0, 0, 0, 0.8) 0 1px 5px;

  box-shadow:rgba(0, 0, 0, 0.8) 0 1px 6px;

}

so i have added the following to the Custom Code


.content-shadow.fixed_width #sb_footcols .content  {

  -webkit-box-shadow:rgba(0, 0, 0, 0.8) 0 1px 5px;

  box-shadow:rgba(0, 0, 0, 0.8) 0 1px 5px;
i have tried other variations of this i.e. changing the
#sb_footcols .content

to


.footer

and some other variations have also been tried.

anyone any ideas what it is i am doing wrong?

thanks in adavnce!

Share this post


Link to post
Share on other sites

12 answers to this question

Posted · Report post

Hi there, try this


.fixed_width #footer {

box-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);

}

Hi James - this didn't work - thanks though

Share this post


Link to post
Share on other sites

Posted · Report post

You're using the wrong CSS selector. You don't need to use the ".content-shadow.fixed_width" as that applies to the original selector only. You only need to use the footer and apply the CSS to that, like:

.fixed_width #footer {

	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.8);

	-webkit-box-shadow:rgba(0, 0, 0, 0.8) 0 5px 5px;

}

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Greenfly, let us know if Jennys suggestion worked for you :)

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Jenny, Thanks for your help - i tried the following


.fixed_width #footer {

	    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.8);

	    -webkit-box-shadow:rgba(0, 0, 0, 0.8) 0 5px 5px;

}

But it didn't seem to work.

Share this post


Link to post
Share on other sites

Posted · Report post

i have tried a variety of selectors in various orders but none of them seem to work. I shall try again tomorrow and update the thread.. -_-

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Greenfly

Could you backtrack through your custom css for me and couple check everything. Make sure there's no ; or } missing.

I think there must be something else in the code above which isn't complete and therefore stopping anything else below it from working.

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Of course. I'm seeing through the screen now as tires so will check first thing (uk Time)

thanks - i will let you know.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

The code below works, I have just this moment tried it.


#footer {
.box-shadow( 0 1px 5px rgba(0, 0, 0, .8) );
}
[/CODE]

http://screencast.com/t/CB8SkUJlLmod

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Great stuff, that does work. Thanks very much

Share this post


Link to post
Share on other sites

Posted · Report post

Coolio!

The topic was marked as resolved.

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there, try this


.fixed_width #footer {

    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);

}

1 person likes this

Share this post


Link to post
Share on other sites