Is it possible to display a banner at the top of my homepage?

Custom Coding
1

Hi everyone. Is it possible to write custom code to display a small banner at the top of my website homepage? I want to use it as an advert slot (for context, my website is an AI tool directory - https://www.freeaitools.fyi/).

I would need to make the banner clickable so that it directs users to whatever website I set it to go to.

Ad-Banner mock up
Ad-Banner mock up1230Ă—648 226 KB

2

Hi,

Would that be of interest for you?

2 Likes
3

I would suggest starting with a header block, and playing around with the text you can add to it to see if it can meet your needs.

If it works, display the ad header above your normal header.

2 Likes
4

Hey @Gen,

The tool @matthieu_chateau mentioned is very close to what you need, just wanted to let you know that it does not work with the Fixed header, so when you setup the Notification Bar tool, make sure the header i snot fixed.

1 Like
5

Thanks Matthieu, I’ll check it out tonight but it looks like exactly what I need.

6

Thanks for the suggestion. I did try with the header block but was not able to achieve the desired outcome.

7

Thanks for the tip Suzie. I’ll try it and and report back here.

8

Hi @matthieu_chateau and @Suzie. I just tried the banner code now and it works well. The only issue is, the content isn’t centred on desktop view (please see attached image). Could this be because of the vertical menu on the left? (I took the screenshot in preview mode)

image
image1920Ă—900 132 KB

The tab and mobile views seem fine

image
image1150Ă—810 52.8 KB

9

Yes it’s because of the left vertical navbar

10

Thanks @matthieu_chateau . Do you know if there’s anything I can do about it?

And also, do you know if there’s a way to reduce the width of the vertical navbar?

11

To reduce the width of the vertical navbar, insert this code in page settings => custom code => header.

Change the two 240 to whatever you want + change “home-header” by the ID/name of your header

<style>
@media only screen and (min-width: 992px) {
#home-header {
    width:240px!important;
    margin-left: 0 !important;
}
.content[data-appid] > * {
  margin-left: 240px!important;
}
}
</style>
1 Like
12

To adjust the banner text, I just can see these two lines of code in the script to update to whatever you want:

swBanner.style.textAlign = "center"; // replace center by right

or

swBanner.style.justifyContent = "center";

Also, a more readable version of the script would be: (I added padding left and right also, might help)

<script>
  configObj = {
    "text": "We’re live on ProductHunt right now! Support us and get your exclusive LIFETIME DISCOUNT!",
    "bannerURL": "https://www.producthunt.com/posts/softr",
    "selectedBackgroundColor": "#69C3FF",
    "selectedTextColor": "#181818",
    "bannerHeight": "64px",
    "fontSize": "15px"
  };

  function createBanner(obj, pageSimulator) {
    var swBannerLink = obj.bannerURL;
    var swBannerTarget = "_blank";
    var swBannerText = obj.text;
    var body = document.body;
    var swBanner = document.createElement('a');
    var centerDiv = document.createElement('div');
    var text = document.createElement('span');

    swBanner.href = swBannerLink;
    swBanner.target = swBannerTarget;
    swBanner.style.display = "flex";
    swBanner.style.justifyContent = "center";
    swBanner.style.alignItems = "center";
    swBanner.style.width = "100%";
    swBanner.style.minHeight = "48px";
    swBanner.style.maxHeight = "72px";
    swBanner.style.paddingTop = "8px";
    swBanner.style.paddingBottom = "8px";
    swBanner.style.paddingLeft = "20px";
    swBanner.style.paddingRight = "20px";
    swBanner.style.lineHeight = "18px";
    swBanner.style.textAlign = "center";
    swBanner.style.textDecoration = "none";
    swBanner.style.height = obj.bannerHeight;
    swBanner.style.fontSize = obj.fontSize;
    text.innerHTML = swBannerText;
    swBanner.style.backgroundColor = obj.selectedBackgroundColor;
    swBanner.style.color = obj.selectedTextColor;
    swBanner.id = 'sw-banner';
    swBanner.classList.add('sw-banner');
    centerDiv.classList.add('center');
    centerDiv.append(text);
    swBanner.append(centerDiv);

    if (!pageSimulator) {
      body.insertBefore(swBanner, body.firstChild);
    } else {
      pageSimulator.insertBefore(swBanner, pageSimulator.firstChild);
    }
  }

  document.addEventListener("DOMContentLoaded", function () {
    createBanner(configObj, null);
  });
</script>
13

Thank you very much. I have been able to successfully reduce the width of the vertical nav bar and it looks much better.

14

Thanks for responding to this as well. Unfortunately I tried it and the padding didnt seem to make a difference on the desktop view but did to the tab and mobile views. I even tried adding spaces before the text but didn’t get results. Not sure if there’s anything else I can do to get the code to only consider the space after the vertical nav bar so that the text ends up truly in the centre of that part of the screen.

15

Remove this line:

swBanner.style.width = "100%";

and add this inside the custom code header, below the script

<style>
.sw-banner {
  width: 100%;
}

@media (min-width: 769px) {
  .sw-banner {
    width: 120%; //increase or decrease this percentage to find you needs
  }
}

</style>
1 Like
16

That worked perfectly well. Thank you soo much for your help @matthieu_chateau - I really appreciate it.

1 Like
18

This is interesting. Any reference articles to include a picture or a video like a scrolling image in this announcements banner?

19

Hi there, does it anyone knows if is possible to create a banner like this but including record info of my database? For instance, number of items of a list, etc.