You may have noticed the “Made in Wappler” badge at the bottom right of the Wappler website.
Ever wondered how it is done?
It’s just a simple bit of CSS, a logo and a link so here is how to do it if you want to show the world the power of Wappler
Firstly we need some simple CSS which you can add to your custom CSS page
a.wappler-badge {
position: fixed;
display: inline-block;
z-index: 999;
top: auto;
right: 10px;
bottom: 10px;
left: auto;
color: #111;
font-weight: 500;
background-color: #e7e7e7;
border-radius: 2px;
padding: 5px;
font-size: 12px;
line-height: 14px;
text-decoration: none !important;
width: auto;
height: auto;
overflow: visible;
white-space: nowrap;
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.1);
box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.1);
cursor: pointer;
}
The we need the custom 16 pixel wappler logo
Here it is, right click to download it.
Just save it to wherever you wish to save your images, in this case I chose /assets/images/
Lastly add the link at the bottom of the page or in your footer as in this example
The link is:
<a href="https://wappler.io?utm_campaign=wappler_badge" class="wappler-badge"><img height="16" src="/assets/images/icon_16.png" alt="wappler logo"> Made In Wappler</a>
or in a footer like this
<footer class="bg-light fixed-bottom">
<a href="https://wappler.io?utm_campaign=wappler_badge" class="wappler-badge"><img height="16" src="/assets/images/icon_16.png" alt="wappler logo"> Made In Wappler</a>
<div class="container-fluid">
<div class="row">
<div class="col">
<p class="text-secondary text-center small mb-0 p-1">© Copyright 2019. Wappler Virtual Academy, All Rights Reserved.</p>
</div>
</div>
</div>
</footer>
Don’t forget to check the image and CSS file has been uploaded and that’s it, Made in Wappler badge complete.
Be proud to be a Wappler developer, tell the world from your website
And of course you can always customise your message from “Made in Wappler”, personally I prefer “Made with Wappler” but others like “Proud to be a Wappler Developer” look great.
So no excuse now, spread the word!
The Wappler virtual academy is proud to show this logo
https://wapplervirtualacademy.com/
