Homepage › Community Forums › Epik Theme Support › Epik header image not showing up
I am having an issue adding and image to Epik header. I made the following changes and no image appears at all.
// Add support for custom header
add_theme_support( ‘genesis-custom-header’, array(
‘width’ => 266,
‘height’ => 53
) );
I pulled the image and resorted to the typed in name for now.
Can you add the images so I can look at the source code to see whats going on? Without it I have no idea what it could be.
You are using the WP Header uploader right?
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
It put it back.
I am using the custom header function under the Appearance tab.
I can’t seem to replicate the issue. It works fine for me when I upload.
Is the link in your WP admin called “Custom Header” or just “Header”?
Also, does the image that you’re uploading match the exact size as what is featured in your functions file?
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
Yes the image is the exact size 266 x 53, though WP cropped it anyway.
This is the link to the image: http://yourlifebetter.net/wp-content/uploads/2013/08/cropped-testheader1.png
Here is the info from the WP page where I am setting the image. Standard spot.
Custom Header
Header Image
The really strange thing is that the image will show up extra tall in Chrome and not at all in Explorer…Explorer shows the Site Title even though I removed it! I even cleared the cache & history and still it shows title only, no image, nit even 2x as high.
Ok, use the “Header” link to upload your logo, not any other links. Also, if your logo size is exactly the same size as what is in your functions file then WP won’t need to crop it. If the crop screen shows up, that means the sizes don’t match. So try and reupload the image again on the “Header” link under Appearance….not the “Custom Header” and see if that works, because that’s exactly how most of us do it when adding a logo.
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
Hate to sound like an idiot but I really have no idea what you mean by “use the “Header” link, thought that’s what I was doing!
When I go to the Header link under appearance that is where it reads “Custom Header”! Would you like a screen shot?
It sounds like you’re in the right place, I just thought you were adding it a different way at first.
I’m still not sure why it’s not showing up. If you can, could you show a screenshot of your entire Header page with the options set? You can use a site like imgur.com to upload it to if you need.
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
i attached a PDF to the email I received.
Are you using a cache plugin? Sometimes users have a caching plugin that needs to be updated to show their latest updates. If your image is activated and not showing that could be the issue, if you’re using one.
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
Yes! I forgot about that! Problem now is that the header 2-3x in height.
I cleared the plugin cache, you can go to my url now and see the image.
Did I lose you?
It was getting late on my end. I’m on EST time.
To be honest, I don’t think you would need to pay anyone to get this working, it seems like you were almost there right? If you would rather hire someone then contact Wes to see if he’s available – https://appfinite.com/contact-us/
I can still assist if you want to keep giving it a try though. I’m not on the forums all day long, but I do try and check every once in a while throughout the day….so just let me know.
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
It must have been really long day for me yesterday….I could have swore I told you how to fix that. I guess it didn’t show up.
Anyways, right after you fixed the cache issue, I mentioned that you could use the same code from the other thread and it will fix your issue with the image and the widget area not being on the same line. I’ll copy/past again –
If you’re trying to get your logo and widget area on the same line, you’ll need to adjust the widths of them both. Your title area and widget area exceed 100%…thats why it’s showing up like that. Change the width from 50% on the title area to a smaller width and there will be enough room for the widget area to fit.
Look around line 681 for this –
.header-image #title,
.header-image #title a,
.header-image #title-area {
display: block;
float: left;
min-height: 120px;
overflow: hidden;
text-indent: -9999px;
width: 300px;
}
Notice I changed it to 300px as an example. That will bring the widget area up. The widget area is around 65% and the title area is 50%….which exceeds 100%. Anytime that happens just decrease one or both to get them to fit on the same line.
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
Ready to take a crack once more? Is it the stylesheet I need to change? functions.php?
Hello,
Around line 681 in your style.css file, you will find the following section:
.header-image #title, .header-image #title a, .header-image #title-area {
display: block;
float: left;
min-height: 120px;
overflow: hidden;
text-indent: -9999px;
width: 40%;
}
Make it look like this:
.header-image #title, .header-image #title a, .header-image #title-area {
display: block;
float: left;
min-height: 53px;
overflow: hidden;
text-indent: -9999px;
width: 35%;
}
Basically I changed the min-height to the correct size of your image, and changed the width to 35%, because your header-right widget section is set to 65%. Both widths together, should not be more than 100%.
You can change the width of that section, by going to line 697 in your style.css and modify the following section:
#header .widget-area {
overflow: hidden;
width: 65%;
}
You probably don’t want to do that though, if you don’t want to change your menu.
Sorry. I didn’t see the response already.
Line 681 is referring to your stylesheet…your style.css file.
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
Hi Eric,
Cool that fixes the height issue. Remaining issue are that the image is not clickable to go back to the homepage…well the very lest part is; i.e. a very tiny section. Also, the image does not center on smaller screens as the :Header Text” did.
Suggestions?
DC
DC,
I found an interesting fix for the header image being clickable here:
http://www.youtube.com/watch?v=ER9TGXzeYU8
You go back to line 681 in your style.css and change the width from 35% to 266px; which is the width of your image. That makes it clickable again. There are many ways of making the header clickable. Maybe others have another suggestion.
For the centering of the image of smaller screens, you will need to modify the media queries at the bottom of your style.css file.
Cool!
I’ll give it a shot in the AM and let you know how it went. Right now it’s time for my footy jammies…. I’m beat!
Thanks again.
You’re welcome. Have a good night.
Ok, use the contact form and reach out to Wes to see if he is available – https://appfinite.com/contact-us/
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
Well, I did get the link issue fixed with the advice from Eric & estoeckel!
Can either of you tell me how the get the image to center on phone/tablets? estoeckel, you said it would be towards the bottom of the css but there is a WHOLE lot of stuff down there!!
Appreciate the help!
Add this to your responsive section of the css (bottom) –
#header {
background-position: center top !important;
}
Add it under the 960px width or the 767px width.
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
Eric,
Here is where I added but still no centering on tablet (Nexus 7)
/* Desktops, laptops and iPads (landscape) ———– */
@media only screen and (max-width: 960px) {
#header {
background-position: center top !important;
}
#header,
#nav .wrap,
#subnav .wrap,
#inner .wrap {
padding: 0;
width: 92%;
}
.slider-inner,
#welcome .wrap,
#home-feature-bg .wrap,
#home-feature-bg-alt .wrap,
#home-feature-bg-dark .wrap {
margin: 0 auto;
padding: 40px 0 0;
width: 92%;
}
.feature-margin {
margin: 0;
}
.footer-widgets .wrap,
#footer .wrap {
width: 92%;
}
}
/* iPads (portrait) ———– */
@media only screen and (max-width: 768px) {
#header {
background-position: center top !important;
}
#wrap { }
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.wrap,
#footer .creds,
#footer .gototop,
#header .widget-area,
#inner,
#title-area,
#wrap .sidebar,
#wrap #content,
#wrap #content-sidebar-wrap,
#wrap #sidebar-alt {
width: 100%;
}
.genesis-nav-menu li,
#footer .creds,
#footer .gototop,
#header ul.genesis-nav-menu,
#header .search-form {
float: none;
}
.genesis-nav-menu,
#description,
#footer .creds,
#footer .gototop,
#header .search-form,
#title,
#title-area {
text-align: center;
}
.genesis-nav-menu a {
padding: 20px 16px;
padding: 1.25rem 1rem;
}
#title {
margin: 16px 0;
margin: 1rem 0;
}
#header .search-form {
margin: 32px auto 0;
margin: 2rem auto 0;
width: 50%;
}
#header .widget {
text-align: center;
}
WordPress adds it’s own code for the header and gives it the “!important” which means it has priority. So lets go one more step above and add #head-wrap in front of the #header just like this –
#head-wrap #header {
background-position: center top !important;
}
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
That did the trick! Thanks for the help!
You’re Welcome
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com