Transparent Header Logo not displaying (Jump Start 2.0 Beta Version 1&2)

[askwpgirl]

Hi Jason,

I’m not sure if I’m doing something wrong. I am trying to use this image in my Transparent header:

http://jumpstart.askwpgirl.com/wp-content/uploads/2015/01/SweetNothings-logo-horiz.png

and

http://jumpstart.askwpgirl.com/wp-content/uploads/2015/01/SweetNothings-logo-horiz-2x.png for the 2x transparent header logo.

However, the site ends up using the main header image instead:

http://jumpstart.askwpgirl.com (demo)

It doesn’t work in Beta 1 or Beta 2.

Is there a particular format or image size that must be used for this? The image is 279 x 75 and twice that size for the HiDPI optimized image. It is different image dimensions than the main logo, whereas in your demo, the transparent header is the exact same dimensions as the main logo. I just can’t figure out why it doesn’t want to load in the transparent header.

Day 1 today of class went great!!! People really love the theme and are blown away by the Template Builder options.

Topic

[Jason Bobich]

Ok, this probably warrants a video for the documentation file. I think there’s a confusion here on what this logo is meant for. Currently, you’re not showing a “transparent header” and so that corresponding logo isn’t being shown (or at least with the homepage you’re linking me to?)

A transparent header is when you suck the page up into the header, and thus you want the header to be transparent and show through to what’s behind.

Here’s an example of how you can do this for a page.

1. Create a new page.
2. In the “Banner” meta box, setup a banner image.
3. In the “Theme Layout” meta box in the right sidebar, select “Display transparent header over content” under Header.

Here’s an example of what this looks like:

If I disable the “suck up” feature on this same page, I get this, where my site’s standard logo is used, instead.

=======

So, here’s the big picture idea on this, where having two logos solves a problem:

You setup your site with your standard logo. Let’s say your header background color is white, and your logo looks great on top of that.

Then, you setup a special page where your header displays over some banner image. Now all of a sudden, your logo used across your whole site (meant to sit on a white background), no longer works in this scenario. Then, you’ve got your “Transparent Header” logo you can setup as an alternative logo that gets used in these situations.

[askwpgirl]

So, what you’re saying is I should have read this text on the Theme Options page:

“When you’re configuring a page, if you select to “display transparent header over content” in the Theme Layout box, here you can setup special options for how the header displays over your content, which has been sucked up beneath. This feature works best when you’ve applied a banner or a custom layout to the page.”

The reason I misinterpreted what this does (besides the fact that I didn’t read the very clear explanation above) is because the header area that displays over the content when you scroll down the page is transparent.

So, now what I thought was a bug has become a feature request. Here’s the problem:

A more square or round logo is unreadable and looks like a blob in that small transparent header thingy (what do we call this?) that displays over the content when you scroll down the page. So, my hope was to have a different version of the logo that could be used in that area.

And, yes, I’m so glad to know about the true Transparent Header usage! 🙂

[askwpgirl]

Transparent header thingy aka the Sticky Header.

The Sticky Header needs a logo option, imho, since so many logos will look like crap in the Sticky Header if they aren’t horizontal to start with.

What will I think of next? 🙂

[Jason Bobich]

I was a bit reluctant adding the whole Transparent header option set, because I feel it adds a level of complication. I honestly think a third section is too much in the Theme Options panel.

Also, there’s currently an issue with that, too — Because the theme constructs the sticky menu with javascript, using elements already on the page when the site loads (i.e. current logo, current main menu, etc), so that you don’t have all these extra items printed out in the markup of the page. And so the way it works for the end-user is all fairly simple, not requiring really any setup or thought. (The mobile navigation works in the same way, too, so search engines aren’t going to see your main menu twice)

I’m going to think about it, and see if maybe there’s some way I can add in a way where you could filter in a different logo image URL, if needed. Something like:

function my_sticky_logo_uri() {
	return get_template_stylesheet_uri() . '/assets/images/stick-logo.png';
}
add_filter( 'themeblvd_sticky_logo_uri', 'my_sticky_logo_uri' );

… Maybe by outputting it as a javascript local variable or something. Note sure yet.

[Jason Bobich]

Ok, yeah, I was able to do this. Make note of that snippet I pasted in. — That’ll be how you’ll filter in a custom logo for the sticky menu. You’re just filtering in the URL string of the logo image located in your child theme.

http://dev.themeblvd.com/tutorial/adding-a-custom-logo-to-the-sticky-menu/

[askwpgirl]

That’s awesome. So that filter will work when the next Beta comes out?

I know I’ll have designers and clients pestering about modifying the logo that shows there, so this is great. 🙂

[Jason Bobich]

Yup, whatever the next release is, after the current 2.0-beta2 version, that will be available.

[askwpgirl]

I have a photographer who might like to use the Banner and transparent header on the home page.

He would like a slideshow.I see there is a slideshow option for the Banner, but when that option is chosen, there is no place to select images:

http://postimg.org/image/cnzmmhauz/

If you select any of the other options, upload options display below the selection to upload an image. With the Custom Slideshow, no options display.

Am I missing something?

Thanks!

Thanks!

[Jason Bobich]

Looks like just a mistake. I think at the time I decided to take out the slideshow option but I guess messed up on the first option and didn’t remove the selection, but I’ll look at it again.

[askwpgirl]

Okay. I faked it out with some CSS and a regular slideshow. I think slideshows are overrated.

[Jason Bobich]

I think having that ability for this whole “background slider” thing (especially to backgrounds of sections in Builder), is something a lot of people seem to like. Maybe on the page banners, too much. If it’s not too hard to add, I may throw it in there.

[askwpgirl]

Yes. The context I have for the slider with the transparent logo is this:

http://kevinsyms.com/photo/

The reason being that the home page slides would need to be more panoramic to fit in the main content area, and we really wanted to show the images at their correct aspect ratio.

For a photography site, this is nice to have the header on top of the slider, but it was easy to do in CSS. (Note: this is in development – not a final site.)

[Author]

Replies