Does anyone know how to get borders around the text/picture boxes?

  • 2
  • Question
  • Updated 10 years ago
  • Answered
Does anyone know how to add borders to text/picture boxes? Like a solid colored line underneath or above the two column/one column layout? Please let me know. thanks!
Photo of Alucard

Alucard

  • 26 Posts
  • 0 Reply Likes
  • waiting

Posted 10 years ago

  • 2
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
There are a few ways of doing this Alucard. Some are more appropriate to certain applications.

Simply to put a horizontal line in then you can drop an HTML widget where you would like to see your line and enter:
<!--
<hr>
-->
This will run a default colour line across the total width of your available space. You can add more attirbutes such as line width, colour, line length.

A note on the HTML code above.

*The <!-- and --> aren't included in the code to add just the code between those. This prevents GS from trying to read the code.

There are also ways of putting image and text within a four sided border with many ways to adjust it's appearance.
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
The code that Littleus has given you is for a horizontal line and in that you can see the code for a colour change. The colour is determined by the hex code ie #xxxxxx. You can refer to any number of colour charts to select the colour you wish.

Here's one with some extra bits of information as well. You may like to keep it bookmarked.

http://www.2createawebsite.com/build/...
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Ooops... I put down the wrong code! Thanks Peter for catching that!! I meant to put down the one that Peter suggested.
Photo of Alucard

Alucard

  • 26 Posts
  • 0 Reply Likes
Hi guys, sorry I still haven't found how to make a vertical line and was hoping that you guys can help me find it.

Thanks!
Photo of Crewcaptain

Crewcaptain

  • 12 Posts
  • 0 Reply Likes
<!--<div style="width:2px; height:500px; background-color: black"></div>
-->
Photo of Sohail

Sohail

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

Ruth

  • 2819 Posts
  • 135 Reply Likes
Alucard,

You may also wish to look at this thread: http://getsatisfaction.com/yola/topic...

which has a link to some tutorials on adding borders.
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
You beat me to it Ruth I was gonna post that link but got caught up with making an Easter card... Thanks for reading my mind... ;)
Photo of Ruth

Ruth

  • 2819 Posts
  • 135 Reply Likes
Grateful to have your excellent tutorials to link to Ed-a-torials...
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
PS: The little red mouse trail follower works really well on your site :)
Photo of Alucard

Alucard

  • 26 Posts
  • 0 Reply Likes
Thanks Peter!
Photo of mred1220

mred1220

  • 59 Posts
  • 3 Reply Likes
lol Dracula...sry lol, just had to say I noticed
Photo of Alucard

Alucard

  • 26 Posts
  • 0 Reply Likes
LOL :)
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Hi Steven the answer to your question is:

<!--
<div style="width:2px; height:500px; background-color: black"></div>
-->

You can change the width of the line, the height of the line and the colour of the line.

Good luck.
Photo of mred1220

mred1220

  • 59 Posts
  • 3 Reply Likes
you can try this also Change border=0 to border=1

<!--
<A HREF="http://homeandhobbyhelpfulls.synthasi..." title="Unknown Artist"><IMG SRC="http://homeandhobbyhelpfulls.synthasi..." WIDTH=100 HEIGHT=100 ALIGN=center border=0 ALT="get your picture here"></A>
-->

or this

<!--
<TR> <TD><A HREF="http://homeandhobbyhelpfulls.synthasi..." title="Unknown Artist"><IMG SRC="http://homeandhobbyhelpfulls.synthasi..." WIDTH=100 HEIGHT=100 ALIGN=center border=1 ALT="get your picture here"></A></TD> </TR> </table> </div>
-->

get your picture here

or if what you working on looks like this do the same
<!--
<img src="resources/email.gif?timestamp=1234745402365" border="0">
-->



Photo of Sohail

Sohail

  • 26 Posts
  • 1 Reply Like
hello every body! border around text/image can be created very easily. go to this link and learn how to do this. the link is http://forums.yolasite.com/tables-in-...