Jump to content
greenfly

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

Recommended Posts

greenfly    230
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    230
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    436
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    230
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    33
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    436
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    230
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    230
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    436
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    230
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
greenfly    230
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    1,327
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

    • 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!
       

    • romanondrasek
      By romanondrasek
      hi all, I have some trouble using PL5 on my site. 
      I used plugins for event calendar (event on) and plugin (timetable responsive scheduler for WP) for schedule (classes) in the gym.
      The problem is, that post from this 2 plugins are shown without menu in header and footer. (I setup header and footer) in the page editor for all type of page. 
      When I create a lesson, it creates posts with slug (I have a slug "lekce" & event for events).
      I try to edit the post with PL editor, but editor is not opening on the post.

      Do you have some idea where should be some problem? Thanx so much.
      here are links for the sites :
      site with schedule :
      http://www.myfit.cz/rozvrh/
      site of one of the class (pilates)
      http://www.myfit.cz/lekce/pilates/
      site with calendar :
      http://www.myfit.cz/kalendar/
      7 side with one event from the calendar :
      http://www.myfit.cz/event/pilates-instruktor-akreditovana-licence/?ri=1
      when I have my site on DMS2 it was working :-(
       
       
    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      I have been unsuccessfully trying to get my 3-column widgetized footer aligned centered. The widget section itself is aligned left because the alignment appears to be controller the widget's content only. The container that contains the widget section is aligned centered. I have chosen a 3 column layout and I added 3 widgets, assuming they would be aligned centered.
      Any idea of what I may be doing wrong?
      The page is question is: http://www.michaelkummer.com
      Thanks
      Michael
×