Jump to content
greenfly

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

Recommended Posts

greenfly

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!


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
greenfly

The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
James B

Hi there, try this


.fixed_width #footer {

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

}

  • Like 1

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
greenfly

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


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
Jenny

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;

}

  • Like 1

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
James B

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

  • Like 1

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
greenfly

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.


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
greenfly

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.. -_-


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
James B

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.

  • Like 1

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
greenfly

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

thanks - i will let you know.


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
Danny

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

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
greenfly

Great stuff, that does work. Thanks very much


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
Danny

Coolio!

The topic was marked as resolved.

  • Like 1

Please search our forums, before posting!

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


  • Similar Content

    • Michael Kummer
      By Michael Kummer+
      Hi fellow forum members,
      Is it just me, or has the PageLines staff gone dark? I have multiple open threads with zero response and some have been open for months. As a paying customer, that is pretty frustrating. Does anyone else has made the same experience? Any suggestions on how to get support here?
      Thanks
      Michael
    • Paul
      By Paul+
      I was surprised to see I had no menu today - out of the blue - its actually moved to the bottom of the page!  After hours of fiddling and disabling every single plugin, leaving just plagelines the issue is still present.  See video for a basic text box - I moved it into the head and it jumps to the bottom and shows just above the footer but below the main content.  I have a temp fix by placing the menu into the first row on the main content but it does mean other than my home page, all other pages have no menu.  A quick fix is very urgent for this bug.
      https://thelaptopfixers.com
       
       
    • Grant Turck
      By Grant Turck+
      The Nav Pro section on our site venicepride [dot] org keeps breaking. Can someone help us out with why it is breaking or how to fix. Willing to pay. 


    • Thijs
      By Thijs+
      Hi,
      somehow my post navigation won't show up beneath a post.
      Link to the website (Platform 5)
      Also with all plugins deactivated nothing shows up.
      I'd also like to make the post navigation visible on custom post types.
      What should I do:
      Continue to look for a CSS error? Or make a new section with a post navigation? ... ? Somebody give me hint please?
      Kind regards,
      Thijs
       
       
    • Houston Haynes
      By Houston Haynes+
      OK - folks - back with another nit... The "back to top" link works - BUT - it's only active (i.e. clickable with the associated action following) when the mouse-over hovers over the footer area of the page. I did a quick change of the z-depth (to -1) and nothing made a difference. Any thoughts on how to make the *entire* back-to-top icon hover-able/actionable? Thanks!
       

×