How can i add border around my text?

  • Question
  • Updated 1 year ago
  • Answered
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members. The community moderator provided the following reason for archiving: out-dated

I want to divide my text in boxes, just like its done here http://thaicookinghouse.com/..
is there any way to do it? some HTML will also do for me
Photo of Green Girl

Green Girl

  • 531 Posts
  • 12 Likes
  • in a modd of BOXing

Posted 7 years ago

  • 2
Photo of Kershnee

Kershnee

  • 2087 Posts
  • 152 Likes
Hi Monica,

The person who created http://thaicookinghouse.com/ used custom HTML. If you use the email address on that site you can email her and ask her how she did it. She said we could refer people to her who had questions about how she did the site. Just note that it might take her a while to answer you, as she has been getting a lot of emails about her website!

Also, here is a link to an article that will tell you how to put borders around your text boxes: http://www.mandarindesign.com/boxes.html or http://www.bigbaer.com/css_tutorials/

Hope this helps....

Regards,
Kershnee
Photo of Sohail

Sohail

  • 26 Posts
  • 1 Like
hello every body! border around text can be created very easily. go to this link and learn how to do this. the link is http://forums.synthasite.com/tables-i...
Photo of Maria Clough

Maria Clough

  • 1 Post
  • 0 Likes
You can just view the source code on that site. By clicking file and view source
Photo of Quicktorials Quicktippers

Quicktorials Quicktippers

  • 1 Post
  • 0 Likes
This website has what you are looking for I believe!!!
http://www.quicktorials.org/2013/03/a...
Photo of Niddy

Niddy

  • 67 Posts
  • 5 Likes
Hi Monica,

Drag and drop HTML or text widget on to a test page. Copy and paste the code on the HTML editor. Remove "<!--" and "-->. Preview the page and you will see different samples of borders. These sample are basic border with inline CSS, if you want more better look, it can be done.

<!--

<div style="border: 1px solid ;">Example 1</div><br><br>
<div style="border: 2px solid red;">Example 2</div><br><br>
<div style="border: 3px dotted gray;">Example 3</div><br><br>
<div style="border: 4px dashed green;">Example 4</div><br><br>
<div style="border: 1px double ;">Example 5</div><br><br>
<div style="border: 1px groove ;">Example 6</div><br><br>
<div style="border: 1px ridge ;">Example 7</div><br><br>
<div style="border: 10px inset ;">Example 8</div><br><br>
<div style="border: 10px outset ;">Example 9</div><br><br>
<div style="border-left: 10px solid;">Left border only</div><br><br>
<div style="border-right: 10px solid;">Right border only</div><br><br>
<div style="border-top: 10px dashed blue;">Top border only</div><br><br>
<div style="border-bottom: 10px dotted pink;">Bottom border only</div><br><br>

-->

Hope this help. Let me know if you have any questions.

Niddy
Photo of PPNP

PPN

  • 1 Post
  • 0 Likes
Niddy Thanks for highly useful HTML for the person like me who have '0' knowlege about HTML. Hats off for u. www.worthwebway.com
Photo of Casey

Casey

  • 2 Posts
  • 0 Likes
All I can say is thank you thank you thank you, Niddy! Your willingness to help others is displayed on my front page! www.meowspace.biz
Photo of Gop

Gop

  • 7154 Posts
  • 2012 Likes
but yours un-camouflaged SPAM Casey.
Photo of Casey

Casey

  • 2 Posts
  • 0 Likes
Man, not intended! If I can figure out how to edit I'll pull my URL off of my comment. I was going nuts trying to find a way to box in the wording and banner together for our Halloween ad, and after several hours at it almost gave up. Then I found this site. Can someone help me edit off my URL?
Photo of Abner CozyAC

Abner Cozy

  • 1 Post
  • 0 Likes
Thank bless
Photo of Niddy

Niddy

  • 67 Posts
  • 5 Likes
Hi Monica,

You can play around with the border styles which are solid, dotted, dashed, double, groove, ridge, inset, and outset.

To determine the thickness of the border, just change the number right before "px".

Thanks

Niddy
Photo of Niddy

Niddy

  • 67 Posts
  • 5 Likes
I'm sorry I forgot to mention about color.

If you have custom color and know hexadecimal value, then just replace it.

for example of maroon color:

<!--
<div style="border: 4px dashed #800000;">Example 4</div><br><br>
-->

Thanks

Niddy
Photo of Green Girl

Green Girl

  • 531 Posts
  • 12 Likes
Wow niddy, thanks alot. Your posts are a great help.
Kershnee, thanks alot for the links :-)
Photo of Monique

Monique, VP of Customer Support

  • 6264 Posts
  • 440 Likes
I am going to want to see this website of yours, Monica! Sounds like it is going to be awesome!
Photo of Green Girl

Green Girl

  • 531 Posts
  • 12 Likes
I just wish i can complete it soon, creating 60+ pages is a real hardwork :(
Photo of

  • 30 Posts
  • 0 Likes
How can Add different styles and sizes of text insdoes the borders Niddy outlined above?
Photo of

  • 51 Posts
  • 0 Likes
Hi, I have the same question - anyone know the answer?
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2590 Posts
  • 277 Likes
Hi Shazzy

If you go to this page I set up you will find many examples of adding a border to a table. If you find one you like then follow the link and you will see exactly how to add them to your website and edit the code to include a font you like. Keep in mind that I would only use the fonts that Synthasite lists in their site editor...

http://texttest.synthasite.com/

Good luck and good site building.

Ed

P.S. In the code where it says "Arial" just insert the font you would like to use.
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2590 Posts
  • 277 Likes
Here are the safe ones to use...

Arial
Times New Roman
Verdana
Georgia
Comic Sans Serif
Trebuchet
Courier New

Courier New
Photo of

  • 51 Posts
  • 0 Likes
Thank you Ed. You are a star. ;o) just one question that I couldn't fathom out - is it possible to change the font colour? I couldn't see where it goes if I did want to change it. Shazzy
Photo of gamedemon

gamedemon

  • 216 Posts
  • 22 Likes
there should be a widget for tables and borders. sites would look so much more organized if everyone used borders. it would certainly make my life easier. i always have to design everything in my html editor before posting it on synthasite.
Photo of Monique

Monique, VP of Customer Support

  • 6264 Posts
  • 440 Likes
Good point. I will add this one to our feature request list.
Photo of

  • 30 Posts
  • 0 Likes
Your website looks great. You have some nice boxes. Did you do HTML for those green tags on the categories you have listed on your home page? How do you like Free Forums.org?

Thank you
Photo of

  • 30 Posts
  • 0 Likes
Do you know of any widgets that have borders? What websites have you created with Synthasite?
Photo of gamedemon

gamedemon

  • 216 Posts
  • 22 Likes
my current project is http://gamedemonarcade.com. hopefully synthasite will have borders someday. monique put it on the list
Photo of

  • 1 Post
  • 0 Likes
how can i make it a text link?
Photo of annoyer707

annoyer707

  • 294 Posts
  • 7 Likes
dear naskelis88,

simply highlight the text then click the insert link button then choose the destination
Photo of Ruth

Ruth

  • 2825 Posts
  • 134 Likes
Hi naskelis88,

Here's how to add links to your page:
1. Drag and drop a text widget onto your page.
2. In the text widget type the words that you want people to click on (this is your link text)
3. Highlight the link text and then click on the link button (it's the 10th button from the left in the text editing tool bar, and looks like the link in a chain)
4. A link editor dialogue box will open up and you will be given 4 options. You can link to an email address, an external URL, a page on your own site or a file on your computer.
5. Click on the option appropriate for you.
6. Then type the URL or address of the site that you want to link TO in the appropriate box and click on OK.

You will then have a link on your page. To check that your link is working preview your page and then click on the link.
Photo of gamedemon

gamedemon

  • 216 Posts
  • 22 Likes
hi todd,

the green tags are actually a 468x60 banner that i think i found here: http://resources.bravenet.com/clipart.... I downloaded the banner, and then uploaded it to photobucket where i made it smaller and put writing on it. i saved a blank copy so i could make as many as i want. i was really thinking out of the box that day. i just saw the banner and thought it would make my page more colorful.

i use my old host 110mb.com to make the tables on my site. it is all html, thats why i moved to synthasite. 110mb has an html editor which lets you create tables and fonts and stuff like that, but all in html. so if i ever need to make a border, i make it at 110mb and then copy and paste the html into an html widget on synthasite.

this is a little off topic, but maybe synthasite should have a small html editor built in it so that more experienced users, as well as anyone willing to learn, can use it to make their sites better without depending on those widgets which, i certainly, barely use. believe it or not, but the pages on my site that contain the games, all 200+ of them, is all an html template that i designed myself using tables (i set the border to 0 so you can't see them). the template takes up 10 pages on a word document
Photo of Monique

Monique, VP of Customer Support

  • 6264 Posts
  • 440 Likes
Hi gamedemon. SynthaSite does have an HTML editor. You drag and drop the HTML widget from the sidebar on the right onto your page and the HTML editor will then open up. You can use this to add custom HTML to your site. Is this what you had in mind? If not, please let me know.
Photo of gamedemon

gamedemon

  • 216 Posts
  • 22 Likes
i know about the html widget. i'm actually talking about an html editor. here is an advanced example: http://www.coffeecup.com/html-editor/.... (that was just to show you what i mean by html editor). my post above wasn't really a request. i was explaining how i think it would be interesting if there was a way to manipulate the html within synthasite. for example: adding borders; adding text boxes and scroll boxes; changing the color, text and font of a paragraph that might be in the html; etc... features similar to what you would see in a standard html editor. like i said, this is not a request. i don't really think most people would use it. but i felt it was worth mentioning
Photo of

  • 1 Post
  • 0 Likes
Oh yes I would love to have an HTML editor to add borders and text boxes
Photo of Green Girl

Green Girl

  • 531 Posts
  • 12 Likes
Can anybody give me a code/tutorial/instructions on how to make the some text, with links, having a background colour(/texture) with heading(also with background and link)

I dont think i have put it in words very well, so i have made a model picture of what i want, have a look
Photo of Niddy

Niddy

  • 67 Posts
  • 5 Likes
Hi Monica,

Hope this will help you.

<!-- <style type="text/css">
.beauty_tips {
background-color: pink;
}

.beauty_tips .title {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1em;
letter-spacing: 0.5px;
color: #ffffff;
border-bottom: 1px solid red;
background-color: red;
}

.beauty_tips .desc {
font-size: 12x;
display: block;
}

.beauty_tips .desc a {
text-decoration: none;
color: orange;
}

.beauty_tips .desc a:hover {
text-decoration: underline;
color: orange;
}

.beauty_tips a {
text-decoration: underline;
color: green;
}

.beauty_tips a:hover {
text-decoration: none;
color: green;
}
</style>

<div class="beauty_tips">
<p class="title">HEADING</p>

<p class="desc"><a href="#">LINK 1 - no underline</a></p>

<a href="#">LINK 2 - with underline</a>
</div> -->

Remove "<!--" and "-->" at the beginning and at the end. Change the font size and color to the one you like. Place the css script at the every beginning of your page.

Niddy
Photo of Green Girl

Green Girl

  • 531 Posts
  • 12 Likes
Thanks alot Niddy.. I will surely give it a try. Thanks once again :)
Photo of clouda9

clouda9

  • 323 Posts
  • 3 Likes
Niddy you are sooo cool! I appreciate your shares whenever I happen upon them.
Photo of Robert

Robert

  • 31 Posts
  • 1 Like
Thanks a lot Niddy! Your HTML lessons are a great help to a lot of us here!
Photo of

  • 2 Posts
  • 0 Likes
hello..
every one can help me
bcouz i saw some people using friendster
i saw their comment using border with inserted text,links and animated pictures..
how can do that??
anyone can help me about it?
Photo of Ruth

Ruth

  • 2825 Posts
  • 134 Likes
Does the information in the thread above this answer your question?
Photo of

  • 2 Posts
  • 0 Likes
no...
its not working in friendster,
the code does not working when i give comment to my friends..
how can i do the table comment,with background,text,links and inserted animated pictures??
can you help me??
Photo of Marije

Marije, Official Rep

  • 4636 Posts
  • 234 Likes
Hi joeanne - I'm not sure what you mean by not working in friendster - this is SynthaSite, not friendster! You can find information on adding comments on this thread: http://getsatisfaction.com/SynthaSite...
Photo of Sohail

Sohail

  • 26 Posts
  • 1 Like
hello every body! border around text can be created very easily. go to this link and learn how to do this. the link is http://forums.synthasite.com/tables-i...
Photo of Railz Lakhani

Railz Lakhani

  • 1 Post
  • 0 Likes
Photo of Sanja

Sanja, Official Rep

  • 10590 Posts
  • 477 Likes
Thanks for sharing these links! I'm sure people will find them useful.
Photo of Vishwa KumarageVK

Vishwa Kumarage

  • 1 Post
  • 0 Likes
I don't understand how do you make a border that doesn't go
to the WHOLE line of the page
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4179 Posts
  • 164 Likes
Hi Vishwa,

I'm sorry but I don't understand what you are asking. Can you please direct me to an example of what you are referring to or try explaining it in more detail?
Photo of Stefan

Stefan, Official Rep

  • 4338 Posts
  • 168 Likes
Hello Vishwa

This thread is extremely old and out-dated. To add a line around your text, you can now put a Text Widget on top of a Custom Panel Widget and edit the Custom Panel Widget accordingly. This may resolve the issue you were talking about above.

If you have any questions on how to do that, please let us know. Please create a new topic to post your question. Thanks.

This conversation is no longer open for comments or replies.