How can I have a background color AND pictures in the text widget box?

  • 1
  • Question
  • Updated 9 years ago
  • Answered
I want to change the background color in a text box where I would place photos.
I have already tried to use the html code suggested to change the color of the widget but then I cannot load pictures. Do I also need to do this with the code??? If so how do I put in the code for a picture?

I do not know anything about code. Help please.

Forgive me if this has already been answered, I am in infant when it comes to computers. (. . . . maybe still in the fetal stage.)
Photo of Ann  T

Ann T

  • 5 Posts
  • 0 Reply Likes
  • frustrated

Posted 9 years ago

  • 1
Photo of jeremy

jeremy, Employee

  • 1349 Posts
  • 90 Reply Likes
Hello there Ann,

You can do this and yes, you do need to do it using some HTML - but not for the pictures.

First, add the pictures:

1. Drag and drop a Text Widget onto your page.
2. Click "insert picture" on the text editing toolbar (the icon that looks like a green tree in a picture frame, roughly in the middle of the toolbar).
3. The File Manager will open up and allow you to browse for and select a picture, as described above.
4. Using the Text Widget allows you to insert a number of pictures in the same text box. You can add as many pictures in a row as your chosen style will support. Separate each picture by one or two spaces for the best results.

Then add the background HTML.

<div style="border: 2px solid red; width: 400px; height: 211px; background-color: pink;">This is where your text and image tags go</div>

You can click on the little HTML icon on the Edit Toolbar and paste in that code.

I hope this helps.

(Remember: background-color is the color of the background. If you want to be more precise about the color you can replace this with a hex value. For example, if you replace the word "pink" with the hex value:#63B8FF you will get a light blue color block. For a list of hex values see: http://cloford.com/resources/colours/...)
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Great info and great help Jeremy! Glad to see you are still here. Last year I fiddled around "trying" to start a website and people were just wonderful with their help. You were one of them if you are the same Jeremy;) If not, you are still a great help;) thank you, Denise
Photo of Ann  T

Ann T

  • 5 Posts
  • 0 Reply Likes
I've done this three times and also tried editing the html. Can not get it to work. It either, does nothing or, changes the arrangement of the photos to a column of pics way past the original text box created with the text widget.

Either way no background change. I have to delete the whole box and repeat the process. So, when I said earlier that I am in infancy stages. . . I think I am still an egg. Please explain it to me again. With pictures???
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hi Anne,
I think I see what has happened. The code that Jeremy posted above didn't come out as it should, I think there might be some trouble with how code is showing up on the forum posts right now.

This is what the code needs to look like:
<!--
<div style="border: 1px black; width: 900px; height: 211px; background-color: blue;"></div>
-->

Without the <! -- and --> at the beginning and end.

If you add a Text Widget to your page, and then click on the little HTML icon on the Edit Toolbar, you can paste in that code. Then click OK and your Text Widget should have that background. Play around with the width and height to make it fit the area you want to have the background, that was what I put in so that it would be the widget of my style area, you can also change the border color and background-color.

Once you have done this, click right into the Text Widget and you will be able to add your pictures and or text just like you normally would in a Test Widget.

Here is an image of what this looks like in the HTML editor:


Here is a picture of what this looks like on the page with an image inserted:


I hope this helps!

Emmy
Photo of Ann  T

Ann T

  • 5 Posts
  • 0 Reply Likes
Fabulous!! This is awesome. My site is looking better now. Sorry I am so dense when it comes to technology. Thank you both Jeremy and Emmy!!!!!
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Great Ann, I'm glad to hear that helped! You're not dense... it's just a learning experience :)
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Oh my!! This is just lovely! And how neat we can do that at Yola:)
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Wonderful, I'm really glad that worked for you!