Jump to content
dawsonbarber

How can I add box-shadow around a full page (header with navbar with content)?

Recommended Posts

dawsonbarber+    19
dawsonbarber

I've got a site where the header, navbar, and content all share a white background, so they are all sitting inside of, basically, a white box. I want to style that "box" with the following CSS:

{
-moz-box-shadow: 0 0 5px #B7A2A3;
-webkit-box-shadow: 0 0 5px #B7A2A3;
box-shadow: 0 0 5px #B7A2A3;
}

But I can't find anyway to select a containing element that includes all of them together.

 

I'm only able to select elements within (like the header, navbar, etc) which, of course, adds the box-shadow around each element...not the effect I want.

 

I've tried both fixed and fluid with layouts but can't seem to work this out.

 

What am I missing?

Share this post


Link to post
Share on other sites
dawsonbarber+    19
dawsonbarber

"What am I missing?"

 

Answered my own question: a brain, clearly.

 

.page-canvas {
-moz-box-shadow: 0 0 5px #B7A2A3;
-webkit-box-shadow: 0 0 5px #B7A2A3;
box-shadow: 0 0 5px #B7A2A3;
}

Cheers

  • Like 1

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there,

 

we have the shadow for the canvas area built in, its only setup to be used in 'fixed width mode'. You'll find this in the color control tab. See below

 

http://screencast.com/t/HgvTKWpUZw


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
dawsonbarber+    19
dawsonbarber

Thanks, James.

 

The only thing with that is that I can't control the colour directly through that option, so .page-canvas does the trick.

 

Cheers,

 

Dawson

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

    • Houston Haynes
      By Houston Haynes+
      Hey folks - I'm trying to get right of some 'dead space' at the bottom of the page in the Material Theme. (see attached) Those two gray lines have an "Edit" button in between them when the browser has a login cookie for the site. Here I created a screenshot from a browser session that doesn't have context for my main login, so you can see that the "Edit" indicator is gone, but the bars and the space it occupies still remains. Can someone help me isolate this so I can make it *completely* disappear? Thanks.

    • j powers
      By j powers+
      Looking to fond the best way to add in some javascript, the script is from Salesforce to add a chat button, ie Chat available / chat offline.  I need to add this to a specific page though.
       
      Much apprciated 
       
    • tristanrodgers
      By tristanrodgers+
      Hi there!
      Hi would like to have the thumbnail photos on the left side and not on the top of the topic to the blog post. Where can i fix that?
      http://mc1r-magazine.com/blog/
      Greetings from Hamburg,
      Tristan
    • zetanet
      By zetanet+
      I would like to use 10 iboxes (always the same 10 iboxes) as left menu on 12 pages. In this way, all pages have the same left menu and they changes only for the page main content.
      I don't want to set all 10 iboxes in all 12 pages (cause i should repeat 12 times the same values).
      Is it possible to duplicate a page with all the boxes already set eleven times in order to keep iboxes images/links and change only the page main content?
    • targethr
      By targethr
      Dear Pagelines,
       
      I have created pages and put in different elements and have worked on them. I would like to create new pages and shift some of these elements or copy paste some of these into the new pages.
       
      Is there a way to do this?
       
      Cheers,
      Radha
×