How to add a floating image and link to a template
The following snippet shows a floating image (paypal logo) and text in a box. The image is a clickable link. It stays stationary while the page is scrolled. It does not show up on mobile devices. Note that this will appear on every page.
This requires adding css and html to your template.
1. Add this css to template's header just above </head>
<style>
div#ebb2 {
position:fixed;
top:20px;
right:20px;
width:177px;
color: green;
border:solid thin green;
z-index:100;
background-color: white;
}
div#ebb2 img {
display:block;
}
/*** mobile ***/
@media screen and (max-width: 800px) {
div#ebb2 {display:none;}
}
</style>
2. Add this HTML code just under <body>
This will create a clickable image and static text. Replace 'myimage' with your own image. Adjust the width and height to match. In this example, I used a paypal image as myimage.
<div id="ebb2"> <a href="https://www.dougthecook.com"> <img src="%SITE_URL%/images/myimage" width="177" height="57" style="display:block" alt="paypal logo"></a> <div class="txtcenter">Goto dougthecook</div> </div>
2b. OR if you don't want a link, use this instead
This will create a static image and static text.
<div id="ebb2"> <img src="%SITE_URL%/images/myimage" width="177" height="57" style="display:block" alt="paypal logo"> <div class="txtcenter">Goto dougthecook</div> </div>
2c. OR if you want the text be a clickable link use this
This will create static image and clickable text.
<div id="ebb2"> <img src="%SITE_URL%/images/myimage" width="177" height="57" style="display:block" alt="paypal logo"> <div class="txtcenter"><a href="https://www.dougthecook.com">Goto dougthecook</a></div> </div>
2d. OR if you want both the image and text clickable, use this
This will create a clickable image and clickable text.
<div id="ebb2"> <a href="https://www.dougthecook.com"> <img src="%SITE_URL%/images/myimage" width="177" height="57" style="display:block" alt="paypal logo"> </a> <div class="txtcenter"><a href="https://www.dougthecook.com">Goto dougthecook</a></div> </div>
2e: OR if you want only a clickable image, use this:
This will create a clickable image only.
<div id="ebb2"> <a href="https://www.dougthecook.com"> <img src="%SITE_URL%/images/myimage" width="177" height="57" style="display:block" alt="paypal logo"> </a> </div>
2f. OR if you want only text clickable, use this
This will create a clickable text and no image.
<div id="ebb2"> <div class="txtcenter"><a href="https://www.dougthecook.com">Goto dougthecook</a></div> </div>
3. In the step 1 css
- Change width (177) to the width of the image.
- The floating box is 20 px from the right side and 20 px from the top. Change these if you want. You can change right: 20px to left: 20px if you want the floating box on the left side of the screen.
- Note the floating box will not show up on devices with screens smaller than 800px.
Note there is no height specified, which means the default height (height created by the image and text) will be used.
3. In the step 2 code
- Change the "www.dougthecook.com" to the URL you want to link to.
- Upload the image you want displayed using slscart's Images. Upload it to the General Images Directory.
- Change myimage to the name of the image you uploaded.
- Change width (177) to the width of your image.
- Change height (57) to the heighth of your image.
- Change the alt tag verbiage to describe your image.
- Change 'Goto dougthecook' to the verbiage you want displayed.
How it works
A 177px wide box is created around the div 'ebb2' and outlined in green using css. It is a fixed position from the top and right of the browser area. The z-index of 100 (pretty much) assures us the box will stay on top of every page. On mobile devices (less than or equal to 800 px in width) the floating box will not show up. Note the box uses the default height, determined by the image height and text height. The height can be specified by adding height: 150px; (for example)
***