Shadow page

  • Author
  • #903417


    How do I make this shadow page effect on my blog –


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


    The blog I need help with is


    I checked out the 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:

    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.


    Here’s the official info about the box-shadow-property:

    And here’s a browser compatibility chart for box-shadow:


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

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


    Thanks DS,

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



    The box as in the entire #container?


    Yes, so it takes up more width.


    Try this:

    #container {
    	width: 1200px;
    .page #content, #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('') 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.


    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:


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

    Good night i’m going home.

    Thanks 100000px


    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.

The topic ‘Shadow page’ is closed to new replies.