Increase Header Image

Dazzling
1

Please provide code that I can place in the Jetpack style sheet editor.

I am looking to increase the header image from current default size of 300 x 60
to a size of 567 x 335.

I also want to increase space (padding) above header image.

Thanks much.

2

Ok, just sharing, I figured out how to allow a larger image for my header.

To use any image size for header image you should slightly edit theme code. Inside custom-header.php file that you can find in Dazzling folder >> inc. You should add

flex-width’ => true,
right below this line:
flex-height’ => true,

Flex height was already in the custom header. php section.

After I added in the flex-width, I then went to appearance>header and reapplied my larger image. I did not hit crop image. The larger image appeared on my welcome page.

However, I need to figure out how to increase top margin above the image (using Jetpack)

Any help will be appreciated. Thanks Much Grey

3

Hi @Grey22,

Awesome great to see you got that figured out.

However, I need to figure out how to increase top margin above the image (using Jetpack)

Could you please share me the page URL from your site where you are displaying the image so that i can help you?

Kind Regards,
Movin

4

Hello Again

This is the link to the page

Thank you for your help!

5

Thanks for sharing the page URL.

However, I need to figure out how to increase top margin above the image (using Jetpack)

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Dazzling Options -> Other -> Custom CSS

#logo img {
    margin-top: 50px;
}

Change the value 50px in the above code to increase or decrease the margin.

6

Hello Movin

I applied your recommended code and it worked perfect.

#logo img {
margin-top: 50px;
}

This will help other novice designers as they scan the Dazzling forums.
Thank you!

7

You are most welcome here :slight_smile: