Hellobar Free Alternative - DevSeries

CCarter

CCarter

Final Boss ®
Moderator
BuSo Pro
Boot Camp
Digital Strategist
Joined
Sep 15, 2014
Messages
4,357
Likes
8,864
Degree
8
6OJQNgF.jpg


As requested by @j a m e s - A HelloBar Alternative. This code was a lot lighter than I thought. Example: Hellobar Free Alernative (Open Source)

CSS inside the <head><head> tag:

Code: 
<!-- Style this nonsense - @MercenaryCarter -->
<style type="text/css">
body {
   margin: 0px;
}

.top-general-alert {
  padding: 8px;
  border: none;
  font-size: 1em;
  line-height: 2em;
  text-align: center;
  display: none;
  background-color: #00294e;
  color: #ffee7a;
}

.top-general-alert {
   color: #fff;
}

.top-general-alert a, .top-general-alert a:hover {
   color: #0099cc;
}
</style>
<!-- End of style this nonsense - @MercenaryCarter -->

--

HTML code AFTER the opening <body> tag:

Code: 
<!-- This shit is require mated - @MercenaryCarter -->
<div class="top-general-alert">
   <span>This account is restricted from making edits to any settings. <a href="http://www.serpwoo.com/">Click here to create your own account for FREE and remove the limits!</a></span>
   <button class="close">&times;</button>
</div>
<!-- End of require mated - @MercenaryCarter -->

--

javascripts/jQuery right BEFORE the closing </body> tag:

Code: 
<!-- Stuff that makes the javascript run - @MercenaryCarter -->
   <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {

   if( $('.top-general-alert').length > 0 ) {
     $('.top-general-alert').delay(800).slideDown('medium');

     $('.top-general-alert .close').click( function() {
       $(this).parent().slideUp('fast');
     });
   }

  });
</script>
<!-- Stuff that makes the javascript run - @MercenaryCarter -->

--


MEwSavP.gif


You guys might want to start giving me real challenges. :wink:

-- CC
 
That was fast haha

DevSeries FTW!
 
Would something like this be faster loading than a standard plugin?
 
My code might be faster since it would be hard coded and there are no additional extra lines of code or anything with it. I don't know the standard plugins for wordpress though. This is the Dev section, we don't do plugins. :wink:
 
Nice. Thanks man.

Have you tested CTRs of HelloBar vs your version?
 
No I haven't. This is some barebones code I threw together. I made it as minimal as possible so people can customize it and style it to their theme. The concept of the code is the same as Hellobar without the added extras.
 
I've been trying for the last hour to add a Facebook like button to this, this is all I get. The alignments fucks out and there is no button. Any help would be appreciated

r02w9ru.png



Edit: I'm getting close, now I need to figure out the alignment

CpADsUq.png
 
Last edited:
@built that all css here on out. I personally would try to get a barebones like button on there, cause there is that rectangle box not rendering correctly.
 
You must log in or register to reply here.
Back