HTML Picture insert/re-size help

  • 1
  • Question
  • Updated 8 years ago
  • Answered
1) How do I insert a picture using html code and be able to re size it?

How do I change the colour of text boxes, not the the text the boxes background from white to blue? I want to be able to add text to it and pictures.
Photo of Tempest Star

Tempest Star

  • 5 Posts
  • 0 Reply Likes

Posted 8 years ago

  • 1
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, if you want to add an image with HTML, follow these steps:

1. First drag over an HTML widget.

2. Then, paste in this code:

<img src="resources/YOUR_IMAGE_IN_FILE_MANAGER.JPG" width="300px" border="0">

3. Make sure to change "YOUR_IMAGE_IN_FILE_MANAGER.JPG" with the image's name in your site's file manager. Also, to change the size of the image, change the "300px" part and it will change the size. If you want it bigger, enlarge the number. If you want it smaller, change the number down.

As for changing the background color of a text widget, I don't know what you mean by that. Can you explain it more? Do you want to change the color of the text background color? Or do you want the Text Widgets to have a background color?

I hope this helps!

Sincerely,
-Nathan
Photo of Tempest Star

Tempest Star

  • 5 Posts
  • 0 Reply Likes
If you look at the background of this post the background is white. Where I have asked a question it is blue/green. How do you change colors like that.
Photo of Callum

Callum

  • 357 Posts
  • 32 Reply Likes
<!--
Hi Tempest Star,
You probably could achieve this by wrapping the HTML cdoe in a div:

<div style="color: blue">
<p>Your Text</p>
</div>

Maybe that would work?

Callum Booth

-->
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Oh, you want to change the color of your reply on this forum? You can't. The forum service (Get Satisfaction) wont let you add any HTML codes accept the ones specified in that link that says "(Some HTML Aloud)" You can use the b tags for this:

<b>This would be bold</b> This is bold

There are many other HTML codes you can add in, but divs aren't aloud.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
But if you want to change the color in your site, you can. Just drag over an HTML widget and paste in Callum's code. But, Callum, that will only change the color of the text. To change the color of the background, you have to use this:

<div style="background-color: #30B5FC; border:1px solid blue; border-radius:6px;">

<p>Your text</p>

</div>

This will change the background to a lighter shade of blue. Just 'blue' will make it a very dark blue but if you use that HEX code, (HEX is that number and letter combination like this: #30B5FC) it will make it a lighter shade. You can choose what HEX code you need here: http://colorpicker.com/

I hope this helps!

Nathan
Photo of Callum

Callum

  • 357 Posts
  • 32 Reply Likes
Woops, CSS fail, sorry about that
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Oh, it's ok. I just wanted to let Tempest know so they don't copy it and it doesn't work. I've done that before! :)
Photo of Jean

Jean

  • 134 Posts
  • 14 Reply Likes
Hello Tempest Star,

If you look at this Yola site, www.montanacampshopping.com, the upper left widget has pretty much what you're looking for. It has an image (the store building) with a colored background (gold).

This is the code for the first part of that particular widget--the image and first paragraph below.
<!--
<div class="topleft" style="height:655px;">
<h1>Montana Camp Antiques & Boutiques</h1>

<img src="resources/MontanaCampStore.jpg" class="ctr" width="360px" height="270px" alt="Montana Camp Store" /><br />
<h2>Montana Camp's Historic Building, a Shopper's Delight</h2>
<p class="brn">In business since 2007, our 10,000 square foot store is filled with beautiful displays of antique furnishings, shabby chic home decor, retro clothing, western wear and collectibles. Along with vintage collections and fun memorabilia, we guarantee a pleasurable trip back in time.</p><br />
-->
If you look at the "img src=" part of the code, it shows how to set the image height and width.

The background, font and other styling is called from the "topleft" style in a separate css file. If you don't want to upload a separate css file, you could use the code from it in your html widget, by replacing the ".topleft" with the actual code you want.
<!--
div.topleft {
background:none repeat scroll 0 0 #F1E698;
margin:10px;
padding:5px;
text-align:justify;
-->

Let us know if you need further help with this.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Wow.. love all the fantastic help on this thread!

Tempest Star - please let us know if you still need help with this. As you can see there are a lot of people who are eager to help! :)
Photo of Tempest Star

Tempest Star

  • 5 Posts
  • 0 Reply Likes
WoW ... I mean just WoW ... got everything and more....