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 13
  • 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.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.