Ever wondered how you can add a static element (like a logo) in your view? We’ll be tackling this challenge in today’s Tips & Tricks.
Sometimes, you need to add a static element in your view. Elements like:
Logo or watermark - to establish branding or professional identity.
- Map legend - to guide users in identifying features on the map (for demonstration purposes only).
Map legend example (for demonstration purposes only)
The steps for both the logo or map legend options are the same. The only difference will be the placement of the element (logo or legend) itself (which will be defined by the properties you set). Below’s the instruction for the static logo demo.
Note: This is an advanced topic that requires knowledge in HTML & CSS. Read more on our Using templates tutorial.
1. On your template sheet, create a blank column (column B in our demo). This empty header will serve as the placeholder for your logo. Insert your logo’s URL using the <img> tag. We’ll assign it a class of .mylogo.
<img src = "https://awesome-table.com/icon/AT-logo/logo_at_hor_whitebg.svg" class="mylogo">
Note: (Required) Images should be publicly accessible.
Tip: (Optional) Use images that support transparency like .gif or .png.
2. Insert the code below in your <style> section:
Note: The properties below are only added since we needed to decrease the size of our logo.
The code simply instructs the browser to put the logo on top of all the elements and fixed at the top-left corner.
3. Refresh your view for the changes to take effect.
And that’s all there is to it!
Tip: Adjust the size and placement of your static logo as needed.
Please sign in to leave a comment.