WordPress.com

1. elizabethhallmagill
   Member
   Aug 31, 2011, 1:38 PM

   Hi,

   I've just purchased the Custom Design option for Chateau, and I'm attempting to use a square image for my header, rather than a thin rectangular one. Is this possible? I've tried changing the dimensions of the header in the CSS code, but the change isn't showing up in the header.

   Thanks!

   Elizabeth Magill

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

2. designsimply
   Staff
   Aug 31, 2011, 4:18 PM

   I'm not sure just changing the header to square is what you really want to do because it will leave a lot of empty space on the right. How would you want to arrange other elements surrounding the header if you made it square?

   For example, this will make the header image in the Chateau theme square:

   #main-image {
       height: 260px;
       width: 260px;
   }
   #main-image img {
       height: 260px;
   }

   Note that you would probably also want to change out the image, the example above is just for illustration so you can see the dimension change.

3. elizabethhallmagill
   Member
   Sep 2, 2011, 2:40 PM

   You have a good point about the extra space. I was trying to create a header with the title of the blog and then a square pic next to it, rather than just one wide pic. I've put the picture on the left, in the sidebar, and this is working for now--though if you have suggestions for how to move the picture up next to the header, it would be nice to try that as well!

   Thanks for your help!

4. designsimply
   Staff
   Sep 2, 2011, 4:39 PM

   First, I would recommend using the image edit options to get the square image at the size you want. Copy the URL after you edit the image in the media librar and then use that image instead of the one in the example below.

   Here's an example of how you might put a background image next to the header text in the Chateau theme:

   hgroup {
       background: url(http://elizabethhallmagill.files.wordpress.com/2011/08/shavingwomanxsmall1.jpg?h=124) no-repeat 25px 0px;
   }

   Note that you should adjust the image URL and spacing settings as necessary.

5. elizabethhallmagill
   Member
   Sep 2, 2011, 4:50 PM

   Wonderful--thanks! I will play around with this--it looks like exactly what I'd like to do! Thanks again!

6. designsimply
   Staff
   Sep 2, 2011, 4:54 PM

   Cool!

Topic Closed

This topic has been closed to new replies.