Magazine Pro – customized – Custom Header not showing up

[CindyLeighDesign]

Hi there -

Hoping someone can take a look and help me out. I'm pulling my hair out and have been working on this all day! I added code in both functions.php and my css code to add a custom Header that is full width. The space is there and when I hover over it, the alt text shows but the actual image isn't there! I've added the image in the "customize header" area. Ideally, I want to use the "unique headers" plug-in so that these change based on the page or post. But for now, I've deactivated that plug in .. though that doesn't help. Also, on the home page, I've added code to add a Soliloquy slider. That seems to work fine.

The site I'm having trouble with is: http://www.my-stcroix.com You can see that the soliloquy slider works fine on the homepage... but on this page: http://my-stcroix.com/travel-channels-real-st-croix/ there's just a blank space where there should be a header.

Here is the title area code that I'm using:

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

.title-area {
width: 100%
}

.header-image .title-area {
padding: 0;
}

.header-image .site-title a {
background-position: center !important;
background-size: contain !important;
float: left;
display:inline-block;
min-height: 425px;
text-indent: -9999px;
width: 100%;
}

.site-title {
font-family: 'Raleway', sans-serif;
font-size: 16px;
line-height: 1;
margin: 0px;
margin-top: 0rem;
margin-right: auto;
margin-left: auto;
margin-bottom: 0rem;
background-position: center;
display: none;
}

.site-title a,
.site-title a:hover {
color: #0278A3;
margin-left: auto;
margin-right: auto;
display: none;
}

.site-description {
display: block;
height: 0;
margin-bottom: 0;
text-indent: -9999px;
}

Help!!

http://www.my-stcroix.com

[Brad Dalton]

Try this tutorial http://wpsites.net/wordpress-themes/adding-custom-header-to-genesis/

There's 2 changes you need to make.

1. Change the values for the width and height in the PHP code for the custom-header function

2. Change the values in the CSS under the Site Header section of your style.css file. There may be more than one value which needs changing.

If the first tutorial doesn;t make things clear, try this one http://wpsites.net/web-design/custom-header-image-genesis/

---

Tutorials for StudioPress Themes.

[CindyLeighDesign]

Hi Brad-

I've already done both 1 and 2 ... thus the mystery. The Soliloquy slider works fine on the home page. And there is an adequate spot on the other pages - the problem is that it is blank (the image is not showing). I've adjusted the css a bit based on your second tutorial (I had looked at that before). Now the big space is gone which is a little better... but I'd still like to have a custom header image at the top.

1. My functions.php has:

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

2. The values for the header are not in the Site Header section but here is what I have:

/*
Site Header
---------------------------------------------------------------------------------------------------- */

.primary-nav .site-header {
padding-top: 75px;
}

.site-header .wrap {
padding: 0px;
}

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

.title-area {
width: 100%;
}

.header-image .title-area {
padding: 0;
}

.site-title {
font-family: 'Raleway', sans-serif;
font-size: 16px;
line-height: 1;
margin-bottom: 0;
}

.site-title a,
.site-title a:hover {
color: #0278A3;
margin-left: auto;
margin-right: auto;
display: none;
}

.site-description {
display: block;
height: 0;
margin-bottom: 0;
text-indent: -9999px;
}

/* Full width header, no widgets */

.header-full-width .title-area,
.header-full-width .site-title {
width: 100%;
max-height: 425px;
}

.header-image .site-description,
.header-image .site-title a {
display: block;
height: 0px;
margin-bottom: 0;
text-indent: -9999px;
}

Any thoughts why the images just aren't showing? They work on another site I did this too: http://stxenvironmental.org/

/* Logo, hide text */

.header-image .site-title a {
background-position: center !important;
position: relative;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
z-index: 9999;
width: 100%;
}

/* Widget Area
--------------------------------------------- */

.site-header .widget-area {
min-height: 425px;
margin: 0 auto;
overflow: hidden;
width: 1140px;

}

.header-image .site-header .title-area,
.header-image .site-header .widget-area {
padding: 0px;
}

.site-header .widget-area p {
margin-bottom: 0;
}

[CindyLeighDesign]

also, you'll see here that it's showing that my header is uploaded and at the proper size

[CindyLeighDesign]

I adjusted the code slightly here and the space is back:

/*
Site Header
---------------------------------------------------------------------------------------------------- */

.primary-nav .site-header {
padding-top: 75px;
}

.site-header .wrap {
min-height: 425px;
margin: 0 auto;
width: 1140px;
}

But the image is still missing!!

[CindyLeighDesign]

Also, I should mention that previously the headers WERE showing fine. I then added Woocommerce with the Print Aura plugin and there was a WordPress and Genesis update and then they disappeared. I've tried deactivating the plugins and they don't come back. I also had used the "Unique headers" plugin and have removed that but that doesn't make a difference either. AGH!!

[Brad Dalton]

Hard to say without logging in and looking for the problem.

---

Tutorials for StudioPress Themes.

[CindyLeighDesign]

This reply has been marked as private.

[Author]

Posts