Shadow page

• 

  jeremyshub693 · Member · May 31, 2012 at 11:20 am

  • Copy link
  • Add topic to favorites

  Hello,

  How do I make this shadow page effect http://newpi.wordpress.com/ on my blog – http://www.JeremyShub.com.au

  Thanks

  P.S I have asked a few questions tonight. I hope thats OK

  Thanks

  The blog I need help with is: (visible only to logged in users)

• 

  designsimply · Member · May 31, 2012 at 3:53 pm

  • Copy link

  I checked out the http://newpi.wordpress.com/ site, and I see it’s is using the Sundance theme. Sundance actually sets the shadows on the right and left sides of main container area using a background image which you can see here:
  http://newpi.files.wordpress.com/2012/05/bgn.jpg

  With CSS3, you can add shadows without having to use images, but note that CSS3 is new and only the latest browsers support it. If you’d like to give it a try, you can even add multiple shadows in order to get both left and right at the same time. Here is an example of how to add a box shadow to the #container element in the AutoFocus theme:

  #container {
  	box-shadow:-5px 0px 10px #888, 5px 0px 10px #888;
  }

  If you do that, you may also want to setup some padding too, like this:

  #container {
  	padding: 20px;
  	box-shadow:-5px 0px 10px #888, 5px 0px 10px #888;
  }

  You can of course adjust the numbers and color codes to whatever you’d like.

• 

  designsimply · Member · May 31, 2012 at 3:54 pm

  • Copy link

  Here’s the official info about the box-shadow-property:
  http://www.w3.org/TR/css3-background/#box-shadow

  And here’s a browser compatibility chart for box-shadow:
  http://caniuse.com/#search=box-shadow

• 

  designsimply · Member · May 31, 2012 at 3:55 pm

  • Copy link

  P.S I have asked a few questions tonight. I hope thats OK

  I’m glad you’re excited about customizing your WordPress.com blog!

• 

  jeremyshub693 · Member · May 31, 2012 at 4:24 pm

  • Copy link

  Thanks DS,

  I’d like the box to be wider. Which value do I change?

  Jeremy

• 

  designsimply · Member · May 31, 2012 at 4:33 pm

  • Copy link

  The box as in the entire #container?

• 

  jeremyshub693 · Member · May 31, 2012 at 4:37 pm

  • Copy link

  Yes, so it takes up more width.

• 

  designsimply · Member · May 31, 2012 at 5:07 pm

  • Copy link

  Try this:

  #container {
  	width: 1200px;
  }
  #header-wrapper,
  #content,
  .page #content,
  .attachment.page #content,
  #footer {
  	width: 100%;
  }

  Adjust 1200px to the width you’d like to use. Note that this does not take into account the sidebar or some of the AutoFocus featured image settings because you aren’t using those. If you make updates to your blog that incorporates other features, you will also need to update the CSS at that time.

  If you change the width, the header image will not update automatically but you can replace it manually. First, you need to upload an image to your media library using Media → Add New in your blog dashboard. Then copy down the image URL. Add this to your Appearance → Custom Design → CSS:

  #header-image {
  	background: url('http://jeremyshub.files.wordpress.com/2012/05/jeremy-word-press-header-3.jpg') no-repeat;
  	width: 1200px;
  	height: 216px;
  }

  Change the url() value to an image link from your media library. Change the width value to the width of your image. Change the height value to the height of your image.

• 

  designsimply · Member · May 31, 2012 at 5:09 pm

  • Copy link

  Note that I found which selectors to use to adjust the #container width and other elements inside #container by looking for any major site elements that were using “width: 800px” in the original theme stylesheet here:
  https://s1.wp.com/wp-content/themes/pub/autofocus/style.css?m=1335393443g&minify=false

• 

  jeremyshub693 · Member · May 31, 2012 at 5:14 pm

  • Copy link

  Thanks – I’m bamboozled by that page of code. I’ll leave that for you.

  Good night i’m going home.

  Thanks 100000px

• 

  designsimply · Member · May 31, 2012 at 5:17 pm

  • Copy link

  Thanks – I’m bamboozled by that page of code. I’ll leave that for you.

  My goal is to teach you more about how to read it as we go. ;)

  You should also learn how built in browser tools such as web inspectors work. The Firefox extension for Firebug is an excellent example, and most modern browsers have a web inspector built into theme these days. They let you right-click on an element on a web page and see the HTML for what you clicked on as well as all the CSS that applies to it. It’s amazingly helpful when working with CSS.