Hello Bar or Hellobar is a website notification bar which is said to be a great way to direct traffic and promote your website’s most important content.
So, what is a Hello Bar?
Hello Bar is a web notification bar which appears at the top of the screen. As of now, Hello Bar is free for all but words from the support team is that it will become a premium service soon.
Hello Bar is a simple website notification bar (some call it web toolbar) which displays important messages, content URL’s or simply asking your visitors to sign up for you newsletter. Yes, that’s the bar you are probably seeing on the top of your screen right now.
While this is a very powerful advertising tool, it could be pretty ‘nasty’ to deal with especially when you have a Content Delivery Network running on the background or having minify setting turned on. Plus, I am using CloudFlare custom page rules which made my Hello Bar not working at all.
Even though I decided not to use Hello Bar for that matter, I am still very interested to build something and thus, Google had just became my good friend (as always).
I came across this article and I said, “Hey, let’s make it happen!”
Yes, I am talking about building my own Hello Bar from scratch with the help of some tools I had in my inventory; Genesis Framework and Genesis Extender plugin.
In this tutorial, I will show you how you can actually build your own and custom-made Hello Bar alternative from scratch under 10 minutes.
How to build your own, custom-made Hello Bar alternative?
Basically, this is a 6-steps tutorial and no fuss, follow these steps and you should be rocking with your shiny Hello Bar in a few minutes time.
We will be doing these:
- Creating a conditional rule (more after this)
- Creating a custom widget area
- Using genesis hooks to customize the widget created
- Tag the conditionals to control the display of the Hello Bar alternative
- Adding the text into the widget area
- Style your Hello Bar laternative to make it looks prettier
Step 1 – Creating a conditional rule using Genesis Extender plugin
This would require Genesis Extender plugin and you can get a copy here (with 30-days money back guarantee).
Genesis > Extender Custom > Conditionals > Examples
Click on ‘Examples’ and select the location you want the website notification bar to be visible. Here are some of the common legends you could use:
- All pages except front page – Is NOT Front Page
- Front page only – Is Front Page
- On posts only – Is Single Post
- On pages only – Is Page
Once done, click on the Save Changes button.
Step 2 – Create a widget area for Hello Bar
In this step, you would need to create a new widget area for your website notification bar and Genesis Extender plugin makes it all look so easy.
Genesis > Extender Custom > Widget Areas
For the name, any name to label the widget area is fine. I used genesisbar as the name for my widget area. Remember to save the setting once it is done.
Step 3 – Using Genesis Hooks to select the widget area
On the same page, head over to ‘Hooks’ and using the drop down button, choose genesis_before.
Leave the rest of the settings as default and press save.
Step 4 – Tagging using conditionals
Head over to conditionals option and select the conditional tag you did earlier. Ensure the right conditional is checked and press save.
Once completing this step, you have completed creating a widget area for your custom Hello Bar alternative.
Step 5 – Setting up the widget area with text widget
You would be able to see genesisbar column in the widget section. The next step is to create a text widget area and paste this code in it:
<div id=”genesisbar-pusher”></div>
<div id=”genesisbar-wrapper”>
<div id=”genesisbar-container”>
Check out this link. <a href=”http://example.com”>Check it out</a></div>
</div>
All you need is to change the ‘check out this link’, ‘check it out’ and the link of the call-to-action button.
Step 6 – Styling your custom-made Hello Bar
By now, your website notification bar should be in place but the styling should be very weird. At times, your site might look broken.
Access your theme’s style.css file using FTP or sFTP and paste this code in it:
#genesisbar-pusher {
height: 33px;
}#genesisbar-wrapper {
position:fixed;
width: 100%;
top: 0px;
left: 0px;
background-color: #eb593c;
color: white;
text-align: center;
height: 30px;
line-height: 30px;
font-size: 14px;
font-family: Georgia;
border-bottom: 3px solid #fff;
-webkit-box-shadow: 0 8px 6px -6px #999;
-moz-box-shadow: 0 8px 6px -6px #999;
box-shadow: 0 8px 6px -6px #999;}
#genesisbar-container a {
background-color: #4a4844;
color: #fff;
text-decoration: none;
line-height: 30px;
padding: 2px 8px;
border-radius: 3px;
margin-left: 7px;
font-size: 12px;
}#genesisbar-container a:hover {
background-color: #61645c;
}
To disable the code on mobile devices, add this code to your style.css after doing the above:
/*hide on small screens*/
@media only screen and (max-width: 760px) {
body #genesisbar-wrapper,
body #genesisbar-pusher {
display: none !important;
}
If you have no idea how to access your style.css through FTP, there is another alternative which is using Genesis Extender plugin itself.
In order to do so, here’s what you need to do:
Genesis > Extender Custom > Enable ‘Activate Front-end CSS Builder’ > Click To View Front-end
Once the page is open, click on Show/Hide CSS Builder which is the on the top right of the page. You will then see a sidebar pop-ing out from the left.
Scroll down the sidebar and you will see Custom CSS Editor and click on ‘Pop-out’ link.
Paste the codes above and you press save. Refresh the page and styling is done.
Your Hello Bar alternative is ready!
While this is a perfectly a good Hello Bar clone, there are one downside which the analytics part. Using the original Hello Bar, you are able to check on the analytics report such as the click-through-rates (CTR) but with this self coding, you do not have the luxury of such.
Moving forward, I feel Genesis Extender plugin is a great tool for any bloggers who are interested in custom theme customization and in this tutorial, it just prove how easy it is to use to create a custom blog feature under 5 minutes.
Download Genesis Extender plugin
I hope you find this tutorial useful and tell me what you think.
