Different logo when header shrinks? - Support | Kriesi.at

Tagged: header transparency, logo

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
January 23, 2015 at 11:33 pm #384710

kevinmcgillivray
Participant

Hi there. I know I can implement a different header when the header shrinks and header transparency is being used. But can I use an alternate logo when header transparency isn’t enabled? I don’t want to just shrink the logo I’m using when the header is expanded because the quality degrades considerably. I’d like to use an entirely different logo with a different layout.

Thanks!

January 24, 2015 at 2:58 am #384766

Josue
Inactive Moderator

Hi Kevin!

Refer to this topic:
https://kriesi.at/support/topic/change-logo-in-scrolled-header/

Cheers!
Josue

January 25, 2015 at 10:06 pm #385192
kevinmcgillivray
Participant
Thanks for your reply, Josue. That post was very helpful. I decided to add the scroll logo as a theme option and everything is going very well but I’ve run into one problem. Hopefully you can help.

I added the following to create a theme option field for the scroll logo:
```
add_filter('avf_option_page_data_init', 'pwm_utilities_avf_option_page_data_init', 10, 1);
function pwm_utilities_avf_option_page_data_init($avia_elements){
	
$new_elements[] =	array(
					"slug"	=> "avia",
					"name" 	=> __("Scroll Logo", 'avia_framework'),
					"desc" 	=> __("Upload a logo image, or enter the URL or ID of an image if its already uploaded. This logo is optionally displayed when the user scrolls down the page.", 'avia_framework'),
					"id" 	=> "scroll_logo",
					"type" 	=> "upload",
					"label"	=> __("Use Image as scoll logo", 'avia_framework'));

	$avia_elements = array_merge( $avia_elements, $new_elements );

  return $avia_elements;
}
```
And leveraged one of the built in filters to add the CSS for the scroll logo to the dynamic CSS:
```
add_filter('avia_dynamic_css_output', 'pwm_avia_dynamic_css_output', 10, 2 );
function pwm_avia_dynamic_css_output( $output, $color_set ){
	
	$scroll_logo = avia_get_option('scroll_logo');
	if($scroll_logo) :
		$output .= "header-scrolled .logo img { opacity: 0; }.header-scrolled .logo a { background-image: url($scroll_logo);background-size: contain; background-repeat: no-repeat; }";
	endif;
	return $output;
}
```
This all works really well except at some point after my pwm_avia_dynamic_css_output is run, the “http:” gets stripped off the URL for the background image. I can’t figure out where this is happening or why. Can you point me in the right direction?

Thanks!
January 25, 2015 at 10:21 pm #385196

kevinmcgillivray
Participant

Actually after a little more searching, I figured out what’s causing this. For some reason the avia_style_generator class strips http and https out of the rules in class-style-generator.php:

$rule['value'] = preg_replace('/(http|https):\/\//', '//', $rule['value']);

Any idea why it does this or how to work around it?

Thanks!

January 25, 2015 at 10:38 pm #385198

kevinmcgillivray
Participant

[deleted]

January 26, 2015 at 8:14 pm #385808

Josue
Inactive Moderator

Hey!

Does that prevent the scrolled logo from showing? as far as i know a double slash (//) will reference the page protocol and shouldn’t represent a problem.

Best regards,
Josue

January 27, 2015 at 9:40 pm #386606

kevinmcgillivray
Participant

The scrolled logo does not show when it uses the // method. It only works if I disable that line of code in class-style-generator.php.

January 28, 2015 at 4:24 am #386758
Josue
Inactive Moderator
Hey!

It’s strange, i tried reproducing the issue on my local install with no success, the scrolled logo shows. This could work on your end though, replace your pwm_avia_dynamic_css_output filter with:
```
add_action('wp_head', 'pwm_avia_dynamic_css_output', 10, 2 );
function pwm_avia_dynamic_css_output( $output, $color_set ){
	
	$scroll_logo = avia_get_option('scroll_logo');
	if($scroll_logo) :

		echo "<style>.header-scrolled .logo img { opacity: 0; }.header-scrolled .logo a { background-image: url($scroll_logo);background-size: contain; background-repeat: no-repeat; }</style>";

	endif;
}
```
Best regards,
Josue
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.