Text block with bespoke border and button inside?

Possible solution: Create a text block with the 'block background' option turned on. This'll give a bit of internal padding to the block to keep the border offset from the text. Then use code to put a coloured border on just the left hand side of the block. Then use more code to place a button inside the text block. Putting the button inside the block would mean the border on the left of the block always extends down to the bottom of the button even when the block adapts to browser window resizes, as per screen grabs.

Yes. This is right direction.

With button, just add a hyperlink in Text Block, we can use CSS code to turn it to button

You can add text block first, then share link to page where you added it, we can give code

8 hours ago, tuanphan said:

Possible solution: Create a text block with the 'block background' option turned on. This'll give a bit of internal padding to the block to keep the border offset from the text. Then use code to put a coloured border on just the left hand side of the block. Then use more code to place a button inside the text block. Putting the button inside the block would mean the border on the left of the block always extends down to the bottom of the button even when the block adapts to browser window resizes, as per screen grabs.

Yes. This is right direction.

With button, just add a hyperlink in Text Block, we can use CSS code to turn it to button

You can add text block first, then share link to page where you added it, we can give code

Fantastic, thank you 🙂

This is our 'under construction' page with the text block at the top: https://www.meditateinthewestmidlands.co.uk/home-2

By the way, I replied to your email before seeing this message, so please disregard the email, thank you.

On 10/29/2023 at 1:09 AM, tuanphan said:

Add to Website Tools (under Not Linked) > Custom CSS

div#block-yui_3_17_2_1_1698166647126_15157 {
    border-left: 2px solid #dccb9e;
}
div#block-yui_3_17_2_1_1698166647126_15157 a {
    background-color: #798985;
    color: #dccbce;
    text-decoration: none !important;
    padding: 10px 20px;
    border-radius: 20px;
}

 

This is wonderful, thank you! There is one thing that needs modifying if you can help further though please - I removed the 'block background' from the text block as the padding at the top and the bottom of the block made the left border too long. The text block does still need padding, but just on the left hand side, in order to make the line set back from the text a bit - is there code we can add to create this?

Many thanks 🙂

52 minutes ago, Khechog said:

This is wonderful, thank you! There is one thing that needs modifying if you can help further though please - I removed the 'block background' from the text block as the padding at the top and the bottom of the block made the left border too long. The text block does still need padding, but just on the left hand side, in order to make the line set back from the text a bit - is there code we can add to create this?

Many thanks 🙂

Hi - no need to reply to this one - I found the answer in a reply you gave to someone else on this site. I added: 

padding-left: 30px !important;

to the first section of code you gave me.

Thank you once again 😄 Maybe there's a link where I could donate to your library project?

You're welcome. If you have any other questions to this problem, just comment here

If you are in Vietnam, you can donate books