Need help with editing my background.

  • 1
  • Question
  • Updated 9 years ago
  • Answered
Is there anyway that I can chage my entire background and design it like I want? If so can you give me details on how to do that please. Thanks for the help. I am a little lost.
Photo of Heartbeat

Heartbeat

  • 34 Posts
  • 0 Reply Likes

Posted 9 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Heartbeat

There are only certain templates which are customizable. This is a style guide to help you know which templates you can personalize:

http://www.yola.com/yola-style-guide

The things that are customizable are the banners and backgrounds. You can upload your images to your file manager. Then, under Properties on the right-hand side, you'll see options to change your background and banner.
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Thanks littleus!
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hello Heartbeat,

Here's some more information on how to implement background and banner image changes to your site.

At the moment have 6 styles where you can add a background:

1. Tastelessly
2. Burlap
3. CleanSlate
4. BareNecessities
5. NoFrills
6. SqueakyClean

These styles can be found in the first 10 of the style selection (click on 'Change Style' to see the style selection).

To change your background on your page, follow these steps:

1. Click on the "Properties" tab on the sidebar on the right.
2. At the bottom of the "Properties tab", under "Background image" click on the three dots (...) to choose or upload an image.
3. Click on "OK" and the image will be added as a background to your page.

Please note that the background will apply to that specific page and not to the whole site. To remove the background image, follow the same steps above and click on the 'None' button in the image selector dialog box that opens.

Yola offers a selection of styles that allow you to change the banner image. If the banner image can be changed, you will see a white box with an instruction placed over the default banner image.

To change the banner image:

1. Click on the white instruction box that says "click here to change banner image"
2. The File Manager will open up that will allow you to browse your computer for a picture to upload
3. When you are done, click "ok" and your own image will replace the default image
4. If the dimensions are not quite right you can fix this by clicking on the "Edit" option in the file manager. You will be able to edit your image in Picnik (Picnik is a web-based image manipulation tool) and it has an option for you to resize your image. When you are done, click "save to Yola" and the new image will replace the old one.

Please note that the white instruction box will only appear in editing mode, and will disappear when you preview or publish your site. Also, you may use the default banner image if you wish.

If I can assist you further please let me know.

Kind Regards,
Emmy
Photo of Heartbeat

Heartbeat

  • 34 Posts
  • 0 Reply Likes
Thank you so much.
I have another question if I make a image and format it to HTML do I still do the same thing? Or are there different steps?
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Hello heartbeat,

Image formats are are all available for this purpose. You may use for instance jpeg, gif, png among others. You don't have to take these and do anything else to them other than editing dimensions and file size.

For a full page single image I would look at 150 Kb file size. that's more than adequate.

Image resizing is easily done with the image online editor Picnik.

Follow the steps as outlined by Emmy above.

i hope this answers your question. Please get back to us if there is something that's not clear.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hey Peter, I was just reading your comment above about 150kb being enough for a full-page single image. Right now, I have a full background image which is approx. 250kb. If I try to resize it in Picnic, my dimensions obviously change and then I end up getting a tiling effect which I don't want in my site. How do I compress my image but still retain the dimension I want?
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Hi littleus,

Under the Save& Share menu you can select the compression and the dimensions. Good idea to check the dimensions before going ahead in case something changed it. Select a compression. (JPG recommended by Picnik. ) You will notice below the compression quality the actual file size that will be created. As with all things grand and powerful save your original somewhere in case someone nicks your picnik basket with the goodies
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Peter,

What I have found though by compressing it, the quality of the picture really degrades. I guess there's no real good way around this.
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Yes you must start off with a high quality image.

Compression algorithms vary hugely. if you want me to do it in Photoshop send it across. Please tell me the dimensions as I would like to verify those before giving it back to you so you don't hate me for making it into a favicon !!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Peter. I may take you up on that offer. Right now my background photo sits at about 250kb. My banner photo is about 150kb. Do you think these are too big?
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Your welcome Littleus,

The test for "bigness" of an image is the time it takes to load on a surfers computer. Big just happens to be getting smaller each day I guess.

Your background and banner took exactly 20 seconds at my end. Maybe a smidgen big?
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
L you're laughing.

An image of that size will tolerate huge compression particularly if you start from the original not from one to another to another though. I would use Boomer's suggestion because it will barely degrade your image at all.

It's a good idea to resize before compressing too.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I've tried to resize my image using the Faststone imaging program. I was able to compress it a bit further but it's still hovering around 170kb. Can you take a look at these two pages and tell me if you notice any difference in the loading time between the two:

http://dejavuapparel.synthasite.com

http://dejavuapparel.synthasite.com/t...

I'm trying to think of what size my background should be. It needs to be big enough so that it won't tile. Currently, it's at 1500px X 900px. Should I alter the dimensions?
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Hi L,

The seond.../testpage is loading faster for me.I think that a 1500 px width will include the majority of peoples displays. The width range is from 600 to 1900 which covers about 98% of browsers. I would guess the majority of casual users would be using displays around the 1024 px range so your 1500 will cover it. The way to check how it will look is to go into your control panel>display>display properties>settings and thtere you can change the the screen resolution to say 1024 pixels width. You will then be able to view your page as the majority of people will see it. (tkae note of the resolution before you change it so that you don't have any confusion when you revert back)
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Well Peter.. you're not gonna believe this.. but it's the first site that has the smaller file size. The second one is still the larger image size! Maybe I just have to scrap the whole background image thing with the picture and find something that just tiles instead.
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Littleus,

i don't think that it's major disadvantage unless you anticipate big competition in numbers. Go with your heart for a little while and then review. No harm done I think.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Have any of you tried Faststone image viewer.
I swear by it for editing and resizing images.

You can re-save .png from 24bit to 256 (8 bit) resolution.
that's a third reduction and on some pics with few colours
there is virtually no image loss. You can drop .jpg's down as well.

The nicest thing about it (besides the fact that it's absolutley FREE) is
that you can view both images that you are editing at the same time (before and after).

It's also great for taking and editing screenshots (all in one)
You can work offline as opposed to picnik. (save some bandwith)

Check it out:
http://www.faststone.org/FSViewerDeta...

P.S. Check out the other Faststone products as well.
Batch image resizing etc......
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
That's good enough for me. thanks Boomer. Boomermarked!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Boomerang!!! That's a great tip! Thanks for sharing.
Photo of Heartbeat

Heartbeat

  • 34 Posts
  • 0 Reply Likes
I have GIMP photo editor, that is a great software you can do a lot on it. So far it is the best one yet that I have tried. But that is just want I think.
Photo of KanThaiDecor

KanThaiDecor

  • 2402 Posts
  • 263 Reply Likes
I have found that all of the graphics programs out there each have something to offer that it does better than others...seems like no ONE program does it all great.....I do love Gimp though and have bought several brush kits for Gimp and have commercial license to use as I wish.