Community Forums › Forums › Archived Forums › Design Tips and Tricks › Magazine Pro – customized – Custom Header not showing up
Tagged: Custom header, Magazine Pro
- This topic has 7 replies, 2 voices, and was last updated 9 years, 2 months ago by
CindyLeighDesign.
-
AuthorPosts
-
January 30, 2016 at 8:55 pm #177942
CindyLeighDesign
ParticipantHi 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.comJanuary 31, 2016 at 5:23 pm #177994Brad Dalton
ParticipantTry 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/
February 1, 2016 at 1:23 pm #178078CindyLeighDesign
ParticipantHi 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;
}February 1, 2016 at 1:45 pm #178083CindyLeighDesign
Participantalso, you'll see here that it's showing that my header is uploaded and at the proper size
February 1, 2016 at 1:59 pm #178094CindyLeighDesign
ParticipantI 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!!
February 2, 2016 at 7:43 am #178146CindyLeighDesign
ParticipantAlso, 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!!
February 2, 2016 at 5:15 pm #178192Brad Dalton
ParticipantFebruary 3, 2016 at 11:19 am #178247CindyLeighDesign
ParticipantThis reply has been marked as private. -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.