Background Colors, Images and Text Widgets

  • 2
  • Question
  • Updated 10 years ago
  • Answered
Hi guys!
Im trying to add a background image to a text widget box. I used the HTML editor at the text widget menu, but It didnt work - the code I typed vanished after I clicked ok, and nothing changed. Maybe Im typing a wrong code?
Can anyone help me here?

Thanx Ariel
Photo of Ariel S

Ariel S

  • 5 Posts
  • 0 Reply Likes
  • unhappy now.....

Posted 10 years ago

  • 2
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Hi Ariel,

Maybe I'm misunderstanding this but do you want to put (superimpose) text over an image (in the text widget)?
Photo of Ariel S

Ariel S

  • 5 Posts
  • 0 Reply Likes
Well... Sort of...
I want to have an Image or color as a background for my text, so I try using the html editor of the text widget. I uploaded the image, so you can see its not a photo-like image, but a sort of a tile image
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
OK.

I would forget the text widget and go for a table. Can you wait a couple of minutes and I'll pull out the code.

There are a few variables: That you will have to work out such as width of the table, border colour (or no colour). I think your tile should be 100 px x 100 pixels or smaller.

I'll be back
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hello Ariel,

Here is a link to another thread in this forum where one of our users has created some tutorials on adding borders and background color to widgets: Adding Borders & Background.

Please give this a try and let me know if you need further assistance.

Kind Regards,
Emmy
Photo of Ariel S

Ariel S

  • 5 Posts
  • 0 Reply Likes
Thanx Emmy. I will have a look at the tutorials.
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
<!--
<table border="3" bordercolor="#FFB873" style="background-image:url(http://sitename.{subdomain}.com/resou..." : width="800" cellpadding="25" cellspacing="2">
<tr>
<td width="100%"><STYLE TYPE="text/css">
BODY
{
text-align:{justify} {center} {left} {right}
}
</STYLE>your text here</td>

</tr>
</table>
-->

OK here we go.

Things in curly brackets are optional or alternatives, somethings are variable but I've left them as is and you can ask if you need clarification

Your background image is stiored in resources through the File Manager.

This code is placed into an HTML widget where you want the element to be.

Hope you get a start with this.
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Aiel, the editor on theis forum is screwing the code. It's quite difficult to work with.

my suggestion is if you have an email address publish it here for 30 seconds, I;ll acknowledge then you can delete it. i'll post it to you.
Photo of Ariel S

Ariel S

  • 5 Posts
  • 0 Reply Likes
Thanx Peter, I will try it right away!
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
<!--
<table border="3" bordercolor="#FFB873" style="background-image:url(full url including file name and type)" : width="800" cellpadding="25" cellspacing="2">
<tr>
<td width="100%"><STYLE TYPE="text/css">
BODY
{
text-align:justify;
}
</STYLE>your text here</td>

</tr>
</table>
-->
Photo of Ariel S

Ariel S

  • 5 Posts
  • 0 Reply Likes
Guys, you just made my day!!
After looking at the solutions you both sent me, I did a little test, and I dont know why, but it worked like magic... I realy dont know much about HTML and the table tags always confused me.
This is what I did:
I dragged a text widget into the column I was working on. Than opened the HTML editor of the text widget, and pasted/retyped and manipulated peter's table code to upload my background image. I than Clicked OK, and yes! I had my nice background in my text widget. When I changed the size of the column the background got thiner or wider too to fit the text column.
I started typing my text, I even uploaded some pictures, and it is still working!
Small navigation symbols apeared in the text widget that allow you to play with the table cells without entering the editor.

So this is great, I think Yola is doing a wonderful job!!

Thanx again Peter and Emmy.
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
That's great Ariel. Congratulations. This one goes in the book!