3

UPDATE: My question is not offtopic, because WordPress crops the logo image and not just CSS.

I'm trying to use a 4724 × 2362 png image as a site logo at the top of a WordPress website with the stock Twenty Thirteen theme.

By default the image height is cropped (here fullscreen) and you can't see the face of the person sitting at a table:

website screenshot

Being a WordPress newbie I have edited the section 4.1 in the file wp-content/themes/twentythirteen/style.css and changed 230px to 500px:

.site-header .home-link {
        color: #141412;
        display: block;
        margin: 0 auto;
        max-width: 1080px;
        min-height: 500px;
        padding: 0 20px;
        text-decoration: none;
        width: 100%;
}

Now the "header" is higher, but my problem is that the image is still cropped (I think at the moment when I set it as the "header image" for the theme 2013).

Please advise me how to fix this, probably by editing some PHP file under wp-content/themes/twentythirteen?

  • 1
    I've raised this issue already in meta: What is on topic and what not? Just waiting feedback. Go and check it out – Pieter Goosen May 13 '14 at 6:05
  • 1
    Great, got your question reopened. I hope that one on the two answers have answersed your question. If so, mark the apropriate one as accepted. If not, feel free to eplain where the answers are lacking so that we can try to help you futher in solving your problem – Pieter Goosen May 13 '14 at 12:07
2

First of all, do not change any files in the twenty thirteen theme. The reason been, twenty thirteen is updated regulary, so if you made changes to the theme, you WILL loose everything you have done to the theme. You should create a child theme

You need to change the function that set the header height to get your image correctly cropped. This function can be found in 'inc/custom-header.php' on lines 30.

'height' => 230,

To change this, create a functions.php in your child theme, and add the following code in the functions.php you've created. This function will override the default heigh and set it to 500px

<?php
function my_custom_header_setup() {
    $args = array( 'height' => 500 );
    add_theme_support( 'custom-header', $args );
}
add_action( 'after_setup_theme', 'my_custom_header_setup' );

You can then just add the following style as you mentioned to your child themes' style.css

.site-header .home-link {
        color: #141412;
        display: block;
        margin: 0 auto;
        max-width: 1080px;
        min-height: 500px;
        padding: 0 20px;
        text-decoration: none;
        width: 100%;
}
1

If you are using a recent version of wordpress it gives you the option of changing the header image in the CUSTOMIZE menu option (left bar under APPEARANCE) when you upload a new image it will ask you to crop it to the position you want.

If you have otherwise uploaded a replacement image via FTP (or other method) then you might try adding

.site-header {
     background-position:center center;
  }

This will center the image both horizontally and vertically. As long as the image is not being cropped beforehand this should give you a result closer to what I think you are looking for.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.