Need a new web host or having a problem with a script? Tips and advice on the best way to design, build and maintain your most valuable asset - your website!

text on top of images

foulsham
Posts: 2
Joined: 17 Aug 12
Trust:

text on top of images

Hi, just trying to work out if it is possible to place text on top of an image in XSitePro2. I understand that you can do it on the header but is it possible to place an image into a cell and then add text on top of it? Ideally I'd like to place text which can link to other pages and has a hover function. There seems to be a 'background image' option on the cell properties 'style' menu but I can't see how to drop an image into the field and then overlay the image with copy. Even better would be a gallery of rotating images with rotating copy overlaid on top and fwd/back arrows. Can anyone help? Thanks!
  • 0
Site Admin
michellerana
Posts: 1874
Joined: 05 May 09
Trust:
Are you trying to add a text to your header image? If so, please go to the "Page Layout" tab and find the "Header Panel section" on the top left.

Place the header image in the background by selecting the image file from the drop down menu or clicking the folder icon and then navigate to the image file.

Once you have the image set as the background for the header, click preview and then right click on the image and then click Properties. Make a note of the height of the image. Go back to the Header Panel Section and check the box "Use Custom html" and set the height to the image height. Click on the designer tab and type your text onto the header. Once you are done with the text, click OK.
  • 0
Michelle
Customer Support
=========================

Limited time special - Pathway to Passive for $37: http://www.affilorama.com/pathwaytopassive
 
PremiumMember
romacburke
Posts: 6
Joined: 23 Jul 12
Trust:
Hi,

Is this what your looking for: http://www.wowsecretkey.com/images/2012-08-18_1118.png
I can't help with the hover option you are looking for, but maybe this will answer some of your other questions.

1 Create your Table
2 Right Click inside your table choose Table properties then set the width you want.
3 Right Click inside your table again and choose divide cell.
4 Right Click inside the cell you want your image to be, choose Cell Properties/click Style Tab/click Background Tab.
5 Enter Background image e.g (images/your image name) this is mine (images/2012-08-18_1118.png). All pictures you upload to xsite go into the images folder.
6 Write your text choose size, font, colour.
7 Right Click inside your cell once again, Click Cell Properties/Style Tab/Text Tab.
8 Choose the Alignment you want for your text.

Hope it helps

David
  • 0
foulsham
Posts: 2
Joined: 17 Aug 12
Trust:
Thanks David,

Spot on.
  • 0
paulie69
Posts: 77
Joined: 06 Jun 09
Trust:
Having used XSite Pro and Photoshop extensively I respectively would not advise doing it that way. Are you familiar with either Photoshop or Paint.net? Paint.net is what I would suggest because it's easier to use. It's brilliant for those starting out. And it's totally free. You will get very professional results when using it.

Edit the graphic using Paint.net and apply your chosen text there as a new layer rather than muck around with tables inside of XSite Pro. Then insert it into the table cell - and embed your link. It's as easy as pie and besides it's good experience editing your own images for future projects your might have as well.

It will take you maybe 15 minutes to learn how to add your text to a new layer using Paint.net. It's valuable experience to play around with your own graphics and way better to do this using dedicated editing apps rather than XSite Pro. You will get far better results. You'll save money too and gain a lot of confidence that you can produce your own graphics.

Paul.
  • 0
PremiumMember
jimcoe
Posts: 259
Joined: 13 Feb 12
Trust:
I made a YouTube video on the best way to add text over graphics - using Adobe Photoshop (expensive), Adobe Photoshop Elements (under $100) or the free GIMP image editors.

Just adding a layer of text over an image is simple. But often, with a complex image background, the text is then very hard to read. To fix that is not so simple. I see this poor text-over-image readability online a lot.

My tutorial shows how to overcome that problem with special text effects, like "Outer Glow" and "Stroke" - plus some other tricks.

Video Tutorial:
http://youtu.be/vLgd5h3fn2w

GIMP:
http://www.gimp.org/

Hope this helps....
_jim coe
  • 0

This topic was started on Aug 17, 2012 and has been closed due to inactivity. If you want to discuss this topic further, please create a new forum topic.