Genesis Framework – How to change custom header css code?

1 Views

I am using the genesis framework and I want to support a header image within my child theme. I want to change the position of the image that i uploaded to be the header image.

I added this line of code within my functions.php:

Read More
add_theme_support( 'genesis-custom-header', array( 'width' => 213, 'height' => 300) );

Genesis now generates css code for the .site-header within the front page: 

.site-header { background: url(http://localhost:8888/studio/wp-content/uploads/2014/09/my_logo.png) no-repeat !important; }

I want to change this code, as i want to apply some other CSS stuff to my <header> like background-position, background-size etc. I saw in the official documentation that I can use 'header-callback' within add_theme_support, but how does it work exactly? How do i have to write my callback function that WP automatically changes the code which is generated for .site-header as above?

If i change .site-header within my style.css file it changes nothing. It has to be generated as above, but how?

Thanks!

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. CSS written in style.css should override default style! Are you sure mark-up are the same?

    You can try to use ‘!important’ declarations in css value to give priority, example

    .site-header {
    background-size: cover !important;
}

    Also, you can add more values to custom header array:

    add_theme_support( 'genesis-custom-header', array(
    'default-image' => get_stylesheet_directory_uri() . '/images/logo.png',
    'default-color' => 'efefe9',
    'header_image'    => '',
    'header-selector' => '.site-title a',
    'header-text'     => false,
    'height'          => 115,
    'width'           => 960,
) );

    And style your logo with:

    .site-header .site-title a {
     //your css here
}

    Please note that this snippet works if you are using child theme (as I think)

    Hope it helps 😉
    Francesco