eoin
March 29, 2021, 5:11pm
1
I’ve got some custom code that I need to position on this website beneath the top black bar and to the right of the text.
How do I achieve that in my ghost 4.0 (casper theme)?
Here is the code:
<form method="POST" action="https://btcpay905361.lndyn.com/api/v1/invoices" class="btcpay-form btcpay-form--block">
<input type="hidden" name="storeId" value="E5cxHG1gSP3TiBBeB1aGsRyp8MhVj885FBhra3WEzELT" />
<input type="hidden" name="price" value="10" />
<input type="hidden" name="currency" value="USD" />
<input type="image" class="submit" name="submit" src="https://btcpay905361.lndyn.com/img/paybutton/pay.svg" style="width:209px" alt="Pay with BtcPay, Self-Hosted Bitcoin Payment Processor">
</form>```
eoin
March 29, 2021, 8:02pm
2
Just noticed the link was broken; it is working now.
Can you please take a screenshot and show, using arrows and text, where you want this to be placed? Not sure what you mean by “top black bar” ? Are you referring to the menu list?
I don’t use Casper, but I am willing to install on my local machine and review the theme files in order to further assist / help you.
Thanks!
eoin
March 30, 2021, 6:50pm
4
I know how to take a screenshot, but how can I add arrows and text to the image?
eoin
April 2, 2021, 11:43am
5
Hi Mr Bear, could you please tell me how I can add arrows + text to my screenshot?
Hey @eoin ,
Sorry for the very late reply. You can, for arrows and what not, use lightshoot.
It’s a browser tool for taking screenshots.
eoin
April 9, 2021, 11:23am
8
Hi Bear, I’d like to move the ‘Donate Bitcoin to Eoin…’ button to where the red box is on the right hand side of the image is.
Any assistance greatly appreciated.
Okay. Got it. Might be easiest to create a floating DIV for that. I will review the theme files first as I don’t know the structure of Casper. I’ll get back to you later on today or tomorrow evening.
Just to be clear; is the image showing a page or a post or is it the actual home page?
eoin
April 10, 2021, 9:52am
12
The image is showing the donate page.
Sorry for not getting back to yesterday, I will review this today.
eoin
April 15, 2021, 1:32pm
15
Hi Bear, did you manage to make any progress in moving the button?
Gosh, so sorry! I’ll do it when I get home.
Hi @eoin ,
Again, sorry for not answering before. Based on the code you posted on top in this thread, I did it like this for a page.
CSS →
.float-right-sm {
background-color: transparent;
}
.float-right-lg {
background-color: transparent;
}
@media (max-width: 768px) {
.float-right-sm {
float: right;
}}
@media (min-width: 769px) {
.float-right-lg {
float: right;
}}
.clearfix::after {
display: block;
clear: both;
content: "";
}
The HTML (insert using a HTML card):
<div class="clearfix">
<span class="float-right-sm"></span><br>
<span class="float-right-lg"><form method="POST" action="https://btcpay905361.lndyn.com/api/v1/invoices" class="btcpay-form btcpay-form--block">
<input type="hidden" name="storeId" value="E5cxHG1gSP3TiBBeB1aGsRyp8MhVj885FBhra3WEzELT" />
<input type="hidden" name="price" value="10" />
<input type="hidden" name="currency" value="USD" />
<input type="image" class="submit" name="submit" src="https://btcpay905361.lndyn.com/img/paybutton/pay.svg" style="width:209px" alt="Pay with BtcPay, Self-Hosted Bitcoin Payment Processor">
</form></span><br>
</div>
I tried various ways, adding just one DIV-tag using float:right without success. But this works fine. I will review doing the same for under the header later today (got home late last night and I gotta go to work now) and I’ll get back to you.
eoin
April 16, 2021, 10:37am
18
Hi Bear, The slider and the amount box need to move as well.
That is not included with the code you pasted. All I get from the code is the button.
eoin
April 16, 2021, 3:55pm
20
The code above is missing some details. Here is the correct code.
<style type="text/css"> input[type=range].btcpay-input-range { -webkit-appearance:none; width:100%; background: transparent; } input[type=range].btcpay-input-range:focus { outline:0; } input[type=range].btcpay-input-range::-webkit-slider-runnable-track { width:100%; height:3.1px; cursor:pointer; box-shadow:0 0 1.7px #020,0 0 0 #003c00; background:#f3f3f3; border-radius:1px; border:0; } input[type=range].btcpay-input-range::-webkit-slider-thumb { box-shadow:none; border:2.5px solid #cedc21; height:22px; width:22px; border-radius:50%; background:#0f3723; cursor:pointer; -webkit-appearance:none; margin-top:-9.45px } input[type=range].btcpay-input-range:focus::-webkit-slider-runnable-track { background:#fff; } input[type=range].btcpay-input-range::-moz-range-track { width:100%; height:3.1px; cursor:pointer; box-shadow:0 0 1.7px #020,0 0 0 #003c00; background:#f3f3f3; border-radius:1px; border:0; } input[type=range].btcpay-input-range::-moz-range-thumb { box-shadow:none; border:2.5px solid #cedc21; height:22px; width:22px; border-radius:50%; background:#0f3723; cursor:pointer; } input[type=range].btcpay-input-range::-ms-track { width:100%; height:3.1px; cursor:pointer; background:0 0; border-color:transparent; color:transparent; } input[type=range].btcpay-input-range::-ms-fill-lower { background:#e6e6e6; border:0; border-radius:2px; box-shadow:0 0 1.7px #020,0 0 0 #003c00; } input[type=range].btcpay-input-range::-ms-fill-upper { background:#f3f3f3; border:0; border-radius:2px; box-shadow:0 0 1.7px #020,0 0 0 #003c00; } input[type=range].btcpay-input-range::-ms-thumb { box-shadow:none; border:2.5px solid #cedc21; height:22px; width:22px; border-radius:50%; background:#0f3723; cursor:pointer; height:3.1px; } input[type=range].btcpay-input-range:focus::-ms-fill-lower { background:#f3f3f3; } input[type=range].btcpay-input-range:focus::-ms-fill-upper { background:#fff; } </style>
<form method="POST" action="https://btcpay905361.lndyn.com/api/v1/invoices" class="btcpay-form btcpay-form--block">
<input type="hidden" name="storeId" value="E5cxHG1gSP3TiBBeB1aGsRyp8MhVj885FBhra3WEzELT" />
<div class="btcpay-custom-container">
<input id="btcpay-input-price" name="price" type="text" min="0" max="none" step="any" value="10" style="width: 209px;" oninput="event.preventDefault();isNaN(event.target.value) || event.target.value <= 0 ? document.querySelector('#btcpay-input-price').value = 10 : event.target.value" onchange="document.querySelector('#btcpay-input-range').value = document.querySelector('#btcpay-input-price').value" />
<select name="currency">
<option value="USD" selected>USD</option>
<option value="GBP">GBP</option>
<option value="EUR">EUR</option>
<option value="BTC">BTC</option>
</select>
<input class="btcpay-input-range" id="btcpay-input-range" value="10" type="range" min="10" max="500" step="10" style="width:209px;margin-bottom:15px;" oninput="document.querySelector('#btcpay-input-price').value = document.querySelector('#btcpay-input-range').value" />
</div>
<button type="submit" class="submit" name="submit" style="min-width:209px; min-height:57px; border-radius: 4px;border-style: none;background-color: #0f3b21;" alt="Pay with BtcPay, Self-Hosted Bitcoin Payment Processor"><span style="color:#fff">Donate Bitcoin to Eoin with</span>
<img src="https://btcpay905361.lndyn.com/img/logo.svg" style="height:57px;display:inline-block;padding: 5% 0 5% 5px;vertical-align: middle;">
</button></form>
My apologies. That should render the entirety of the button.
