Header-Image

[xeastway]

Using Education Pro theme - Having trouble adjusting the size of the header image. Was initially 300x100. Need it to be 500x100. I have edited the title-area and header-image to 500. When I go to upload the image in the "Header" section of wp it still tries to crop it to 300x100.

/* Title Area
--------------------------------------------- */

.title-area {
background-color: #e44a3c;
box-shadow: 0 3px rgba(70, 70, 70, 0.1);
color: #fff;
margin: 0 auto;
padding: 20px;
position: absolute;
text-align: center;
width: 500px;
}

.header-image .title-area {
background-color: #fff !important;
padding: 0;
width: 500px;
}

.site-title {
font-size: 34px;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
}

.site-header .site-title a,
.site-header .site-title a:hover {
color: #fff;
}

.header-image .site-title > a {
float: left;
min-height: 100px;
width: 100%;
}

.site-description {
backface-visibility: hidden;
font-size: 16px;
line-height: 1.3;
}

.site-description,
.site-title {
margin-bottom: 0;
}

.header-image .site-description,
.header-image .site-title {
display: block;
text-indent: -9999px;
}

[nutsandbolts]

You'll need to change the custom header function in functions.php as well - once you've updated the width there, you shouldn't be asked to crop.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[betholson]

This is kind of an old post but for anyone in the future who wants to know how to do it:
Open the Education Pro Theme Editor in wordpress > click on functions.php

Find this section:
//* Add support for custom header
add_theme_support( 'custom-header', array(
	'width'           => 300,
	'height'          => 100,
	'header-selector' => '.site-title a',
	'header-text'     => false,
) );

Change the width and height to the size you want such as:

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'width'           => 200,
	'height'          => 200,
	'header-selector' => '.site-title a',
	'header-text'     => false,
) );

Keep in mind that if you change the size of your image to much larger than it already is, you might need to make adjustments to spacing on other pages so that the logo doesn't overlap elements such as the page title.

Good luck!

[Author]

Posts