Border around Text

  • 2
  • Question
  • Updated 7 years ago
  • Answered
How can I put a border around my text component ?
Photo of colmfint1

colmfint1

  • 2 Posts
  • 0 Reply Likes
  • unsure

Posted 9 years ago

  • 2
Photo of Kershnee

Kershnee

  • 2087 Posts
  • 152 Reply Likes
Hi there,

You can add a border to text in a text widget by using a bit of html code. Here is how it is done:

1. Drag a text widget onto the page
2. Click on the HTML icon located on the Edit Toolbar
3. Paste in this code
<div style="width:400px;height:211px;border:2px solid red;">This is where your text goes</div>

This specific piece of code is set to have a width of 400px, a height of 211px, a border of 2px and a solid red color. You can change the various attributes to make it whatever size, width and color you would like.
Photo of colmfint1

colmfint1

  • 2 Posts
  • 0 Reply Likes
Hi Kershnee, Thanks but I am a novice at this. I tried to paste in all that code but it does not work for me. Do I copy and paste both lines ?
Photo of Kershnee

Kershnee

  • 2087 Posts
  • 152 Reply Likes
Yes, it can be a bit tricky at times. Here's how to add the code:

Add this code before your text : <div style="width:400px;height:211px;border:2px solid red;">

Now add this code at the end of your text: </div>

So basically your text goes between these pieces of code.

Let me know if you are still having problems with this.
Photo of LindaS

LindaS

  • 1 Post
  • 0 Reply Likes
This code worked for me but then I lost control of the text formating.
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hello Linda,
Can you tell us more about what you mean by "lost control of the text formatting". I'm not exactly sure what you mean by that. If you can let us know some more specifics we can try to help.

Emmy
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi everyone, if you want to make all the text widgets have a border around them, you can also use this:

1. Drag and drop an HTML widget over.

2. Paste this code in:

#Apple-style-span
width:400px;
height:211px;
border:2px solid red;

3. Now, when you add a text widget, it will have a border. But, this might not work that well because the Yola site builder adds in a bunch of spans with the class: "Apple-style-span" and it adds more than one in every single text widget. It is very wierd but it does. So, if you find any problems, you can just delete that HTML widget.
Photo of Becca Dingwell

Becca Dingwell

  • 1 Post
  • 0 Reply Likes
I think what Linda meant was that we then lose the easy way to chose our font, font size, color, etc. after using the HTML code. I'm sure there's MORE code to change it, but for those of us not familiar with HTML we don't know how!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Becca,

If you add the code to the Text Widget, using the HTML button on your Text Editing Toolbar, then you can use the Text Editing Toolbar to format your text!