Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How do I add a border around text box?


Hickory
Go to solution Solved by Challenger2,

Question

I would like to add a border around some of my text boxes. how can this be done and is there a custom css code for this? I have tried using the markdown block and adding some css coding but for the life of me I can't get the banner to appear. However I am new with css, so if anyone has a code that would do the trick please help me out.

Edited by Hickory
Initial Revision
Link to post
  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

11 answers to this question

Recommended Posts

  • 0

Hi @Hickory.

Use a markdown, not a text box. In the markdown use code like this:


<div class="boxBorder">
Your text here...
</div>

Then in the custom css use the following code, adjusting the values for size and colour as you wish:


.boxBorder {
     border: 2px solid #990066;
     padding: 10px;
     outline: #990066 solid 5px;
     outline-offset: 5px;
   }

Hope this works for you.

Link to post
  • 0

Hi again @Hickory,

Markdown uses standard HTML, so to add an extra space, use

&nbsp

as in the following example:


     <body>
       Your`&nbsp`text`&nbsp`here
    </body>

Don't use the quote marks, and put a ';' after each (I couldn't get this system to just let me type that!) You can put as many in sequence as you like, each adds a 'non (line) breaking space'.

Centreing is just as easy. Use the style "text-align: center" as follows in any tag (note US spelling of 'center'):


<div style="text-align:center">This text will be centred.
<p>So will this paragraph.</p></div>

Or


<p style="text-align:center">This line will be centred.<br>
And so will this line.</p>

Let me know how you get on.

Edited by Challenger2
Link to post
  • 0

Thanks for this information. Does anyone know how to achieve this effect entirely from within a code or markdown block? The reason for this is that I would like to be able to change the border colours each time I use it, so having the code in the custom css isn't suitable.

Thanks in advance!

Link to post
  • 0

Thanks for this information. Does anyone know how to achieve this effect entirely from within a code or markdown block? The reason for this is that I would like to be able to change the border colours each time I use it, so having the code in the custom css isn't suitable.

Thanks in advance!

Link to post
  • 0

The best way is to add CSS for each box and name them accordingly. For example, instead of boxBorder, you could have


.boxBorderBlue {
 the blue styles go here
}
.boxBorderGreen {
 the green styles go here
}

Then in each Code Block, use

<div class="boxBorderBlue">

or

<div class="boxBorderGreen">

to get the effect you want.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company helping Squarespace users by building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, and Datepicker Extension or book a Squarespace Expert for 1:1 help. Note that links in my posts may be affiliate links.

Link to post
  • 0

Hi there,

Does anyone know how I would fill the text box with color? Additionally, how do I change the color of the linked text if I were to link it? Thanks in advance for any help!

Link to post
  • 0
12 hours ago, pdbstl said:

Hi there,

Does anyone know how I would fill the text box with color? Additionally, how do I change the color of the linked text if I were to link it? Thanks in advance for any help!

If you share link to text box on your site. I can take a look

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0

Can someone help me on getting rounded corner borders on 'Our Special Area's for me?

I have tried all sorts of bits but I can't seem to marry up the code within markup box and custom css box.

I would also like to know how I can include the header within the box and make it <h2> - I can't seem to do this either.

website - https://gecko-plantain-cstw.squarespace.com/#/what-we-do

password - handmademedia2020

Thanks 🙂

 

 

Link to post
  • 0

Update - I've done the rounded borders but I don't understand how to keep the header within the rounded border box? If i place the ## Header within the {} it doesn't work at all and just shows as normal text.

Help please - thank you 🙂

Link to post
  • 0

 

On 10/15/2020 at 3:36 AM, tuesdayroo said:

Update - I've done the rounded borders but I don't understand how to keep the header within the rounded border box? If i place the ## Header within the {} it doesn't work at all and just shows as normal text.

Help please - thank you 🙂

Use this

header.Header {
    border: 2px solid #990066;
    padding: 10px;
    outline: #990066 solid 5px;
    outline-offset: 5px;
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...