Editing A Custom Template With Nvu
It is real easy to edit a custom template using Nvu. For this example I
am going to use one of my templates. There are custom templates found here on the DOUA site also you may want to try this with.
First we want to open up Nvu. Then we go to the tool bar and select File, Then we select Open Web Location.
The location of the custom template I am using for this example is:
So I am going to paste that URL into the Create a new document or template pop up menu
Now we click the Create button and Nvu will open the web page up as a
composer page that you can edit any way you wish. You do not need to
worry too much about whether you select Create in New tab or New
Window. Usually I leave it set to new tab as it will not create a new
tab until at least one is in use.
You should now be looking at the template in a composer window with Nvu. It will look very similar to your regular browser.
Now this part is optional but if you do not do it you will eventually
come to regret it. The very first thing you should do is create a
folder somewhere on your computer where you will be able to easily find
it and save the file. I save
in increments. After every change I make I save my work. I usually
don't go to a lot of trouble with names until I have finished and start
out by saving it as 1.html , then 2.html and so on. Now this is where I
find one minor annoyance with Nvu and all the other WYSIWYG (what you
see is what you get) HTML Editors. When you go to File then save it
will save the file just as you have it with all the images having a
full path to the image location. If your image is located at:
http://www.myimages.com/mypic.jpg it will save it that way. If you use
the save as command it will save the images to the local folder the
html file is located at and truncate the full path to the image down to
mypic.jpg. This is no real problem as it is easy to fix the image
location once you have completed your template, web page, or auction
page. It is a little more complicated with background images in tables
but I will show you how to fix that also.
For that reason I am not going to discuss changing the background image on this template until the end.
If you have already done your homework and have a title and description
done it will be even easier to make changes to the template as we can
use copy and paste commands.
The first thing we need to do is to replace the page title. You can either type in a new title or copy one in either one.
If you want to change the color see this tutorial on color changes
Now lets put your item description in. Again if you have it ready you
can simply copy it and past it into the description area. One tip to
remember. If you use word or word pad to create your text for your
web page you may wish to paste the text into notepad and then recopy it
as this will loose any formating word places in the text.
Now we need to add an image to your auction page. You can do this in
several ways. You can simply remove the link and delete the image.
Right click on the image and from the drop down menu select Remove
Now we can right click on the images and the select delete.
Alternately we can simply right click on the image and select Image
Properties and then change the location of the image, the alternate
text, then the dimensions and the hyper link. I am not going into this
right now as it will bring up the exact same Image Properties pop up
menu we will get when we go to Insert Image in the next step.
We now go to the tool bar at the top of Nvu and we are going to select Insert and then from the drop down menu select image.
We now get the Image Properties pop up menu. Under the location tab we
are going to place the complete path to the image location. This means
place the images URL into the Image location box at the top. Make sure
you use the complete path to include the http part. Then the next
then we do here is add our alternate text for the image. This helps
image impaired users know what the picture is and is also cataloged by
most major search engines.
Still in the Image Properties pop up menu click the Dimensions tab and
we can set the images size. If you just want the actual size image you
do not need to change anything here just leave the Actual Size button
checked. If you want to change the size of the image displayed on the
page check the custom size button. Make sure that you have the
Constrain Image button checked before you change image sizes. With the
constrain image button checked you only need to change either the
height or width and the other one is set automaticly to make the image
stay in skew.
If you use a large image on your web host and then resize it via HTML
then you can have a hyper link to the full size image. This allows the
potential customer to look at finer details on your image easier. To do
this while in the Image Properties pop up menu you go to the last tab.
Link and past the complete URL of the image and when the user clicks
the image it takes them to the full size version instead of your html
scaled down one.
If you need more than one image then just add all you want. If you want to place your Images into tables see this link for more information on this subject
Now we will need to change the terms to your terms. You can either
highlight the text you want to change or simply delete it all to
replace with your own. Highlighting and right clicking brings up a pop
up menu that has many options including delete.
There are two links That I have place in the template to my other auctions and my ebay store.
To change the view my other auctions to your auctions you need to get
the URL to your auctions. I highly reccomend that you copy the url as
it is easy to mess up one letter in urls like these.
the we want to highlight the link text and right click with our mouse to bring up the Link Properties pop up menu.
Unless you have an Ebay Store we can just delete the next link. We want
to first highlight the link text and right click to bring up the pop up
menu and select Remove Links, Then simply delete the remaining text.
Or if you want to use the link to your ME page you can get that link
from your Ebay me page and using the highlight text/right click select
Link Properties and place the URL to your me page in the link location
, click ok and then type in the link text. Something like "Visit my Me
Now you will notice in my template I already have a DOUA image placed into the template.
Please do not "hotlink" to my website. Any images you use on yor pages
should be hosted on your phothosting and not my website or anyone elses
that you do not have permission to use. It is bandwidth theft and if
your images are on my site I could move or delete them and never know I
had messed up your auction page.
If you want to know more about hotlinking please read here.
Ok one last thing I nearly forgot. The background image in the
table. Nvu doesn't handle table backgrounds easily as a WYSIWYG
application but we can very easily change the image background by going
to to View then select HTML Source. This will bring up the actual code
that has been generated. In this template the background image for the
table is roses01.jpg. We can use the Find command that is located under
Edit on the tool bar if we can not find it but I have comments above
the background image so it is easy to find.
Replace the location of this image with the location of the image you
want to use for your auction. You can find thousands of free images to
use on the web or you may download this one if you want but again
Please Do Not HotLink to Any Image on my site.