Header image size change

[rcwatson]

Hi. I’m having a problem when I upload my header image, which is the customer's logo. The theme wants to crop it to the default size that comes with the template (200?—100 or something). My customer's logo is slightly taller at 200x139.

To match the height and width of my customer’s logo, I modified the following code in my functions.php to what you see below

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

but I haven’t done any other CSS changes. I just need the logo to default crop to 200?—139, not that 200?—100 size that it wants to do by default, which results in the logo being chopped off at the bottom.

http://stage.custombuiltwindows.com

[Brad Dalton]

You may need to change the Value for the height in the CSS as well.

/* Logo, hide text */

.header-image .site-header .wrap {
	background: url(images/logo.png) no-repeat left;
	padding: 0;
}

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

Around line 895 of your child themes sty;e.css file.

You could also try uploading your image to your child themes images folder and naming it logo rather than use the Custom Header function as a second option.

---

Tutorials for StudioPress Themes.

[rcwatson]

Thanks. Adding that CSS did the trick.

[rcwatson]

Hi Brad,

I have a followup question for you on this one. The customer would like an ad to appear to the right of the site title header (the logo). I decided to go with the AdRotate plugin for ad management. It has a widget for adding new ads throughout the site.

I added a new CSS class:

.site-title-ad-area {
	border-style:solid;
	border-width:5px;
	width:940px;
	height:139px;
	margin-left:200px;
}

Then I added a new widget and widget area by modifying functions.php and front-page.php thusly:

front-page.php

genesis_widget_area( 'title-area-adrotate', array(
	'before' => '<div class="site-title-ad-area widget-area"><?php echo adrotate_ad(1); ?>',
	'after'  => '</div>',
) );

The code

<?php echo adrotate_ad(1); ?>

is what brings in the ad.

functions.php

genesis_register_sidebar( array(
	'id'          => 'title-area-adrotate',
	'name'        => __( 'Title Area AdRotate', 'executive' ),
	'description' => __( 'This is the ad section on the title bar of the whole site.', 'executive' ),
) );

See http://stage.custombuiltwindows.com for how it looks now. You'll see how this puts the ad banner just above the slider and below the menu. But what I really want is for it to appear above the menu and directly to the right of the logo in the title bar. I just can't figure out where to place the AdRotate code to get that to happen. There's not a "header.php" file as I've become accustomed to with some other themes (though I know that isn't always the best way).

Is there a way to drop my adrotate code

<?php echo adrotate_ad(1); ?>

into that spot next to the logo?

Thanks

[Brad Dalton]

You could hook it in from your functions file using the genesis_header hook and position it using CSS.

Or you could use the header right widget area instead or the header right widget hook.

---

Tutorials for StudioPress Themes.

[rcwatson]

I backed off my previous changes noted above, and then I added the following to CSS under Widget Area:

.site-header .widget-area {
	border-style:solid;
	border-width:1px;
	width:940px;
	height:139px;
	margin-left:200px;
}

Then, I added my AdRotate widget to the Header Right widget area within the Widget manager in the Dashboard.

That got me what you see now at http://stage.custombuiltwindows.com. Problem is, the image itself is not appearing, even though the rendered code (according to Chrome Inspector) says that it should. See http://postimg.org/image/f8u4jm8wn/ for what I'm seeing in the Inspector vs. on the page itself. The black rectangle is where I've outlined where the image should appear.

Maybe I'm not doing the CSS correctly?

Thanks.

[rcwatson]

Ah, never mind. I figured it out. I was using the secure Epic browser which seemed to be blocking the image from showing for some reason. A very minor browser most people don't even know about, and it's not an issue on Chrome/FF/IE. Sorry about that.

[Author]

Posts