WordPress.org

Ready to get started?Download WordPress

Forums

Patchwork
Changing header (5 posts)

  1. beyourpet
    Member
    Posted 1 year ago #

    I'm using the babycakes version of the patchwork theme. I've had no trouble with it so far, it's a great theme, other than attempting to change the header.
    Now, I have been able to change the patchwork background no problem, but I'm trying to use an image for the header (like, Worpress allows you to upload a header for this theme and it automatically uses it because the code is for using the "custom header"). But I don't want to upload the custom header to WordPress, I want to use my own image that is hosted somewhere else, but I can't seem to figure out how to do this in the coding. It all refers to "custom header" instead of the ability to use an image link. The reason i don't want to use the custom header feature is because WordPress is sizing the image down and not allowing parts of it to be transparent as the should be (I've tried it both as a PNG file and as a GIF).

    My blog is at http://beyourpet.com/diary but that might not be useful as I'm editing them theme using the Theme Test Drive plugin.

    This is what the code for the header looks like on style.css, the image link used here is working fine, I'm using that image as the background to the header. I just need to change the actual header image to be something else (I want it to be around 900px in width instead of the default 650px that WordPress is sizing it down to.)

    }
    .style-babycakes #masthead {
    	background-image:url("http://beyourpet.com/diary/wp-content/uploads/2012/12/secondbackground.png");
    	border-bottom: 10px solid #774f47;
    }
    .style-babycakes #masthead hgroup {
    	border: 0px solid #774f47;
    }
    .style-babycakes #masthead .site-title,
    .style-babycakes #masthead .site-title a {
    	color: #ef9595;
    }
    .style-babycakes #masthead .site-description {
    	color: #774f47;
    }

    The only other code I know of on here referring to the header is on header.php and custom-header.php but I'm not sure what to do with it...

    I'm not the most experienced at coding, I just mess around until I get it most of the time, so please go ahead and talk to me like I have no idea what I'm doing, I would appreciate it.

  2. Caroline Moore
    Member
    Theme Author

    Posted 1 year ago #

    Hi! This will take a bit more than a CSS fix. You'll need to use a child theme, because the default header size is determined by the files in inc/custom-header.php.

    This thread (different theme, same question) should help. Replace any references to "spun" with "patchwork".
    http://wordpress.org/support/topic/make-header-larger?replies=3

    You may also need to make adjustments to the #masthead, since it isn't designed to accomodate the larger header image. You would do this using CSS as you have been, setting #masthead's width to whatever size you'd like.

  3. beyourpet
    Member
    Posted 1 year ago #

    Thank you for the quick response! :D I will try this out, thanks. And thank you for making such gorgeous themes, I really love all the ones you have available.

  4. beyourpet
    Member
    Posted 1 year ago #

    One more question.
    If I were to use the custom header that you upload through WordPress, is there any way to make the header align to the left rather than the center?
    Basically at this point I'm just playing with the different options because I've never made/worked with a child theme so it might take a lot more teaching myself than I was hoping to do at the moment.

  5. Caroline Moore
    Member
    Theme Author

    Posted 1 year ago #

    This should work, but I haven't thoroughly tested it:

    #masthead hgroup {
      text-align: left;
    }

    (In general, we don't offer basic CSS support in this forum, but there are some great resources here.)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic