Cool Logo Easter Egg

Dec 13, 2017 | Development, jQuery | 0 comments

Hidden Branding Package

In this article we will go over the steps to add a company branding package to your logo. This is perfect for partners and affiliates to quickly download and updated logo and branding guide. The steps below will take you through a wordpress installation, but can be easily adapted to any website.

Step 01: Create a global.js file in the child theme folder

See this article on creating a child theme if you don't already have one.

If there is not one already, create a directory named js. Next Create a file named global.js and add the following code to the file. Make sure to change out all areas with a ***.

jQuery(function ($) {
	$(document).ready(function() {
		var mLeft = $(window).width()/3;
		var mTop = $(window).height()/4;
		
		$('body').append('<div class="branding-overlay" style=" position: fixed; background-color: rgba(0, 0, 0, 0.7); width: 100%; height: 100%; top:0; z-index: 999998; display:none"></div><div class="branding" style="top:' +mTop+ 'px; right:' +mLeft+ 'px; position: fixed; width: 35%; padding: 2%; background: rgba(255,255,255,1); border-radius: 6px; text-align: center; font-size: 1em; z-index: 999999; display: none;"><img src="***insertyourbrandinglogourl***" alt="Download Our Logo Package" width="190"><h2>Download Our Logo and Branding Package</h2><p style="padding-bottom: 5%;">Looks like you want a piece of our logo, here is a zip file of our marketing pack and branding guidelines you can download in all its glory!</p><a href="***URLofyourmarketingzipfile***" download="***yourcompanyname***-Branding-Guide.pdf" class="button">DOWNLOAD </a></div>');
	});
	
	$('***yourlogoid***').on('contextmenu', function(event) {
		event.preventDefault();
		
		$('.branding-overlay').slideDown(800);
		$('.branding').delay(700).fadeIn(500);
		$('.branding-overlay').click(function() {
			$('.branding-overlay').fadeOut(500);
			$('.branding').fadeOut(300);
		});
	});
});

Step 02: Add CSS to your style sheet

Now that we have added the javascript it is time style the button to match your colors.

.button {
    border: 5px solid #f68623;
    border-radius: 4px;
    background-color: #f68623;
    color: #fff;
    font-size: 19px;
    font-weight: bold;
    padding: 1% 3%;
}
.button:hover {
    background-color: #ffffff;
    color: #f68623;
}

Step 03: Enqueue the styles and scripts

Locate the functions.php and add the code below.

function myscript_in_footer(){
	wp_enqueue_script( 'global', get_stylesheet_directory_uri() . '/js/global.js', array( 'jquery' ), null, true );
	}
add_action('wp_footer','myscript_in_footer');

Step 04: Test it out

Go to any page and right click your logo

Make It SNOW!

Tis The Season! … Get your site ready for the Holidays. In this article we will go over the steps to add a falling snow effect to your wordrpess website.

IRONMAN Arizona 2018

Registered for next year's IRONMAN Arizona I volunteered at the 2017 IRONMAN Arizona and was guaranteed a spot. This will be my first IRONMAN race. Although I am nervous I am confident in my ability to finish strong. Earlier this year I completed three...