Using customized text, box borders.

  • 1
  • Question
  • Updated 7 years ago
  • Answered
This is pretty much for Boomer since he built the code for my textboxes. But, if someone else knows the answer, you are so welcome to let me know. It appears that in my site-builder, I can't type the text directly into the text boxes, my wood-grain ones(fromheretoeden.com). This is ok as I understand if there is no way to do that. So the only way I know at this point, is to click on edit and to my text within the widgets "html" area. Also, I wanted to know if I can somehow paste an album/image or something other than text in these boxes boomer? I notice you have it that way on your site and I don't like having people "literally" building my site for me so I would rather have the source of your information so that I can study it and learn "how to" without always asking.

One thing I get confused about is what types of codes can I import to the sitebuilder. Can I use any CSS, dhtml, xhtml, html etc? Is there a place that tells us what types of files and codes we can use here in our widgets? Probably I have just overlooked it and I just have bad luck when trying to work in the codesite or the testsite I should say. Viewing the codesite is a breeze but after that I get totally confused.

Thank you in advance to anyone who can help explain or point me in the right direction;) denise
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
  • hopeful I will know this stuff one day soon;)

Posted 9 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Denise

1. If you added your text boxes through the HTML on the text box toolbar, then you should be able to type directly inside your text box.

However, if you added your text box through the HTML widget, then you will need to click on "edit" (located on the upper-left corner of the HTML box), and type in your text there.

It's definitely easier to do this through your text toolbar and also allows for you to format the text as you wish.

2. If you want to add a photo to your text box, then you can add an img src tag in the HTML. It would look like this:
<div style="margin:0px;width:400px;height:150px;border:solid 1px #C18551;background:#FFFFFF;padding:10px;"><font size="2" face="verdana" color="#000000"><img src="YOUR IMAGE URL GOES HERE"></div>

You can also embed slideshows, etc... (You can see an example of this on my site: http://littleus.yolasite.com). Just replace the img src tag with the HTML for your slideshow.

3. The Yola Code site - I'm sorry that you're continuing to have problems using it. I'm not sure what I can do to make it more clear for you to use it. Basically the Yola Code site is there for you to see what codes are available. Say you want a slideshow. Then, you can see what kind of slideshows the Yola code site has available. So, you go to "Slideshows" and you'll see a few different ones such as Ultimate Fade-in, Advanced Gallery, Image Swap. If you see one that you like, keep the name in mind. (Let's use Ultimate Fade-in).

Now.. you go to the Yola Test Site. There you'll see a chat box - it's not really for chatting but as a place for you to log in so that you can retrieve the code for the Ultimate Fade-In slideshow. If you see someone already logged in (it will say the person name and "log in"), then you will need to wait your turn. Otherwise, if you see that the last person has "logged off", then you can put in your name or the guest name and type "log in".

Then, you go to www.yola.com (just as you would for your very own site to get access to your site builder). Instead of typing in your name, type in the username and password as given in the rules of the Yola code site. Once there, you'll see a whole bunch of sites.

Using our Ultimate Fade-in Slideshow as an example, enter the site called "Slideshows". Then, go to the page that contains the "Ultimate Fade-In" slideshow codes. There are instructions there. Copy each of the HTML boxes and put on your site. Once you've completed copying all the codes, then you can go back to the chat box, and log off so that others know it's available to use.
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Couple things, to just be sure little. You said "text box Toolbar" and I am not sure what this means. 2nd, when you say enter it into that rather then an html widget, do I put in the text box widget and then drag in an html widget inside that or the other way around? Neither way seems to work? I am trying it now and I still can't type in text "and" keep my borders? Ty much, denise
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
OHhhhhhhhhhhhhhhh, I think I have it. It's up in the top of the "text widget" that toolbar. That is where you mean to get the html in there. I'm sure I have it now little, so sorry, denise
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Ohhhhhhhhhhhh, littleus, I am so sorry, I forgot the "go to www.yola.com site" step. Truly sorry, I will try again, thank you for all the info above. You must get so tired of answering questions over and over that you already covered. Please forgive me. I will be more careful with reading and applying instructions, I promise, denise
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
I so wish I had a printer but what I usually do is put your instructions or anyone's, in a notepad doc for future reference. Thing is, I need to read them, LOL!! Denise
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I copy everything to Notepad as well and keep all these codes or instructions in a nice little folder on my desktop. =)
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
I will do this also little, great, handy idea;) denise
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
No worries at all Denise. I'm just sorry that it has been a frustrating process for you. Hopefully, it'll go much more smoothly. Always feel free to ask questions. However, if you have problem regarding one of the codes on the Yola Code site, it would be best to email the site moderator so that we can free up the forum for other topics. Thanks Denise! =)
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Ok, no problem on codes if I need further assistance;) Also, I am seeing what others meant when they said starting out in a text widget is better because you can edit easier, that is right I think?? Hope so, going to arrange my content into Text boxes for that purpose. Even my slideshow as I think that is what you were talking about above;) ty ty, denise
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hey Denise

Let me clarify here....

If you are using text as your content, then it's better to use your text box widget as it allows you easy access to formatting your text via the text toolbar.

However, for complex codes such as your slideshow, it should be added to an HTML widget.
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Ok, that does make better sense. Thank you for clarifying as I was ready to put everything in text boxes, LOLLLLLLLL!!!!
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Heyyyyyyyyyy, I got it!!! I got my textboxes so I can edit right in them!!! ty ty littleus, I am getting the hang of this;) Thanks so much for being so patient:) Denise
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
LOL.. I love your enthusiasm and determination! You go girl! =D
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
I know I am certainly full of it sometime, LOLLLLLLL!!!! Denise:)
Photo of Casey

Casey

  • 4 Posts
  • 0 Reply Likes
So waht if I just wanted to do a text box with a boarder? without a picture?
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hi Casey,

You can add a border to text in a Text Widget by using a bit of HTML code. Here's how:

1. Drag a Text Widget onto the page.
2. Click on the "HTML" button located on the Text Editing 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 customize the size, color, border, etc. to make exactly what you want!