Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to increase height of custom header in Agency?
Tagged: agency header
- This topic has 12 replies, 2 voices, and was last updated 11 years, 3 months ago by docmas.
-
AuthorPosts
-
December 27, 2012 at 10:52 am #7688docmasMember
Want to have a custom header higher than the 115 default of the Agency theme. What codes needs to change to increase the height?
Thanks,
Adam
December 27, 2012 at 11:32 am #7696Jen BaumannParticipantYou need to edit the height here:
/** Add support for custom header */ add_theme_support( 'genesis-custom-header', array( 'width' => 960, 'height' => 115 ) );
as well as the css for header
#header { margin: 0 auto; min-height: 115px; overflow: hidden; text-shadow: 1px 1px #000000; width: 100%; }
December 27, 2012 at 1:20 pm #7729docmasMemberthank you, i'll do that.
adam
December 27, 2012 at 1:21 pm #7730docmasMemberassuming this is in style css, but find out soon.
December 27, 2012 at 1:35 pm #7733docmasMemberJen,
I made the two changes, yet when I uploaded the larger banner, I was asked to crop it to the 960 x 115 default. Please advise.
Thanks,
Adam
December 27, 2012 at 1:50 pm #7735Jen BaumannParticipantIf you're seeing that, then recheck the functions.php file for this line.
/** Add support for custom header */ add_theme_support( 'genesis-custom-header', array( 'width' => 960, 'height' => 115 ) );
That's the php that sets the custom header function up in the theme so the height must be changed there.
December 27, 2012 at 2:02 pm #7736docmasMember/** Add support for custom header */
add_theme_support( 'genesis-custom-header', array( 'width' => 960, 'height' => 175 ) );/* Header
------------------------------------------------------------ */#header {
margin: 0 auto;
min-height: 175;
overflow: hidden;
text-shadow: 1px 1px #000;
width: 100%;yet when i uploaded a new, "padded" 960 x 175 header, even though the wordpress theme says:
You can select an image to be shown at the top of your site by uploading from your computer or choosing from your media library. After selecting an image you will be able to crop it.
Images of exactly 960 ?— 175 pixels will be used as-is.and even though it didn't ask to crop, if you go to:
you'll see that it cropped.
December 27, 2012 at 2:05 pm #7737Jen BaumannParticipantLook at the css for this:
.header-image #title-area, .header-image #title, .header-image #title a { display: block; float: left; height: 115px; overflow: hidden; padding: 0; text-indent: -9999px; width: 350px; }
You might find this helpful: http://www.studiopress.com/tips/using-firebug.htm
December 27, 2012 at 2:11 pm #7739docmasMemberI set that as well and still no change. Can't imagine it's this complicated or that no one else has changed header height before. Anybody other thoughts?
December 27, 2012 at 3:32 pm #7744Jen BaumannParticipantYou need to change 115px to 175px, rather than removing the line altogether.
December 27, 2012 at 5:06 pm #7779docmasMemberI set the below to 175 px, but that's different than what you said I'm just noticing now. What you are asking for isn't showing up in Agency 2 in the files, is something missing?
/* Image Header - Partial Width
------------------------------------------------------------ */.header-image #title-area,
.header-image #title,
.header-image #title a {
display: block;
float: left;
height: 175;
overflow: hidden;
padding: 0;
text-indent: -9999px;
width: 350px;
}December 27, 2012 at 5:22 pm #7785Jen BaumannParticipantRight now you have this because height: 175; is invalid css:
.header-image #title-area, .header-image #title, .header-image #title a { display: block; float: left; overflow: hidden; padding: 0; text-indent: -9999px; width: 350px; }
Before you did anything, you had this, but you removed the height line after I told you to take a look at the above css.
.header-image #title-area, .header-image #title, .header-image #title a { display: block; float: left; height: 115px; overflow: hidden; padding: 0; text-indent: -9999px; width: 350px; }
Instead of removing the line, you needed to change it to look like this:
.header-image #title-area, .header-image #title, .header-image #title a { display: block; float: left; height: 175px; overflow: hidden; padding: 0; text-indent: -9999px; width: 350px; }
December 27, 2012 at 5:47 pm #7795docmasMembergot it, thank you SO much for your patience with me.
adam
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.