Jump to content

How do I add a border around text box?

Go to solution Solved by Challenger2,

Recommended Posts

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 comment
  • Replies 15
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

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 comment

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 comment
  • 3 years later...

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 comment

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 comment

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.

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 9 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 7 months later...

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 comment

 

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 10 months later...
On 9/9/2021 at 2:52 PM, GemmaErnst said:

Hi @tuanphan Is there a way to increase the font size within the markdown box? ie, p2?

Use this CSS

.markdown-block * {
	font-size: 20px !important;
}

or use this syntax when adding markdown content code

here is text with <span style="font-size: 20px;">20 pixel text</span> end.

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
On 3/2/2023 at 7:54 PM, AnnaBailey said:

Hi there, 

I've added this code and in preview mode it works but on the actual website it doesn't appear. Could you advise?

Can you share link to page where you use text box?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.