[ReggieroodParticipant]

Hi.

I made a custom button wich is ment to be a floating button at the right top of the page. It needs to have the link in it also.
May i recieve the css code for this?

With kind regards.

[JoaoModerator]

Hi There,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks

Joao

[ReggieroodParticipant]

for example. on http://www.grapelli.nl
right above you see this button staying on the top of the website.
I would like to do the same but instead of a theme x button i would like to use a png image (shaped as a button).
Then it needs to have a link to a certain page.

[ThaiModerator]

Hi There,

You can try with this CSS:

a.floating-button.x-btn.x-btn-flat {
    background: transparent url(https://placeholdit.imgix.net/~text?w=170&h=48) no-repeat center center;
    border: none;
}

Hope it helps 🙂

[ReggieroodParticipant]

Hi.

Nope, this doesnt do anything on the website.
This is the button that needs to be on the right top: http://knbouw.nl/wp-content/uploads/2016/11/stamp-actie.png

Regards!

[JadeModerator]

Hi there,

Please provide us with the URL of your site so that we can provide you with the custom CSS.

Thank you.

[ReggieroodParticipant]

http://www.knbouw.nl

[Rue NelModerator]

Hello There,

Thanks for providing the url. To resolve this issue, please have the previous code updated and add the following css code in the customizer, Appearance > Customize > Custom > CSS

.site .floating-button.x-btn.x-btn-flat {
    background: transparent url(http://knbouw.nl/wp-content/uploads/2016/11/stamp-actie.png) no-repeat center center;
    border: none;

    width: 400px;
    height: 247px;
    text-indent: -9990px;
}

The result should be something like this: http://prntscr.com/db5kiq

Hope this helps.

[ReggieroodParticipant]

I see that the code only works on http://www.grapelli.nl and i dont know why but it doenst work on http://www.knbouw.nl

[ReggieroodParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

It’s because there is no button added here http://knbouw.nl/, while http://www.grapelli.nl/ has this

<a href="http://grapelli.nl/inschrijven/" class="floating-button x-btn x-btn-flat">Schrijf je nu in! </a>

The CSS will only apply the styling, it can’t add the button (HTML element). Please add the button to http://knbouw.nl/ just like the way you added to the other one.

Thanks!

[ReggieroodParticipant]

oke i got it.
its important to add this code:

jQuery(document).ready(function($) {
  if( ! $('body').hasClass('page-id-210') ) {
    $('<a href="http://knbouw.nl" class="floating-button x-btn x-btn-flat">Schrijf je nu in! </a>').appendTo('.site');
  }
});

to Edit global javascript

many thanks.
The result is there!
Client happy, me happy

[ReggieroodParticipant]

Last thing. how can i make sure this isnt visible on the mobile?

[Paul RModerator]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

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

Hope that helps.

[Author]

Posts