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

  • 2
  • Question
  • Updated 11 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 11 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 Ruth

Ruth

  • 2819 Posts
  • 135 Reply Likes
Thanks Peter
Photo of Alucard

Alucard

  • 26 Posts
  • 0 Reply Likes
Peter,

This is exactly what I wanted, I had been looking for this code and was going nuts! Thanks, just one more, how do I change the color?

Thanks again,

Steven Lee
www.SS420.com
Photo of Alucard

Alucard

  • 26 Posts
  • 0 Reply Likes
Peter,

Is there a way to do a vertical line? For example www.SS420.com where the main picture in the middle is I would like to put a color border on each side of it to separate it from the column on the right and the left.

Please let me know!

Thanks!

Steven Lee
SS420.com
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
This is the code I have for a vertical line:

<!--<div style="background:transparent; border-top:1px solid #666142; width:900px;"></div> -->
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Hello Steven,

The code for a vertical simple line is:

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

The width can range from 1 pixel up
The length (height) has to be determined in pixels and is easiest to try a few lengths and work your way to an accurate length.
The colour is up to you and you can add hex codes rather than simple colour words if you wish to fine tune this as well. Until recently you didn't have to wrap the stattement in div tags but now you must do this otherwise it won't work. This coding I have given you is ready to go.

Good luck Steven
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

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