Jump to content

Archived

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

sheilahoff

Shadow on responsive "Full Screen Sections"

Recommended Posts

sheilahoff

I've setup two mockups of the same dev site for a client.

 

http://www.solsara.hoffmangraphics.com is setup as a fixed width and has the shadow turned on.

http://www.mike.hoffmangraphics.com is setup with Full Screen Sections and of course there are not shadows.

 

My question is how to add a comparable shadow. I've gone to the CSS3 box shadow generator and created the CSS code below but when I use Firebug it appears that by the very nature of being a responsive grid there isn't really something to assign the shadow code to! I'm hoping that's just my lack of experience with the tools and someone can inform me how to achieve a similar drop shadow affect on my resonsive version of the site...Is it possible? If so how?

 

Here's what I generated for the shadow:

-webkit-box-shadow: 3px 0px 5px rgba(50, 50, 50, 0.32);
-moz-box-shadow:    3px 0px 5px rgba(50, 50, 50, 0.32);
box-shadow:         3px 0px 5px rgba(50, 50, 50, 0.32);

-webkit-box-shadow: -3px 0px 5px rgba(50, 50, 50, 0.32);
-moz-box-shadow:    -3px 0px 5px rgba(50, 50, 50, 0.32);
box-shadow:         -3px 0px 5px rgba(50, 50, 50, 0.32);

Thanks.


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
Rob

Try this:

 

.canvas .page-canvas, .thepage .content, .sf-menu li, #primary-nav ul.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active, .commentlist ul.children .even {
    background-color#FFFFFF;
    box-shadow0 1px 5px rgba(0, 0, 0, 0.8);
}

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
sheilahoff

Thanks Rob. That sort of works. BUT...what controls the placement? If you look at the mike one now the shadows on the side are great however I don't want shadows horizontally between the header, content area and footer.


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
Rob

Sheila, you have to experiment with the CSS and find the specific solutions using Firebug or Chrome's tools.  We cannot design your site for you. Some experimentation will take you to your ultimate destination.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
sheilahoff

I wasn't asking for you to design my site and I have used Firebug. Since you DID provide the initial code I thought it reasonable to ask how to tweak it. I've tried Firebug on this and I'm not seeing what needs adjusting. I guess I'll look elsewhere for help. I'm disappinted.


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
James B

Hi there,

 

If you want to apply a shadow to the main page canvas you can do so in the color control tab if the site is set to fixed width.

 

There's an option for 'content shadow' in the color control tab which will add a shadow effect to the main page container.


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
sheilahoff

Thanks James...but if you're using full-width doesn't work. I thought using fixed width was frowned upon as less responsive/mobile-friendly.

But even if I go that route which it looks like I will be doing, if I want my footer content to have a background as shown on my dev site here: http://www.solsara.hoffmangraphics.com I now need to figure out code for HOW to add a drop shadow to the footer to match the content area?


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
James B

Hi Sheila

 

Yes unfortunately the fixed width version applies all the sections into a central container, so it applied the shadow to that one container. In full width mode it applies each section full width, so there's no central container around all the elements to apply the shadow to, it will apply them to each one. So you'd have boxes everywhere.

 

I've done a short video cast to show you how I would apply the code to the footer. http://screencast.com/t/TfArs0GO

 

I would look in firebug for the page canvas area, as that's where the shadow is applied. Copy the code for the shadown and then find the footer container. In the css area for the footer, I'd manually enter box-shadow and then paste the code to see the effect. Then I'd copy the new code for the footer and paste into the custom code box inside pagelines.

 

body.fixed_width #footer {
    box-shadow0 1px 5px rgba(0, 0, 0, 0.8);
}
 
Hope that helps :-)

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
sheilahoff

VERY helpful. My appointment for the evening just arrived so I'll have to experiment with this tomorrow. I'll report back.


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
James B

You're welcome, let us know how you get on :-)


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
sheilahoff

I posted the wrong message here. I'm moving it over to the correct place and reporting back that the code you provided worked a treat! The video really helped me to see how you were finding the right spots. THANK YOU! What was very odd was that I could not get Firebug to take the code even though I repeated exactly what you did. But I went ahead and put it in the Custom CSS and it worked as desired. Good to go! You're the best! Thank you.


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
greenfly

Thanks for letting us know that worked 


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
sheilahoff

I'm now trying to do this again (same site) but I've converted it from Framework to DMS. It's located here: http://etc.hoffmangraphics.com/

 

At the moment it has no shadow on it.  I have the CSS I need but I'm having a hard time finding a selector that has it not leave a horizontal line across it.

 

 

I tried this:

 

body.display-boxed .boxed-wrap .pl-area-wrap > .pl-content {box-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);} which puts a nice shadow down the sides which I want but I can't figure out any way to make the horizontal lines not also appear.

 

I realize this should be in the DMS section but since there was a whole thread about this topic here and I was the OP I thought I'd try here first. Thanks.


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
Danny

Not sure what you mean by horizontal lines ?

Can you provide a link to a similar site or a concept image of what it is you're trying to achieve.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
sheilahoff

Sure Danny, thanks. The old framework site shows the box shadow as I'm trying to recreate it in DMS at http://www.solsara.hoffmangraphics.com.

 

I've attached a screen capture of the above CSS in my new DMS version of the site. Notice the shadow between the header and body that the red arrows point to. That's what I do not want.


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites

×