HTML help

  • 1
  • Question
  • Updated 8 years ago
  • Answered
All the HTML codes I've tried have worked. However, they dont work
with my existing texts/widgets etc. For example, I used the code to insert
a vertical rule. Instead of getting a line where I want it, I got the line beside
a brand new widget. How do I get the line/border/color or whatever, to
appear where I want it?
Photo of Comfort

Comfort

  • 17 Posts
  • 0 Reply Likes
  • confused

Posted 8 years ago

  • 1
Photo of jeremy

jeremy, Employee

  • 1349 Posts
  • 90 Reply Likes
Hello there Comfort,

Are you adding the code in an HTML widget?

You can use the "Properties" tab on the Sidebar (to the right of the screen) to move your widgets - you can left, center or right align your widgets. Add numbers into the boxes to move the widgets to the left or right, or up or down. It make take some experimenting to get the result you are after.

I hope this helps.
Photo of Drummer

Drummer

  • 153 Posts
  • 1 Reply Like
You can always edit the HTML.
Photo of Comfort

Comfort

  • 17 Posts
  • 0 Reply Likes
Hi, for example, I have a 3-column page. I would like to separate the columns
with a vertical line or border. I guess what I'm asking is where do I place the
cursor in order to get the lines/borders between each column using this code
.

I've also used HTML codes to add colors, but what happens is I get a new
widget suddenly appearing with the color around it. I dont want a new widget,
I want the color to be used with the existing widget that I already have.
I hope I haven't confused you.
Photo of Drummer

Drummer

  • 153 Posts
  • 1 Reply Like
I don't know the answer to that one!
Photo of Comfort

Comfort

  • 17 Posts
  • 0 Reply Likes
OK, I'll try again! I have 3 columns floating into each other.
I want them separated by a vertical line or vertical border.
How do I do this?
Photo of Margie

Margie

  • 286 Posts
  • 25 Reply Likes
Hi Comfort,
You can use html in each column (html widget) to define a left and/or right border. You can set the color, style, thickness, etc. You may find this link, http://www.yourhtmlsource.com/stylesh..., helpful.
Photo of Comfort

Comfort

  • 17 Posts
  • 0 Reply Likes
I'm ready to give up, and I dont understand that above link. I have this:

Column 1 Column 2 Column 3

I WANT

Column 1 | Column 2 | Column 3

What code do I use to get those lines surrounding column2?
Photo of Keara

Keara

  • 325 Posts
  • 14 Reply Likes
That's a great question, and I hope someone will reply!

For myself, I must add that I often find it easier to do the HTML code myself rather than use a widget. The widgets are designed to make things easier -- but to me they often seem to make them harder.

So, please, how does one make a vertical rule? and how can Comfort place vertical rules between her columns??
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
Hi Comfort,
Do you mean something like this: Link
Photo of Comfort

Comfort

  • 17 Posts
  • 0 Reply Likes
Thank you Keara for your support. And thanks to you Grace, finally someone
understands what I'm talking about. You link you provide is exactly what
I'm looking for. Thanks. How do I do it?
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
This was done on a three column layout.
To do this you need this code:

<!--

<style type="text/css">
<!--
.borders { border-right-color: red; border-left-color: blue;
border-left-style: solid; border-right-style: solid;
border-right-width: 1px; border-left-width: 1px;
padding-right: 6px; padding-left: 6px;}
-->

-->

* erase <!-- and -->, but not the ones between <!--<style> and </style>-->

Copy the code and place it either in a text or html widget. Next to apply all you need is to add "borders".
Ex. -
<!--
<p class=borders>...</p>
<div class=borders>...</div>
<table class=borders>...
<th class=borders>...
<td class=borders>...
-->

Customize the ones marked with "..."
- to change colors:
border-right-color: "red"

- to change style:
(solid, dash, etc.)
border-left-style: "solid"

- to change size:
border-right-width: "1px"

- to change padding or space
padding-right: "6px"
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Grace for your help on this!
Photo of Comfort

Comfort

  • 17 Posts
  • 0 Reply Likes
I appreciate the help but I only want the borders to the immediate left and
right of column 2. However I still dont know where to place the codes.

So here's what I did. I copied the first code Grace forwarded then I clicked HTML and pasted
it there. What I got was a new text box. Then I copied the second part of the code
and this time I got another new text box with the 3 tiny column borders in it. My
original 3 text boxes are still without borders.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
css is very sensitive with yola since we don't have access to placing css in the head of the document, browsers may incorrectly interpret the css we place into yola. This works just fine...

<!--

<p style="border-right: 1px solid red; border-left: 1px solid red;">Text and Content</p>

-->

remove the <!-- and -->

This should be placed in the center column's text widget that your comment will also be placed in.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
if you have one of the 12 "name" colors (red, black, blue, etc.) you can replace "red" with that color's name, if you want a unique uncommon color name, the recommended method is hex rather than rgb. use hex, red==#ff0000, etc. rgb works too though, you would replace red with rgb(255, 0, 0) and change the numbers according to what you want.
Photo of Comfort

Comfort

  • 17 Posts
  • 0 Reply Likes
I pasted Donald's code in the center column's text widget. What do I do next to apply it?
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
it should already be applied! Did you type in text or add content? The border will be based on your content, you have to have content to see the border. When I did it in yola, it worked perfectly.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
Be careful of Yola's strange way of adding code...

when you use the enter button to go to a new paragraph, it'll break your border. Because of this, avoid doing that, use the code I gave you above, when you need to start a new line, go to the last character of that line in the html and use the <!-- <br /> --> tag.

http://sitebuilder.yola.com/sites/D7d...

You may wish to consider adding padding to move text away from the border some...

<!-- <p style="border-right: 1px solid red; border-left: 1px solid red; padding-right:6px; padding-left:6px;">Text and Content</p> -->

As you can see from the above preview, it is a working code. I hope you're able to figure it out and apply it properly.

Remember, this code can be in either html or text widget, but if you will be formatting a lot of text, a text widget is preferred. Make sure you add the code to the HTML of a text widget.
Photo of Comfort

Comfort

  • 17 Posts
  • 0 Reply Likes
This link is exactly what I want (http://sitebuilder.yola.com/sites/D7d...) but
I'm just too clueless with this stuff. Here's my url:
http://seoextra.yolasite.com/
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I'm sorry but your 1st URL link did not work.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
maybe she's referring to mine above?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Comfort

I hope I am not further confusing you here but I have a possible code that may work for you. Here's my example: http://rumballchick.yolasite.com/column

Drag over an HTML Widget and paste in the following code:

<!--<style type="text/css">

body {
margin: 0px;
padding: 0px;
}

div#left {
float: left;
width: 250px;
border-right: 1px solid black;
height: 300px;
padding-left: 10px;
}
div#right {
float: right;
width: 250px;
border-left: 1px solid black;
height: 300px;
padding-left: 10px;
}
div#middle {
padding: 0px 260px 5px 260px;
margin: 10px;
}
</style>-->

Drag over a Text Widget and paste in the following code:
<!--<div id="left">
<span style="color: rgb(0, 0, 0);">Port side text...
</span></div>
<div style="color: rgb(0, 0, 0);" id="right">
Starboard side text...
</div>
<div style="color: rgb(0, 0, 0);" id="middle">
Middle column text...
</div>-->

Please let me know if you have any trouble with this or if you need any tweaks to be done.
Photo of Keara

Keara

  • 325 Posts
  • 14 Reply Likes
Comfort, you now have two great options - Donald's HTML or Sanja's CSS. If you're still awake, I would like to make a personal recommendation to you -- go to bed for now. :-) You've been working at this for a while, I think, and you probably need to step away from the computer for a while. When you come back, you will probably see the solution right away. Donald's code seems to be very good, and I bet that if you are fresh, you will be able to make it work in no time. If for any reason it doesn't work, you still have Sanja's CSS as a very good alternative. Don't despair -- you're very close to a solution, I'm sure!
Photo of Comfort

Comfort

  • 17 Posts
  • 0 Reply Likes
Keara, you're just awesome. Anyway, I haven't given up.

How come Sanja said my url didn't work. I just tried it-it works. http://seoextra.yolasite.com/
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
she was referring to the site preview url in your reply above
Photo of Comfort

Comfort

  • 17 Posts
  • 0 Reply Likes
Keara, you're just awesome. How come Sanja said my url didn't work. I just tried it-it works. http://seoextra.yolasite.com I did exactly what she said a I still get no result. What I get are 2 new text boxes with the codes in it. I'm not sure what I'm doing wrong. Where exactly do I drag the HTLM widget? Inside column 2 or somewhere else? Also, how do I delete the existing code that is in column 2?
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
Comfort, this is a very simple fix, sorry you're frustrated, time to un-frustrate.

Click into your text widget where you put your code. Now look in the tool bar, same place where you can find Bold, Italics, etc.... you'll also see up there an option that says "HTML"... click that.... a box (html editor) will popup... delete everything from there and insert the code I gave you above. then click ok... this will add the border as I have.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Comfort

The URL I was referring to was this: http://sitebuilder.yola.com/sites/D7d...

When adding your code to the Text Widget, you need to click on the HTML button on your Text Editing Toolbar.

If you would like further assistance with this, I'd be happy to help you. Can you please email support@yola.com.
Photo of Comfort

Comfort

  • 17 Posts
  • 0 Reply Likes
OK, I'm getting there. I used Donald's code which worked well
<!--

<p style="border-right: 1px solid red; border-left: 1px solid red;">Text and Content</p>

-->

The only thing is the border is as high as the word next to it. How do I get it down the entire length of the page?
Photo of Keara

Keara

  • 325 Posts
  • 14 Reply Likes
Comfort, I'm glad things are looking up. :-) I'm not sure what the solution to your current question is but here is what I would try -- fill up the space with <!-- &nsp; &nsp;   --> (over and over again) until the line is as long as you want it to be. (Leave out the <!-- and the -->, of course.)

The line that Donald has suggested is actually a border for the otherwise-invisible "box" that your text is in. Therefore you need to fill in more "text". You could put in actual text, if that is appropriate. Otherwise, I would try the HTML spaces (the code I suggested).

But someone else will probably have a more elegant solution. :-)
Photo of Keara

Keara

  • 325 Posts
  • 14 Reply Likes
You could also try adding <!-- &nsp; <br> &nsp;<br> &nsp; <br> --> for as many lines as you need.

On edit: Apparently Get Satisfaction executes some code even when it's placed within quotes. So: when I write "&nsp;" you have o add a "b" between the n and the s to get the HTML code for a single space. What I had in mind here is to add alternating single-spaces and linebreaks. You could, I hope, fill up your box with those, and the borders (the verticle lines) would extend further down the page.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
testing...

<!--

  <br />

-->
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
testing...

<!--

  <br />

-->