WP newb needs some help

[bmoss]

Whomever can help me with this – I would be immensely appreciative.  I've posted this previously but received no responses.  My time is brief in figuring this out as if I can't the site tweaked then I'm going to have to return the theme.

Here is my site: http://processinglife.net/

Issue #1 – I have my header image uploaded, however you can see that it is right over the menu bar.

How do I get the image below the black bar?  If it were possible to have the black menu bar flush with the top and then the image below it that would be amazing – but just to have it below the black with a small padding is the primary desire.

Issue #2 – The Twitter widget – the gray boarder around it.

Any idea on how to remove the gray boarder around the widget?

Thank you in advance for any help!!!

http://processinglife.net/

[Brad Dalton]

Looks like you added some CSS to the custom CSS page. Please remove that.

Can you also please post a link to your header image. Thanks

1. Try changing the values for min-height in your style.css file to match the height of your header image. There's 2 values you need to change.

Line 184

#header {
	background: url(images/gradient.png) top repeat-x;
	margin: 0 auto;
	min-height: 85px;
	overflow: hidden;
	text-transform: uppercase;
	width: 100%;
}

and line 232

.header-image #title-area,
.header-image #title,
.header-image #title a {
	display: block;
	float: left;
	min-height: 85px;
	overflow: hidden;
	padding: 0;
	text-indent: -9999px;
	width: 300px;
}

You can also add support for a custom header in your child themes functions.php file:

/** Add support for custom header */
add_theme_support( 'genesis-custom-header', array(
	'width' => 1140,
	'height' => 100
) );

Change the values to match the dimensions of your header image.

I can't test this until i have the url to your header image.

2. On or around line 847 of your style.css file you'll find the value for the border which effects your Twitter widget. You can change it there.

---

Tutorials for StudioPress Themes.

[bmoss]

Thank you Brad!

I just reinstalled the theme to get the CSS back to where it needed to be.

This is the header image:  http://www.processinglife.net/bobby/Images/Header_binoc2.png

I'm going through the things you suggested now.

[bmoss]

I copy/pasted what you provided in as is - the black menu bar went away and the image looked cropped, only showing about the left 1/4 of the image (If you're looking at the image it cropped right after my daughter's knees).  I made one tweak, seen below, changing the width in the second section to 100% instead of specific pixel count:

#header {
background: url(images/gradient.png) top repeat-x;
margin: 0 auto;
min-height: 219px;
overflow: hidden;
text-transform: uppercase;
width: 100%;
}

.header-image #title-area,
.header-image #title,
.header-image #title a {
display: block;
float: left;
min-height: 219px;
overflow: hidden;
padding: 0;
text-indent: -9999px;
width: 100%;
}

However - that kills the menu all together.  Is there a way to keep that?

Thank you again Brad!

[Brad Dalton]

The code i provided is not to be copied and pasted. It is to be used as a guide showing you what code to edit.

You need to edit 3 values for the height.

2 are in your child themes style.css file and one value is in your functions.php file.

---

Tutorials for StudioPress Themes.

[Brad Dalton]

Here's a better way to do this:

/** Add support for custom header */
add_theme_support( 'genesis-custom-header', array( 'width' => 962, 'height' => 219 ) );

This will add support for a custom header so you can simply upload it to the header page.

You can then reposition one of the nav menu's if needed and change the CSS to align the header image in the centre.

remove_action( 'genesis_after_header', 'genesis_do_subnav' );
add_action( 'genesis_before_header', 'genesis_do_subnav' );

Source: http://www.briangardner.com/code/reposition-navigation/

If you can't get the header image to align centre, add this code with the HTML for your image at the end of your child themes functions.php file:

function add_header_genesis() {
    echo '<div class="add-header"><a href="http://processinglife.net"><img src="http://127.0.0.1:4001/wordpress/wp-content/uploads/2013/06/logo.png" alt="logo" width="962" height="219" class="aligncenter size-full wp-image-32656" /></a></div>';
};
add_action('genesis_header', 'add_header_genesis');

Then you can remove the image from the custom header uploader if needed.

There will be some tweaks needed with CSS to get it looking exactly the way you want however i did test this and it works fine.

---

Tutorials for StudioPress Themes.

[bmoss]

Brad -

You rock! Thank you so much for your help!

I used the second option that you gave. It has the image exactly where I want it - looks great. The black menu bar now isn't showing up however. Is that where this comes in:

remove_action( 'genesis_after_header', 'genesis_do_subnav' );
add_action( 'genesis_before_header', 'genesis_do_subnav' );

 

[Brad Dalton]

That will reposition the nav menu to before your header so add that to your child themes functions.php file.

You may also need to make sure both menu's are checked under Appearance > Menu

---

Tutorials for StudioPress Themes.

[bmoss]

Yeah - getting nothing.  Still blank space above the image.

Is this because of the uniqueness of the Mindstream theme?

[Brad Dalton]

The code only works with the secondary nav menu

Also try adding support for a custom header http://www.studiopress.community/topic/wp-newb-needs-some-help/#post-46043

You header image is messed up in Firefox.

---

Tutorials for StudioPress Themes.

[Author]

Posts