Need help? Check out our Support site, then


Shadow page

  1. 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 jeremyshub.com.au.

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

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

  4. 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!

  5. Thanks DS,

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

    Jeremy

  6. The box as in the entire #container?

  7. Yes, so it takes up more width.

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

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

  10. Thanks - I'm bamboozled by that page of code. I'll leave that for you.

    Good night i'm going home.

    Thanks 100000px

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

Topic Closed

This topic has been closed to new replies.

About this Topic