How to position my custom code differently on the page

eoin · March 29, 2021, 7:45pm

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

Just noticed the link was broken; it is working now.

thebear.dev · March 30, 2021, 5:09am

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:51pm

I know how to take a screenshot, but how can I add arrows and text to the image?

eoin · April 2, 2021, 11:43am

Hi Mr Bear, could you please tell me how I can add arrows + text to my screenshot?

eoin · April 8, 2021, 4:13pm

bump

thebear.dev · April 8, 2021, 4:24pm

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:24am

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.

thebear.dev · April 9, 2021, 11:26am

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.

eoin · April 9, 2021, 3:04pm

thebear.dev · April 9, 2021, 3:29pm

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

The image is showing the donate page.

thebear.dev · April 10, 2021, 10:01am

Ok. Thanks.

thebear.dev · April 11, 2021, 6:27am

Sorry for not getting back to yesterday, I will review this today.

eoin · April 15, 2021, 1:32pm

Hi Bear, did you manage to make any progress in moving the button?

thebear.dev · April 15, 2021, 1:49pm

Gosh, so sorry! I’ll do it when I get home.

thebear.dev · April 16, 2021, 4:35am

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

Hi Bear, The slider and the amount box need to move as well.

thebear.dev · April 16, 2021, 1:06pm

That is not included with the code you pasted. All I get from the code is the button.

eoin · April 16, 2021, 3:57pm

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.