• Welcome to the all-new Kolakube support, the official place to get help for Marketers Delight, XFtoWP, CryptoWP, and other WordPress products! Please login with your account details to access private support forums.

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

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.

The Beacon is now available for download. :)

https://marketersdelight.com/dropins/beacon/

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.
 
Last edited:
  • Like
Reactions: Ray

Ray

Well-known member
Staff member
Md
Messages
431
Reaction score
213
Location
Los Angeles
Website
raylosophy.com
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)

 
Comment

flamerz

Active member
Messages
26
Reaction score
14
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.
 
Last edited by a moderator:
Comment

callummahoney

Active member
Md
Messages
54
Reaction score
13
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.

 
Comment

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,177
Reaction score
1,729
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!

 
Comment

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,177
Reaction score
1,729
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.

 
Comment

drbarrywheeler

Member
Md
Messages
5
Reaction score
3
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.

 
Comment

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,177
Reaction score
1,729
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!

 
Comment

greatsun0

Active member
Messages
60
Reaction score
12
Hi Alex,

I followed the above instruction, but the beacon isn't quite right yet.  The position and the background mismatch.

Below is my website.

https://www.ptcn.me/

Would you please check?

 
Comment

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,177
Reaction score
1,729
Maybe you solved it because everything looks about right to me.

Screen Shot 2018-07-27 at 12.13.39 PM.png

 
Comment

amalseed

Well-known member
Md
Messages
231
Reaction score
46
I have just added beacon to my site and it has moved all the nav elements, see image attached.

Any ideas on how to fix?

maaaate.jpg

 
Comment

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,177
Reaction score
1,729
Thank you for bringing this up - I actually have re-releasing the Beacon on my list of Monday releases and think it will be the perfect candidate for this next release. If you take your site off maintenance mode I can see your issue, otherwise wait 'til Monday and I will have the updated release for the Beacon then!

 
Comment
Top