[Support request] Overlay an image with a link on entire site and be able to turn it on and off

[Ryan]

Hello! I am trying to overlay an image (eventually maybe an animation) with a link on the top left of my screen (https://imgur.com/a/tVhmlO5).

I’m trying to put this on my entire site, and i’d like it to follow the user as they scroll down. I also want the option to turn it on and off manually (will likely turn on/off 5 times a week)

What would be the best way to achieve this? I’m guessing it’s through an Element that applies to entire site, but wanted to check with you first. Thanks so much for your help!

[David]

Hi there,

Yep, the best method is to use an Element.
I would work with a Block Element, and i would use the after_footer Hook, this keeps out of the way of the rest of the page.

Some CSS would be required to fix its position. Let us know if you need a hand with that.

To Disable / Enable the element, the simplest options is to Quick Edit the element and change its Status to Draft / Published.

[Ryan]

Hi David, Thanks so much!

I’ve setup the button to show on the attached page.

1. Location – I tried after_footer but i would like it to follow the user as they scroll down, so i swapped to wp_head so it shows up at the top, but this doesn’t follow the user (not sure which one to select for that). Would also like to know the CSS to set the exact location
2. Is it possible to have a button be two colors? Right now I have two buttons that are right next to each other, but would like 1 button if possible

[David]

It will require some CSS to position. So for the Hook. Do NOT use the wp_head that is reserved for adding inline codes, not HTML.
But before we look at the CSS or decide upon the hook – a question:

What happens to this link on smaller screens ?
Does it disappear ? Does it sit in the content ? Or Does it stick to the top / bottom of the screen ?

Let me know and in the meantime ill look at the Button color / single button possibilities.

[Ryan]

Sorry! I swapped back to after_footer now

Could we hide it on smaller screens?

[David]

No worries 🙂
So here goes.

1. To make the button into a single element will require HTML.
Remove the Buttons Block, and replace it with a HTML block.

1.1 In the HTML Block add this:

<a class="twitch-button" target="_blank" rel="noopener noreferrer" href="https://twitch.tv/bunnymuffinslol">
    <span class="gb-icon"><svg viewBox="0 0 16 16" class="bi bi-twitch"
        fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
        <path
            d="M3.857 0 1 2.857v10.286h3.429V16l2.857-2.857H9.57L14.714 8V0H3.857zm9.714 7.429-2.285 2.285H9l-2 2v-2H4.429V1.143h9.142v6.286z">
        </path>
        <path d="M11.857 3.143h-1.143V6.57h1.143V3.143zm-3.143 0H7.571V6.57h1.143V3.143z"></path>
    </svg></span>
    <span class="gb-icon"><svg aria-hidden="true" height="1em" width="1em"
        viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
        <path class="blinking" fill="red"
            d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path>
    </svg></span><span class="gb-button-text">LIVE! Click to watch!</span></a>
</a>

2. Publish that element.

3. Then add this CSS to your site:

.twitch-button {
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    background-color: #000;
    padding-right: 15px;
    position: fixed;
    top: 50%;
    left: 0;
}

.twitch-button span:nth-child(1) {
    padding: 15px;
    font-size: 1.5em;
    color: #ffffff;
    background-color: #9146ff;
    background-image: linear-gradient(118deg, rgba(166, 50, 255, 0.1), rgba(255, 255, 255, 0.3));
}
.twitch-button span:nth-child(2) {
    padding: 10px;
}

@media(max-width: 1024px) {
    .twitch-button {
        display: none !important;
    }
}

The last rule is where we set the max-width: 1024px screen at which point the button is hidden.

[Ryan]

You are MVP. I made a few adjustments and am struggling with 1 final thing: how do I change the background color and the on-hover color without changing my default button colors?

I tried adding this:

.twitch-button:hover,
.twitch-button::active {
	background: #272727;
	color:#FFF;}

but i have no clue what i’m doing

[David]

Aah, i edited the HTML above, in the first line i removed the button class.

Now your CSS should work 🙂

[Ryan]

thank you so much! exactly what i needed!

[David]

Glad to be of help!

[Author]

Posts