LOGO
VIDEO LINKS: [ logo-text ] [ logo-png ] [ logo-jpg ] click to open video in a new window
if you are having troubles viewing the video's online, please download the video from the link below to view locally on your computer.
The download package includes a web page for viewing the video files, and several SWF or FLV video files.
Just download the zip file, extract, then double click on the 'web page' to view the video.
VIDEO LINKS for download: [ logo-text ] [ logo-png ] [ logo-jpg ]
**(special video for Pivot template)** view or download
Overview
The 'Website Name' logo and logo symbol or themed image is a transparent PNG image, loaded into the website via a 'Library' page ( for all template pages ) and loaded directly into the flash landing page via the flash intro.
The 'logo' is a great way to brand your website. I think it provides a very professional look, and really adds some 'punch' and 'wow' to your web pages. There are several ways to update the logo ( website name and image ). Part of our 'criteria' in designing the logo was to:
- provide quick and easy updates
- provide the source files for anyone wanting to modify the graphic
- provide an alternate solution, such as using HTML text
- provide a method of adding your own logo graphic
- provide an area for a "Name" and a logo image for customers wanting to display both
What we have based these criteria on is a graphic using TEXT, to describe your 'Website Name' and that graphic includes an 'image'. The image included in your logo, is a simple themed image, but it can be replaced with your actual logo image or badge. The logo is very easy to update even for folks who do not have much in the way of 'graphic' experience.
Many of our customers would prefer to leave the 'graphic' design to us. We offer a very popular 'FREE' service to modify the 'text' in the 'Website Name' for you. Once completed, we send you the replacement file, all you need to do is save it to the {Site / logo } folder to replace the default image. With this new series of template, we are including an image in the 'Website Name' graphic, which we can also replace if you provide it with your request.
** NOTE** when replacing the graphic logo with text, there are a few additional steps you'll need to take. The additional steps involve updating the 'flash landing' page. We've provided all the 'tools' and means to replace the graphic logo with regular text, and due to the flexibility of the flash intro, there are a few extra steps ( actually, xml files ) you would need to update. Example in the screenshot below.
INSTRUCTIONS
Change the logo & image
The 'Website Name' graphic is a transparent PNG image, located in the ( Site / logo ) folder. The logo is displayed on the 'template' pages via the "Library" page:
- order your free text logo
- replace the Website Name with text
- replace 'Website Name' graphic
- change the 'Welcome' text
Order your free text logo
- log into your members home page
- locate your product license at the top of the page
- click on the 'customize' button to the right of the product license
- click on the 'text logo' option
- submit your information
- when your logo is ready, you will receive notification via email / members page and you can download your updated logo via the 'Projects' listing at the bottom of your members page
Replace the 'Website Name' graphic with 'Text'
- open the {Library / logo} page
- delete the existing 'Website name' graphic
- switch to 'code' view
- delete the following lines (displayed in red for this example)
<!-- for text logo - remove this line
<div class="logo"> Website Name </div>
for text logo - remove this line -->
- where it says Website Name, type in a new name
- click on the file menu, and select SAVE
- double click on any page in the root of the web to open in the design window
- click on the file menu, select Preview in Browser
- if the new text lines up nicely, great, you're done, if not keep reading
** NOTE for NON DWT editors ** if you are not using a DWT enabled editor, you can manually change the alignment of a <div> container. Edit the HMTL directly. Look for the following code block in your page
<!--logo-->
<div id="logo" style="text-align:center; position:absolute; left:0px; top:-10px; width:100%;">
<!--webbot bot="Include" U-Include="../Library/logo.htm" TAG="BODY" --></div>
and change the (left / right and top) positioning. You can use positive or negative numbers to align the div container. You can also change the 'left' to 'right' and visa-versa if you want to change the alignment of the logo in the page.
you may need to re-align the text
- open the {Template / template.dwt} page
- select the '<div#logo>' container with your mouse ( it may take a very steady hand ) making sure the 'quick tag selector' is highlighting the <div#logo> container
- using the arrow keys on your keyboard, nudge it up or down, left and right until it looks like it's lined up where you want it.. (you can also move it with your mouse)
- Click on the File menu, select SAVE
- if the web page you were previewing in browser is still open in another tab, go to that page, and save as well
- now preview the page again, or refresh the open web page to see if the
text is lined up where you want it, if not repeat until complete
This updates the template pages, the index page uses a flash intro and that flash intro loads the {logo.png} file directly from the {Site / logo} folder. Here you have a couple of options, replace the {logo.png} file, with a blank {logo.png} file, which takes care of loading the default 'Website Name'. Then edit a config file, by typing in your website name, and a description too (optional, but it's there if you want it)
continued (index.htm - flash landing page)
- open the {Site / flash / config / logo.xml} file
- add your website name between the <imageTitle></imageTitle>
displayed in red for this example: <imageTitle>Your Website Name</imageTitle>
- add an optional description between the <imageDescription></imageDescription>
displayed in red for this example: <imageDescription>Welcome to our site</imageDescription>
- save and close, then preview
Replace the Website Name with a new graphic
The best type of file to use when replacing the 'Website Name' graphic, is a transparent PNG. Adobe Fireworks CS3 does a great job or creating transparent PNG images. Make sure you 'name' your web files in 'lower' case, and use ( - ) hyphens or ( _ ) underscore between words in the file name ( no spaces in file names please! ).
- create your new image, using a graphic editor that can save or export your image as a 32 bit transparent PNG ( if the logo image is square or rectangular, then a JPG will work )
- import your replacement image into the {Site / logo} folder
- open the {Library / logo} page and delete the existing 'Website Name' graphic
- drag your replacement image onto the 'logo' page
- switch to 'code' view, and make sure your web editor did not enclose the
img tag with paragraph tags
- example: <p><img src="../Site/logo/logo.png" alt="logo"></p>
- remove the <p> and the </p> if you see these in the code view
Change the "Welcome to our website" and "...enjoy your stay" intro message
- open the {Site / flash / config / logo_welcome.xml} file
- change the following: ( example in bold )
<imageTitle>Welcome to our website</imageTitle>
<image>logo.png</image>
<imageDescription>Come on in, and enjoy your stay</imageDescription>
<imageTransition>Squeeze</imageTransition> - save and exit