WordPress.com

1. superdiscount
   Member
   Apr 3, 2012, 12:23 AM

   Hello all:

   Here's the site:

   http://summerwriters.wordpress.com/

   I was curious to know if it was possible to format a background image for the Chunk theme that ended up resembling stationary "frames" on the left and right margins of the header/menu/page space. I've fooled around with photoshopping whitespace into the background image but (given the variety of displays that the site might be viewed on) it seems unlikely that I can stabilize the image so that the header/menu/page space won't overlap. Any ideas on how one might do this (if it is, indeed, do-able)?

   Thanks in advance for any input!

   The blog I need help with is summerwriters.wordpress.com.

2. designsimply
   Staff
   Apr 4, 2012, 9:16 PM

   I was curious to know if it was possible to format a background image for the Chunk theme that ended up resembling stationary "frames" on the left and right margins of the header/menu/page space.

   Do you mean you want the ripped page borders from the right and left on the current header image to continue all the way down the page?
   http://summerwriters.files.wordpress.com/2012/03/headersoft11.jpg

   That's doable. You'll need to create the background image yourself though. What you'll want to do is take a copy of the background image you have now and erase all of the icons in it. It's up to you whether to keep the shading in the middle, but if you keep it, make sure the gradient is horizontal and not radial or the background image will look strange repeated. The top and bottom lines for the page will need to be made to match up too.

   I hope you do it! I think it will look really cool! Post back if you can get an image created.

   Here is a rough example showing the kind of thing you could do using the current header image from your http://summerwriters.wordpress.com/ site:

   #container {
   background: url(http://summerwriters.files.wordpress.com/2012/03/headersoft11.jpg) repeat-y;
   }
   
   #header-image,
   #site-title,
   #site-description {
   margin-left: -21px
   }
   
   #footer {
   padding-bottom: 3em;
   }
   
   #menu, #widgets, #footer {
   border: none;
   }

3. superdiscount
   Member
   Apr 5, 2012, 5:14 PM

   thanks so much Designsimply!

   was able to put some time in today and your css fixes work really well. a lot to do yet, but your suggestions made the load much lighter. I may end up making the whole column wider, but for now, I'm more than happy. again, thanks, and a good weekend to you!

   Michael
   http://summerwriters.wordpress.com/

4. designsimply
   Staff
   Apr 5, 2012, 10:48 PM

   I may end up making the whole column wider, but for now, I'm more than happy.

   Good to hear! I like the way it looks so far. :)

   When you get to a point where you want to make the whole column wider, just create new, wider background images and replace the image links in the relevant places you've used url(). If you run into any trouble, post the links to your resized images and I can help you out with the CSS if needed.

Topic Closed

This topic has been closed to new replies.