Jump to content


Photo

How To Add The Beacon To Your Header (Or Main Menu)


  • Please log in to reply
8 replies to this topic

#1 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 15 February 2016 - 12:06 PM

The Beacon is a cool little feature that broadcasts a custom message on your site. It was built into the last theme I released before MD, Spotlight.

 

Watch this quick GIF to see it in action:

 

Attached File  beacon-gif.gif   43.48KB   0 downloads

 

...or see it on the Kolakube website. It's the little glowing dot at the top right of the page and I use it to broadcast the availability of my MD Service Plans.

 

The Beacon even works well on mobile to get your message out there. Until I create it as an easy MD addon, you can insert the simple template HTML and CSS into your child theme in 2 easy steps:

 

A shoutout to + Ray Smith for getting me to port the beacon onto his site as a custom mod earlier this year & jwnek for opening a support thread about it.

 

Place this function into your child theme's functions.php file. You can edit the text and any classes you want. Change class to beacon-status-off to dim beacon out.

 

(NOTE: To add Beacon to Main Menu instead, add the code below as instructed then follow the Main Menu directions at the end of this post)

function kol_beacon() { ?>

    <div id="beacon" class="beacon menu-beacon format-text-sec text-center">

        <span class="close-on-tablet">
            <a class="beacon-status beacon-status-on" href="/plans/"></a>
            <span class="beacon-pulse"></span>
        </span>

        <div class="beacon-content block-single">
            <p class="beacon-text">MD Service Plans are back! Order your professional site setup today:</p>

            <a href="/plans/" class="beacon-button button green">Choose your plan &rarr;</a>

        </div>

    </div>

<?php }

add_action( 'md_hook_before_header_menu', 'kol_beacon', 30 );

...and place this into your child theme's style.css file. This is how you can change background colors and text colors:

/*------------------------------*\
    $BEACON
\*------------------------------*/

.beacon {
    color: #aaa;
    font-size: 14px;
    line-height: 21px;
    padding: 10px;
    position: relative;
    width: 35px;
    z-index: 11;
}
.beacon:hover {
    background-color: #333;
    border-radius: 3px 3px 0 0;
}
.beacon:hover .beacon-content {
    border-radius: 3px 0 3px 3px;
    display: block;
}
.beacon:hover .beacon-pulse {
    display: none;
}


/* STATUS */

.beacon-status {
    border-radius: 50%;
    display: inline-block;
    height: 15px;
    position: relative;
    width: 15px;
    z-index: 2;
}
.beacon-status-on {
    background-color: #30a146;
}
.beacon-status-off {
    background-color: #777;
}
.beacon-pulse {
    background-color: #2b803c;
    border-radius: 50%;
    content: '';
    height: 23px;
    left: 6px;
    opacity: 0;
    position: absolute;
    top: 6px;
    width: 23px;
    z-index: 0;
    -webkit-animation: pulse 2.5s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation: pulse 2.5s ease-out;
    -moz-animation-iteration-count: infinite;
    -o-animation: pulse 2.5s ease-out;
    -o-animation-iteration-count: infinite;
    animation: pulse 2.5s ease-out;
    animation-iteration-count: infinite;
}


/* MENU */

.beacon-content {
    background-color: #333;
    border-radius: 3px;
}
.beacon-text {
    margin-bottom: 13px;
}
.beacon-content .beacon-button {
    display: block;
    text-align: center;
}
.beacon-content .beacon-button:hover {
    color: #fff;
}
.menu-beacon {
    float: right;
    margin-top: 12px;
}
.beacon-toggle {
    position: relative;
}
.beacon-toggle .beacon-pulse {
    left: 11px;
    top: 8px;
}


/* PULSE ANIMATION */

@-webkit-keyframes pulse {
    0% {
        opacity: 0;
        -webkit-transform: scale(.1, .1);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.2, 1.2);
    }
}
@-moz-keyframes pulse {
    0% {
        opacity: 0;
        -moz-transform: scale(.1, .1);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -moz-transform: scale(1.2, 1.2);
    }
}
@-o-keyframes pulse {
    0% {
        opacity: 0;
        -o-transform: scale(.1, .1);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -o-transform: scale(1.2, 1.2);
    }
}
@keyframes pulse {
    0% {
        opacity: 0;
        transform: scale(.1, .1);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1.2, 1.2);
    }
}


/* MEDIA QUERIES */

@media all and (min-width: 900px) {
    .header-menu {
        float: left;
    }
    .beacon-content {
        display: none;
        position: absolute;
        right: 0;
        top: 35px;
        width: 300px;
    }
    .beacon-trigger {
        display: none;
    }
}
@media all and (max-width: 900px) {
    .header .beacon {
        padding: 0;
    }
    .beacon.menu-beacon {
        float: none;
        margin-top: 0;
        width: auto;
    }
    .beacon .beacon-content {
        background-color: rgba(0, 0, 0, 0.7);
        margin-bottom: 13px;
        margin-top: 26px;
    }
}

-----

 

TO SHOW BACON IN MAIN MENU INSTEAD OF HEADER:

 

1) In the function you added to your functions.php file, REMOVE the old add_action() and change it to:

add_action( 'md_main_menu_side_triggers', 'kol_beacon', 30 );

2) Now, find this line in your CSS file:

.menu-beacon {
    float: right;
    margin-top: 12px;
}

and change it to:

.menu-beacon {
    float: right;
    margin-left: 7px;
    margin-top: -5px;
}

3) Finally, add this bit of CSS anywhere within the Beacon CSS:

.main-menu-active-search .menu-beacon {
	margin-top: 10px
}

  • Ray likes this
- Alex
Check out the Kolakube blog or follow me on Twitter.

#2 Ray

Ray

    Brooklyn's Finest

  • + Legacy Member
  • PipPipPip
  • 132 posts
  • LocationLos Angeles

Posted 16 March 2016 - 06:05 PM

Hey everyone...

 

If you're offering a service from your MD site, you should really consider adding the (pulsating) Beacon to your header menu.

 

The beacon has been getting more clicks and converting better than my "contact" did. Same placement...better results.

 

Here's an example of it (Evernote link)


I consult, create products and brainstorm all day


#3 flamerz

flamerz

    Member

  • MD Customer
  • PipPip
  • 22 posts

Posted 18 March 2016 - 12:27 PM

I think you need to add:

 

@media all and (min-width: 900px) {
 
    .header-menu {
       float: left;
    }
 
    .beacon-content {
        display: none;
        position: absolute;
        right: 0;
        top: 35px;
        width: 300px;
    }
 
    .beacon-trigger {
        display: none;
    }
 
}
 
to get some free room for the beacon.


#4 callummahoney

callummahoney

    Member

  • MD Customer
  • PipPip
  • 23 posts

Posted 20 February 2017 - 07:21 PM

As someone with about as much colour design skill as a blind person, does anyone have any thoughts on finding colour options to change the colour of the beacon?

 

I'm looking at the default red (#ae2525), but wouldn't have any idea on the other colour options for the pulsing.



#5 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 20 February 2017 - 09:12 PM

Great question. I assume you've already installed the beacon to your site, so open up your style.css file and look for these selectors:

.beacon-status-on {
    background-color: #30a146;
}

.beacon-status-off {
    background-color: #777;
}

The "on" status selector is the main part, the green color, of the Beacon. The "off" status selector is the gray color when the Beacon is turned off. You would switch out #30a146 with the #ae2525 color.

 

Next, the color of the pulse behind the main beacon circle is directly below the lines above:

.beacon-pulse {
    background-color: #2b803c;
    [...]
}

You can change that color to another color code, preferably a more subtle red color so the pulse has contrast behind the main Beacon.

 

I hope that helps get you started! I intend on releasing the Beacon with more controls in a plugin one of these days, but until then, we have total control over how it works with this code. If you get stuck with anything else, let me know and I'll be more than happy to walk you through it!


- Alex
Check out the Kolakube blog or follow me on Twitter.

#6 drbarrywheeler

drbarrywheeler

    Newbie

  • MD Customer
  • Pip
  • 4 posts

Posted 23 March 2017 - 10:06 PM

What if I want to add it to the the main menu instead of header menu?



#7 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 24 March 2017 - 04:37 PM

Hey Dr. Barry, great question. I've added further instructions to the end of the top post. By making those small adjustments you'll be able to move the Beacon into the Main Menu.

 

One day this will be in a plugin of some kind and will be far easier to work with! Let me know if you need any further help with this.


- Alex
Check out the Kolakube blog or follow me on Twitter.

#8 drbarrywheeler

drbarrywheeler

    Newbie

  • MD Customer
  • Pip
  • 4 posts

Posted 26 March 2017 - 07:51 AM

Thanks Alex, Worked great. I am using the custom header nav with logo in the center you discuss on another post so I also had to remove " .header-menu { float: left; } but otherwise loox good. I was struggling with this for hours before I got on here and asked you.



#9 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 27 March 2017 - 02:55 PM

Sorry for the troubles but I hope you learned something new during the struggle. Always feel free to ask whatever you get stuck on here. Glad it's all working in the end!


- Alex
Check out the Kolakube blog or follow me on Twitter.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users