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
