More Tips for XSitePro

1. Tutorial for making rounded corners on photos and other images in Photoshop
2. Should I "publish locally," "back up" or "export" my Web sites in XSite Pro? What's the difference?
3. How do I recover if I have written over my good Web pages with a bad or corrupt file?
4. Where are my images saved when I use Other > File Manager to import them into XSitePro?
5. How can I spice up my opt-in form without hiring a programmer?
6. Do empty alt tags affect my Search Engine ranking?
7. How do I add Flash to my XSite Pro Web site?
8. How do I get text to flow around my images?
9. How do I create a manual contact or opt-in form in XSite Pro?
10. How can I link multiple templates' navigation in XSite Pro?
11. Can I have different headers on different pages in XSite Pro?
12. How do I add a blog to my XSite Pro Web site?
13. How can I get more click-throughs from parent pages to article and product sub-pages?
14. How do I create sub-pages in XSite Pro?
15. How can I delete all the sub-pages under a parent page?
16. How can I change the hierarchy of parent and sub-pages in XSite Pro?
17. How can I make a link open in a popup window in XSite Pro?
18. How can I add my own bullet images to a list?
19. How can I add a link to my Home page from my header image?
20. How do I set up the Publishing Details in XSitePro?
21. How can I add CSS to Category Headings to add padding, borders, etc?

30 More XSite Pro Tips and Tricks!

Discover How to Use Borders, Separators and Dividers to make your site look classy and professional. Increase the "trust factor" on your XSitePro Web site!

Find out more here...

1. Tutorial for making rounded corners on photos and other images in Photoshop.
   
   Nice, easy-to-understand tutorial that I found online. Click here to go to the Web page.
   
   
2. Should I "publish locally," "back up" or "export" my Web sites in XSite Pro? What's the difference?
   
   A customer phoned me and asked how he could restore 600 pages of articles he had accidentally overwritten in XSite Pro. He had published them locally to his hard drive and accidentally imported them into XSite Pro. All the articles in his Web site now had 2 headers, 2 footers, etc. It was a mess. Unfortunately since he had not BACKED up and not EXPORTED his files at any time, there was no way to recover from this, except to manually remove the extra HTML from every page. Even search and replace wouldn't work, because, in the head section, the page title and keywords were different on every page.
   
   I asked him if the articles were stored in a folder somewhere. But no, he had composed them directly in XSite Pro, all except a very few that he had acquired from article directories. So, he couldn't use the Import Pages function to recreate the articles. It was going to take him between 10 and 20 HOURS to fix his pages!
   
   So, here's what you need to know:
   
   
   1. When you PUBLISH your pages to your hard drive, you cannot import them back into XSP.
      
   2. When you do a BACKUP, it backs up ALL the Projects and Web sites that you created in XSP. You can restore the backup, if you need to, but EVERYTHING will be restored to the way it was at the time of the backup. If you need to do this to recover ONE Web site, this would overwrite all your other Web sites, including any that you might have worked on since the backup. So, before you restore a backup to recover one damaged Web site, EXPORT all your other Web sites FIRST so you can IMPORT them after the restore.
      
   3. When you EXPORT, you save ONE site at a time in a format that can be imported back into XSite Pro. You can also share the exported file with a colleague who has XSite Pro or send it to a Web designer who has XSite Pro, etc.
   
   Now, here's what I want you to do:
   
3. 1. Go immediately into XSite Pro and do a BACKUP of all your sites (a Backup automatically backs up everything in XSite Pro). Save a copy on your hard drive and on CD. Having a backup only on your hard drive won't be much use if your hard drive crashes and your data is not recoverable!
      
   2. Before doing any major work on a site, EXPORT it and save a copy on your hard drive and/or on CD (preferably both).
      
   3. Promise me you will BACK UP regularly and always EXPORT your sites before you do any major work on them!
      
   4. Sleep easy tonight!
      
      Tip: Want extra insurance? Mozy - Online BU service
      
      
4. How do I recover if I have written over my good Web pages with a bad or corrupt file?
   
   Very rarely your HTML editor (yes, even XSite Pro!) might corrupt one or more of your Web pages. If you accidentally upload a corrupted page and write over your online copy, immediately check Google to see if your recent pages are still cached. If so, copy the text. At least you won't have to re-write your sales letter or other important content. Now, if you follow my tip to back up regularly, this won't ever happen to you, but Google's cache saved a client's neck recently so I thought I'd share this tip with you.
   
   
   
   
   
5. Where are my images saved when I use Other > File Manager to import them into XSitePro?
   
   On your computer, browse to Documents and Settings > Your User Name > My Documents > XSitePro-Data > Sites.
   
   Each of your XSite Pro Projects is stored in a numbered folder. Each Web site within that Project is also stored in its own numbered folder. If you open the Web site folder, you will see all of your HTML files (Web pages), CSS file(s), image files, etc. If you have already published your Web site to the 'Net, you will also have a copy of your images on the server provided by the hosting service you purchased.
   
   Tip: To be on the safe side, I personally also keep all my images (including images I didn't end up using for that site) in another folder on my computer labeled with the actual Web site name and the XSite Pro folder number, e.g., XSite Pro Designs - 110, as I have dozens of Projects and Web sites in XSite Pro. And don't forget to back up your XSite Pro Projects regularly. See my tip on backing up!
   
   
6. How can I spice up my opt-in form without hiring a programmer?
   
   XSitePro V2 has an awesomw Forms Wizard, but sometimes you still might want to build a form manually. And then you'll want to make it look nice and professional...
   
   The first thing to do is to make sure you copy the HTML, not the JavaScript, version of your opt-in form code from Aweber, GetResponse, etc. That way, you will have full control over the form in XSite Pro.
   
   I would start by learning a little about Cascading Style Sheets (CSS). With CSS, you can put a fancier (and nicer) border around the opt-in box than you can with HTML. You can colour the top and bottom one colour and the sides another colour, for example. You can make the sides different widths. Say, top and bottom 2 pixels, right and left sides 1 pixel. Things like that.
   
   Then you can actually affect the gray Submit button itself by using CSS to change the background colour, font type (Verdana, Georgia, etc.), font colour, etc.
   
   Examples
   
   You can also change the text on the button so it doesn't say "Submit," but says something like, "Sign me up!" You can make the text bold, all caps, etc. to add variety.
   
   So, you can actually make a very stylish form using only CSS and a little creativity and practice.
   
   But before embarking on this new adventure, there's something to be said for presenting a form that people recognize as a form, with a button that is recognizable as "clickable." So you would have to test which worked best (got the most sign-ups), a fancy form or the plain old boring one that was easily recognizable by your visitors. In most cases, design should stay in the background and take second place to content and "clickability."
   
   
7. Do empty alt tags affect my Search Engine ranking?
   
   As far as I know, there's no penalty for having nothing in an alt tag, as far as the search engines go, but having relevant keywords in the alt tags will help boost your ranking.
   
   Alt (alternate) tags were originally used so the blind and people browsing with images turned off (in the days of slow dial-up connections) could read the site. The blind use special readers that just read text on a Web page. So, for this reason alone, any image that is consequential should have an alt tag. But some images don't require alt tags, like spacers, etc. Alt tags are also helpful if an image is broken so at least there's a description of what should be there.
   
   The Alt tag flag in Page Analysis > Accessibility will stay red until all images on that page contain alt tags. If there's one image without an alt tag, that flag will be red. It's just telling you how many alt tags you have compared to the number of images (5/3 means 5 images, 3 alt tags). If some of your images don't warrant alt tags, this flag will always stay red, because the number of alt tags and the number of images will never match.
   
   By the way, you can edit the alt tag for your header in Page Layout > Header Panel > Basic Header Alt Text. Or, in Advanced Header > Designer, if your header is there instead of in Background.
   
   
8. How do I add Flash to my XSite Pro Web site?
   
   You will receive some code from whomever created the Flash for you.
   
   A. Put that code into your header or side panels in XSP wherever you want the Flash to show up. Check the size of the Flash image to make sure it will fit wherever you plan to put it.
   
   Your code will look something like the code below. Note: you can see the width and height in the code, as well as the fact that this file is going to be uploaded to the root directory. If it were going in a subdirectory, the path would be something like src="flashfolder/myfile.swf".
   
   

   <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/
   pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
   width="140" height="52" id="myid" align="center">
   <param name="allowScriptAccess" value="sameDomain" />
   <param name="movie" value="myfile.swf" />
   <param name="quality" value="high" />
   <param name="bgcolor" value="#ffffff" />
   <embed src="myfile.swf" quality="high" bgcolor="#ffffff"
   width="140" height="52" name="myfile" align="center"
   allowScriptAccess="sameDomain" type="application/x-shockwave-flash"
   pluginspage="http://www.macromedia.com/go/getflashplayer" />
   <embed src="myfile.swf" width="140" height="52" autoplay="false" controller="true" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</embed>
</object>

Note: To add Flash to your header, you will need to use the Design view under Page Layout > Header Panel. Put the code in a table cell. Just make sure your panels (left/main/right) add up to the same width as your header.
   
   B. Now upload your actual Flash file (it will probably end in .swf) to your server using a separate FTP program instead of using XSite Pro's File Manager, if you prefer. This will cut down on upload times in XSite Pro. Make sure you put the file in the root directory or you will need to change the code you received to reflect the path to the file. If you use File Manager to upload your file, XSite Pro will automatically place it in the root directory.
   
   A lot of good information on adding video to your Web site here.

9. How do I get text to flow around my images?
   
   

   To get text to wrap or flow around an image, put the image in a table, and then left or right justify the table. You may want to add a cell (column) to the table that adds some white space between the image and the text. If you do that, add a non-breaking space (&nbsp;) to the empty cell so it doesn't collapse in some browsers.
   
   You can use <BR CLEAR="all"> after the text that belongs to the image, if you want the next line of text to start below, instead of beside the image.
   
   The trickier way to wrap text is to use Cascading Style Sheets (CSS). This requires use of the "float" attribute. Be prepared to experiment quite a bit if you decide to use CSS to flow text around your images. While the effects can be very modern and stylish, this comes at a price: time, effort and the willingness to accept that not all browsers will display your page the same way.

10. How do I create a manual contact or opt-in form in XSitePro?
    
    Even though XSiterPro V2 has a Forms Wizard, sometimes you'll want to manually create an opt-in, contact, or data collection form. If you belong to an autoresponder service like AWeber, they will provide you with the HTML code to paste into your XSite Pro Web page (in the Source tab). Make sure you copy the HTML, not the JavaScript version. Then you can tweak the HTML in XSite Pro. You can change the input field size, change the look of the table, add text, add a link to your privacy policy, etc.
    
    If you want to create a contact form to collect comments or gather information from a prospect or client without using an autoresponder service, you will need to know how forms work to be able to add them. FormMail is a method to send email from a contact-type form. A very popular and secure method to do this is using Matt's FormMail script. (Following the Readme instructions, you should be able to get a working version of FormMail up relatively easily.)
    
    The FormMail script needs to be installed on the server, so you will need to check with your hosting service to see where you should install it (Note: they may already have it installed, so ask first!), or, if they use a different script for this purpose, you will need to know the path to where it is installed and the syntax it uses. (Tip: Here's a way to use FormMail without it being installed on your server.)
    
    Now you will need to create the form on your Web page. It consists of three parts: the formmail code, the input fields (e.g., name, email address, etc.) and the submit button. It will look something like this:
    
    <form action="/cgi-sys/FormMail.pl" method="post"> [The path to the FormMail script on the server]
    <input type="hidden" name="recipient" value="myname@mywebsite.com"> [The email you want the information sent to]
    <input type="hidden" name="subject" value="Contact Form"> [The Subject line of the email]
    <input type="hidden" name="redirect" value="http://www.mywebsite.com/thank-you.htm"> [The thank you page you want the person directed to after submitting the form]
    
    [The table neatly aligns the input fields, labels and submit button]
    
    <table>
    <tr>
    <td colspan="3">Contact Form</td>
    </tr>
    <tr>
    <td>First Name:</td>
    <td>&nbsp;</td>
    <td><input name="Name" type="text" id="Name" size="20"></td>
    </tr>
    <tr>
    <td>Email:</td>
    <td>&nbsp;</td>
    <td><input name="Email" type="text" id="Email" size="20"></td>
    </tr>
    <tr>
    <td>Comments:</td>
    <td>&nbsp;</td>
    <td><textarea name="Comments" cols="25" rows="4" id="Comments"></textarea></td>
    </tr>
    <tr>
    <td><input name="Submit" type="submit" id="Submit" value="Submit"></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table>
    
    </form>
    
    If you find all this intimidating, you might want to try an online form building service. You create the form online using an easy interface, then you can copy the HTML to paste into your XSite Pro Web page. JotForm has a free version that is more than enough for the average user!
    
    Update: Here are two more contact form generators that are recommended by folks on the XSite Pro forum: http://www.mycontactform.com/ and www.bestwebforms.com.

11. How Can I Link Multiple Templates' Navigation in XSite Pro?
    
    If you have a project in XSite Pro that contains two or more templates (same Web site, but using different templates for different directories, sections or other purposes), XSitePro can update links to files in all templates automatically.
    
    Example: If your About Us page is on Template #1, and you want to link to this page from Template #2, go to Web Pages > Add > External Link. On the Info tab, choose "Link to." Then click on the folder icon, choose "Pages," right click and choose "Another page in XSite Pro." Then select the About Us page in Template #1. The URL will now be greyed out. Do not type the URL manually in the "Link to" field, as this will create a link, but XSite Pro will NOT automatically update the links.
    
    Now, when you save Template #1, if the file name of the About Us page has changed, XSite Pro will automatically update the link to that page in Template #2. Note: It only performs this operation when a file name changes.
    
    NEW! In Version 1.60+ of XSitePro, you will get a message that allows you to say "No" to this operation if you have no interlocking sites that need updating. This saves processing time.
    
    Tip: The template you are linking to must have the domain name URL in the Publishing Details.

12. Can I have different headers on different pages in XSitePro?
    
    Yes! Don't put anything in the header panel, or put a narrow generic header in there that will blend with images that you put in the right/left and main panels. In each main panel, you can change the image and have a unique "header" on different pages.
    
    
13. How do I add a blog to my XSite Pro Web site?
    
    
    Check with your hosting service. If they offer Fantastico, it usually comes with Word Press and it's a one-click installation. It may require that you manually set up a MySQL database, but that's pretty straightforward. The instructions are here (scroll down to "Using cPanel").
    Otherwise, www.Blogger.com is very easy to use.
    Once your blog is set up, just create an external link to it in XSitePro.
    
    
14. How can I get more click-throughs from parent pages to article and product sub-pages in XSitePro V1?
    
    On parent pages in XSitePro V1, the default link colour for the links to sub-pages is black. So, you will see a bulleted or numbered list with a black underlined title. The title is a link to a sub-page with an article or detailed product information, but because the link is not blue, visitors to your site might not realize that it's a link. On the Internet, blue, underlined text = hyperlink and signals a "click here" compulsion in visitors' minds. You want to foster this compulsion as much as possible. Here's how...
    
    In Page Layout > Main Panel, change the font colour to "Blue" from the dropdown list. This step will change ALL text on your pages to blue. To fix this, go to Other > Global Scripts > top section. Add the following CSS:
    
    <style>
    
     td, p, ol, ul, li {color: black;}
    
    </style>
    
    This will change the font colour for all text inside a <td>, <p>, <ol>, <ul> or <li> tag to black. This does not affect the links, they remain blue! So we now have a workaround to the black link problem!
    
    To see this tip in action, go to my main tips page where you will see the list of sub-pages with blue links!
    
    Hint: If you see any of the text on your pages showing blue when it should be black, simply wrap the text in a <p> tag.
    
    If for any reason using the <p> tag is not possible due to the formatting of your page, wrap the text in a <span> tag instead and create a class called .color. Your CSS would look like this:
    
    <style>
    
    td, p, ol, ul, li {color: black;}
    
    .color {color: black;}
    
    </style>
    
    Your text would look like this:
    
    <span class="color">This is where your text would go.</span>
    
    So now you can make your parent pages in XSite Pro attract more click-throughs to your articles and product sub-pages.
    
    
15. How do I create sub-pages in XSitePro?
    
    In the list of pages in your Web site, right click on the name of the parent page you want to add sub-pages under. A menu will come up. Choose Add Sub-Page > Blank (for a regular page). You can create unlimited nested sub-pages this way (meaning that a sub-page can be a parent page for sub-pages under it and so on and so on). IMPORTANT: All sub-pages are shown at the same level on the navigation menu (i.e., all sub-pages under a particular parent page show as sub-pages of that parent page no matter where they are in the hierarchy). However, if you right click in the Design view and choose "Insert Links To All Sub-pages" on any page that has sub-pages under it, this will create a list of only that page's sub-pages.
    
    
    
    Nested sub-pages are shown below...
    
    
    
    
16. How can I delete all the sub-pages under a parent page?
    
    You can delete all the sub-pages under a parent page as shown below. Right click on the parent page and a menu will come up. Choose Sub-Page Settings > Delete All Subpages.
    
    
    
    
17. How can I change the hierarchy of parent and sub-pages in XSite Pro?
    
    To change the hierarchy of pages, select the page you want to move and use the right/left arrows to place the page in the correct hierarchical position. The right arrow moves the page to a lower position in the hierarchy; the left arrow moves the page to a higher position in the hierarchy. Arrows are available or grayed out according to the position of the page you have selected. Note: Pages located under a Category Heading or External Link will have grayed out right/left arrows. Move these pages out from under the Category Heading or External Link using the up/down arrows. The right/left arrows will become available again.
    
    
    
    
18. How can I make a link open in a popup window in XSite Pro?
    
    In XSite Pro, highlight the text you want to link, for example a link to your contact information, product description, privacy policy or a term you want to define, etc. Then right click and choose Script Wizard > Link that opens in a popup window.
    
    
    
    
19. How can I add my own bullet images to a list?
    
    The default CSS for bullets can be overridden by setting new properties for the <UL> HTML tag in Other > Global Scripts. Here are two options for adding your own bullet images to lists.
    
    1. The followng affects all unordered lists in your template.
    
    <style type="text/css">
    
    ul {list-style-image: url(images/mybullet.jpg)}
    
    </style>
    
    2. The following is a class that must be applied to the <ul> HTML tag each time you want to use it:
    
    <style type="text/css">
    
    .mybullets {
    list-style-image: url(images/mybullet.jpg)
    }
    
    </style>
    
    You apply it in the HTML (Source tab) like this:
    
    <ul class="mybullets">
    <li>Red</li>
    <li>Blue></li>
    <li>Green></li>
    </ul>
    
    As for alignment, I tend to build that right into the bullet image itself. Here is a closeup of the bullet I used in the template below. I added a couple of empty pixels at the top of the image. I also added a grey matte to the GIF when I saved it in Photoshop so it would blend in with my Main Panel colour (this image has no matte yet).
    
    
    
    
    
    Tip: Don't forget to load your bullet image into your template by going to Other > Resource Manager > Add.
    
    
20. How can I add a link to my Home page from my header image?
    
    Add your header using Designer instead of putting it in as a background. Go to Page Layout > Header Panel > Advanced Design > Designer.
    
    Put your header image here, then look in Source view and remove any extraneous code like <p></p> or &nbsp; when you're done. You can also place your header in a table cell and add a cell below it where you can put text, links, search box, etc. Finally, right-click on your header in the Design view and link it to your Home page.
    
    
21. How do I set up the Publishing Details in XSitePro?
    
    Thank you to Jason on the XSitePro forum for answering this question and thereby reminding me that I should have this tip on my list!
    
    Note: This tip shows the HostGator details. HostGator is a popular, easy-to-use hosting service recommended by several of us on the XSitePro forum. Other hosting services could be different. Use the details sent from your own hosting service! Example: the FTP Directory could be /httpdocs/ or could be left blank, etc.
    
    Main Domain:
    
    * Domain Name: www.MainDomain.com
    * Home Directory: (leave this blank)
    * FTP Server: ftp.MainDomain.com
    * FTP Username: (from your web host email)
    * FTP Password: (from your web host email)
    * FTP Directory: /public_html/
    
    Sub Domain:
    
    * Domain Name: Subdomain.MainDomain.com
    * Home Directory: (leave this blank)
    * FTP Server: ftp.MainDomain.com
    * FTP Username: (from your web host email)
    * FTP Password: (from your web host email)
    * FTP Directory: /public_html/SubDomain/
    
    Addon Domain:
    
    * Domain Name: www.AddonDomain.com
    * Home Directory: (leave this blank)
    * FTP Server: ftp.MainDomain.com
    * FTP Username: (from your web host email)
    * FTP Password: (from your web host email)
    * FTP Directory: /public_html/AddonDomain/
    
    
22. How can I add CSS to Category Headings to add padding, borders, etc?
    
    You can add HTML and CSS directly to the Category Name field. See screenshots below.
    
    Here I'm adding both padding and a 1px border around the category heading:
    
    
    
    Here's what it looks like:
    
    
    Hint: If your Category Heading changes don't show up after you make them, close your template and re-open it. The changes should then appear.

More XSitePro Tips and Tricks!

XSitePro V2 Tips!