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

Divi Forms and HubSpot Meetings

The Mission In this article we will be using JQuery to accomplish the following: Prevent Divi Form Submission Maintain Validation Grab Field Values Create a Pop-Over to HubSpot Meeting Page Autofill Meeting Fields and AutoSubmit Step 01: Make sure you have...

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.