Need Large Custom Button (Urgently)

dreamscape

Hi - I just purchased the full version of Buttonizer to unlock all the features, but can't seem to do something which I thought would be pretty simple. I'm trying to load a large custom .png file as my button graphic. I don't want it forced into a little circle with a shadow behind it, I just want the image, at 100% size, with no bells or whistles, which will open a web-page on the site when clicked. But every time I load the image, it (a) shrinks it and doesn't allow me to enter a custom display size, and (b) it forces it into a circle shape, chopping off the corners, and puts a round shadow behind the circle that I can't seem to turn off. Please help, this is to implement a COVID-19 update on a mental health service's website, and people need to know this stuff asap. Many thanks 🙂 Sam

Jasper

Hi @dreamscape ! Welcome to the Buttonizer Community 🥳 Thank you for trying out Buttonizer!

Good question! The buttons can be square, we have the setting 'Border radius' underneath 'Group style' or 'Button style' you're able to use:

If you set the 'Border radius' to zero (0) it should be square. Then you're able to use a transparant background.

About the size of the image
How large is your image? Because, when you're using the 'Group icon' as image, you're able to change the image size. But it is 'forced' to have a max-width of the button by the CSS of Buttonizer. We'll rethink that for our next update.

For now, you'll need to add the following CSS to force the image to aply the size set at 'image size':

.buttonizer img {
   max-width: none !important;
}

Let me know if this helps!

dreamscape

Jasper

Hi Jasper, many thanks for the swift response. Above is a mock-up showing what the button needs to look like, how big it is (237 x 200 pixels), and where it needs to be positioned, i.e. half on and half off the page, in a fixed (not relative) position (i.e. a position that uses x,y pixels from the top and side, not %).

In case it's helpful...
The website URL is https://isorropia.uk
The image (button graphic) is

As things stand I cannot get anything that looks remotely like this mock-up with Buttonizer. If this can't be done with the plug-in's core functionality I haven't got a lot of time to try and kludge a solution with bits of code (especially as I'm not very techy). I'll either have to search for a different plug-in or hire a freelancer to create a piece of custom code for the site to achieve this.

If you don't think I can get this button looking like the mock-up using Buttonizer, would you be able to expedite a refund of my lifetime licence please? As this is an out of pocket expense that I'll be claiming back later, but in the meantime I'll need that money to purchase another plug-in or pay a coder to solve this.

In the meantime I'll keep trouble-shooting the solutions you've suggested, but so far it's not happening ;/

Thanks again,

Sam

Jasper

Thank you for your quick reply! Unfortunately Buttonizer wasn't build to show big images like these, but I'll help you through it! 🙂

Are you able to display the button on your website so I can see how far you've gotten? Then I'll make sure to do my best directing you to the to the right settings!

dreamscape

Jasper Thanks Jasper, that's very kind of you. I did make a test page so that I/we could tinker with it until it was ready to publish live, but I can't seem to get the button to display on just one page, so I've had to publish it globally to every page live. Not ideal, but never mind.

The best I could achieve was this... https://isorropia.uk/test/

And this is what I'm aiming for...

The button needs to remain fixed in the horizontal axis, but instead moves when the browser window is resized.
The button should display only on the homepage, not every page.
The button should display at full-size, and not be shrunk.
The button shouldn't have a box or a circle surrounding it, or a drop shadow beneath it.

I'm keen to deliver what I've been asked to do, so do please say if the above isn't possible with Buttonizer, so that I don't waste your time, or keep our clients waiting any longer than is necessary.

Thanks again for your help Jasper 🙂 I do appreciate you working on a weekend.

Sam

Jasper

dreamscape Thank you for the test page! It's still possible! 🙂

I've written some CSS for you which you need to add to your webpage. You can do that here: https://isorropia.uk/wp-admin/customize.php (The WordPress customizer).

This overwrites the position of the button and keeps the button in place from the middle of the page.

If you add the CSS and see the result, is this the place where you want the button?

.buttonizer {
    top: 300px !important;
    bottom: unset;
    right: unset;
    left: 100px !important;
}

.buttonizer a {
    box-shadow: unset !important;
}

.buttonizer img {
   max-width: none !important;
}

@media screen and (min-width: 1270px) {
    .buttonizer { 
        left: calc(50% - 540px) !important;
    }
}

Button only on the homepage

This one should be easy! This can be done through page rules.

If you go to the button and you see the 3 dots menu. If you click this you'll find 'Advanced settings'.

Advanced settings window

Then you see this page and need to click on 'Manage page rules'.

Setting up the page rule

Then this window appears. On the left you'll see a dropdown with filter types, make sure 'Page' is selected. Now, you'll be able to select the homepage. In the box next to it, select 'Home (frontpage, home)'.

Now close this window

If you close the page rules window, you'll get back to the 'Advanced settings'. There, select your page rule and make sure the option "Show button when rule is triggered" is selected in the dropdown that's pops up.

Now if you publish your changes, the button should only be visible on the home page.

That's it!

Let me know if this helps 🙂

dreamscape

Wow, thanks for the code and the tutorial 🙂 The button looks good and I think that solves the problem. I've got a lot of work to do on the site this weekend, but I'll test out the button (and ask my bosses what they think) and let you know how it works out.

Thanks again Jasper, you've clearly gone above and beyond the call of duty here, and it's very much appreciated.

Sam

dreamscape

Hi - Thanks again for all the help you've offered so far, it's been hugely appreciated 🙂 But I think we may need a little more help if you're able to offer it. We've just had some feedback regarding the COVID-19 update button that we're implementing with Buttonizer. This is what they said...

"When you're on a mobile (cell) phone looking at the website the “Click here for Covid 19 update” button is smack in the middle of the web page, and you can’t see anything behind it."

This is the website... https://isorropia.uk

And this is the additional CSS code that we're using with the Buttonizer plug-in...

.buttonizer {
top: 230px !important;
bottom: unset;
right: unset;
left:100px !important;}

.buttonizer a {
box-shadow: unset !important;}

.buttonizer img {
max-width: none !important;}

@media screen and (min-width: 1270px) {
.buttonizer {
left: calc(50% - 592px) !important;}

Any help finding a solution would be much appreciated. Perhaps having the button shrink to half the size (or as small as it can go before the text becomes illegible) when viewed on a hand-held device? Or having a little 'X' in the corner of the button to close it? If anyone could advise on how to do something like this, it would be very much appreciated.

Many thanks,

Sam