/*-- css for partner tier styles --*/ .tier_level { height: auto; float: right; padding-right: 10px; } .tier_level img { height: 65px; width: auto; position: absolute; top: -3px; right: 275px; } @media only screen and (max-width: 600px){ .tier_level img { right: 50px; top: 1px; height: 55px; } } // JS to display logos based on group jQuery(document).ready(function ($) { var isLoggedIn = !!$(".logged-in").length; var myGroups = isLoggedIn ? abUser.group_id : []; function partnerTierFunction() { // set up DOM $("#header .wrapper").append('<div class="tier_level"></div>'); // create object for partner tiers var myTier = { "19": { name: "Steel", image: "https://cdn.allbound.com/bluescape-ab/2020/09/08233007/BS_Badge_Steel_White.png" }, "23": { name: "Cobalt", image: "https://cdn.allbound.com/bluescape-ab/2020/09/08233001/BS_Badge_Cobalt_White.png" }, "24": { name: "Sky", image: "https://cdn.allbound.com/bluescape-ab/2020/09/08233005/BS_Badge_Sky_White.png", }, "25": { name: "Sapphire", image: "https://cdn.allbound.com/bluescape-ab/2020/09/08233003/BS_Badge_Sapphire_White.png", }, }; // check if the user is in a tier group for (var i = 0; i < myGroups.length; i++) { // associate tier label to group values var groups = myGroups[i]; var tier = myTier[groups]; // populate DOM with tier label if (tier !== undefined) { var $z = $("div.tier_level"); $z.append('<img src="' + tier["image"] + '">'); break; } } } function visibilityDriver() { visScenarios.forEach(function(scenario) { if (scenario.condition) { scenario.outcome(); } }) } var visScenarios = [ { condition: isLoggedIn, outcome: function () { partnerTierFunction(); }, }, ]; visibilityDriver(); }); // end ready function
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter