XSitePro Tips & Tricks (XSite Pro V. 1)
- How to link an external CSS file to your XSitePro Web site.
- How to add a header and footer that stretch 100% of the browser's width (fluid design).
- Limitation of the 100% width (fluid design) option and a workaround.
- How to left align your Web site in XSitePro.
- How to add top navigation to an XSite Pro Web site.
- How to improve the look of the Breadcrumb Trail in XSitePro.
- How to search and replace.
- Fitting banner ads into your XSite Pro Web site.
- How to put a border around one panel in XSite Pro.
- How to put a border around your entire Web page in XSite Pro.
- How to put a border around a picture using CSS.
- Why doesn't my CSS style show up when I "Preview" my Web site in XSite Pro?
- How to display articles using tokens in XSitePro.
- Can I edit my template graphics?
- How can I change the link colours in XSite Pro to match my template colours?
- How should my CSS be formatted in XSite Pro?
- How can I underline my Left or Right Panel Navigation Links?
- How can I find the ASCII codes for symbols like copyright, registered sign, angle quotes, etc.?
- How do I create an "Add to Favorites" (Bookmark) link in XSitePro?
- My background image repeats so that I can see part of it more than once. What can I do?
- How can I add a gradient to my left, right and main panels?
- Free online tools to add rounded corners, borders and other effects to images
- Free Color Picker tool
- How to create your own header
- How to create templates that look unique (removing the XSite Pro footprint)
- How do I decide if a clipart image or photo will work with my header design?
- Tutorial to add a shadow to photos using CSS and a transparent PNG image.
- How do I make printer-friendly pages in XSite Pro?
- How to upload PDF's and other files to your XSite Pro Web site.
- How to add a hover effect to your navigation links using CSS.
More XSite Pro Tips and Tricks Here!
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...
-
How to link an external CSS file to your XSitePro Web site.
Go to Other > Scripts. In the top section, paste the link to your CSS file, e.g. <link
href="mystyle.css" rel="stylesheet" type="text/css">. This will link your external CSS file to ALL your pages.
Then use FTP or XSite Pro's File Manager to upload your external CSS file to the same folder as the rest of
your XSitePro files. After the initial upload via XSite Pro, you will have to manually upload your external CSS file using FTP every
time you make a change to it.
-
How to add a header and footer that stretch 100% of the browser's width.
This is also known as a fluid design.
Example: http://www.rhythmsforempowerment.com
Warning: To get this technique to work properly, your header must already have your title and tag line, etc. added to it
(do this in your graphics editor, e.g., Photoshop), as you will not be able to type over top of it as you can with the default way of
adding a header to XSitePro. Note: Typing over the graphic creates a poor quality header. Click here to find
out why (FAQ #7).
Create a background in Photoshop or another graphics editor that will fit behind and complement the main header for your Web
site. It only needs to be about 10px wide (or less), but should be the exact same height as your header.
In Page Layout > Header Panel, instead of adding your header as the Background, select your background image, e.g.,
bg.gif. Check "Use custom html" box. Put the header height in the Height box. Set the Padding to "0" (zero).
Click on the Designer button. In the Design view, select the Insert Image icon and enter the source for your header graphic.
Leave Alignment at "Baseline," and set all other boxes, except Alternate Text to "0" (zero). Fill in the Alternate Text. Click OK.
Go to Other > Scripts. Add the following CSS code to the top section:
<style>
BODY { background-image: url(bg.gif); background-repeat: repeat-x; background-position: 0px 0px; }
TABLE.XSP_OUTLINE {HEIGHT: 100%; WIDTH: 100%;}
</style>
Replace the file name "bg.gif" with the file name for your background image.
Important: The background image will not show up in your Preview until you create at least
one Web page in XSite Pro. You can just create an empty Home page, for example.
You may want to use this with a left aligned style of Web site instead of a centred style.
Note: If you don't want/need a footer, leave out this line of CSS: TABLE.XSP_OUTLINE {HEIGHT: 100%; WIDTH: 100%;}. Your Web
site can still be left-aligned and the header will still look like it's 100% of the page width, but you won't run into the
problems with fluid design outlined below.
-
Limitation of the 100% width (fluid design) option and a
workaround.
The 100% width option (described in #2 above) creates a fluid design that is harder to control in XSite Pro than in an HTML editor like
Dreamweaver, but here's one way. To avoid your contents flowing all the way to the right side of the browser and thus
creating large gaps between the panels/columns or causing the text to be too wide to read comfortably, try this:
Set your right hand panel width to about 300px (experiment with this). Then add a table to the right hand panel and put your contents in
the table. Set the table to be a fixed width of say 150px. This workaround works in both Internet Explorer and FireFox. Note: If you
don't want to put any content in the right panel, simply set it to about 300px (experiment).
If you don't want or need a footer, leave out this line of CSS in #2 above: TABLE.XSP_OUTLINE {HEIGHT: 100%; WIDTH: 100%;}. Your Web site can still be left-aligned
and the header will still look like it's 100% of the page width, but you won't run into problems with fluid
design.
-
How to left align your Web site in XSitePro.
On the Page Layout tab, go to the very bottom section called Page Margins. Check "Right Margin Only."
-
How to add top navigation to an XSite Pro Web site.
XSite Pro's navigation token <<LINKS_MENU>> can only be added to the
right and left panels. This navigation updates automatically when you add a new page. When you create your own top navigation,
you are taking your navigation for those pages out of XSite Pro's automatic update feature. Therefore, this workaround only
works well for main navigation links that don't change often, such as Home, Contact Us, FAQ, etc.
Note: For any page that you want to put in the top navigation, you should not check "Show on Navigation Menu" on the
Info tab for that page. If you check this box, your page will automatically show up on the main navigation (left or right panel). In this
case, you don't want this.
Option #1:
In Page Layout, click "Use custom html" in the Header Panel section. Click on the Designer button. In the Design view, add a
table. Make the table two rows deep and give it an absolute width the same as your header graphic, e.g., 750px. Put your header graphic
in the top table row. In the bottom table row, add another table and make it 100% wide. Set the cell spacing to at least 5px. Centre the
table. Now right click within the nested table and choose Add Link to add navigation links to each of your main pages. To put extra
spacing between the links, add the code as many times as you want between the links (this is called a "non-breaking space").
Alternatively, you can set up some nice CSS code to separate the links.
Option #2:
In Page Layout, click "Use custom html" in the Header Panel section. Click on the Designer button. In the Design view, add a table. Make
a single cell table and give the table an absolute width and height the same as your header graphic, e.g., width="750px"
height="180px". Now make your header the BACKGROUND IMAGE for the table.
To add navigation, type your links into the table cell. Use CSS to adjust the placement and spacing of your links.
Now add CSS that will avoid your image repeating if the table grows bigger than the image size. Here's an
example:
Put this in the top section of Other > Scripts.
<style>
.norepeat {background-repeat: norepeat;}
</style>
Here's how to put the class into your table.
<table bg="header.jpg" width="750" height="180" class="norepeat"><tr><td>YOUR LINKS
HERE</td></tr></table>
-
How to improve the look of the Breadcrumb Trail in XSitePro.
Go to Other > Breadcrumb Trail and put a single space (just use the spacebar) before and after the ">" sign (Separator). It creates
a nicer looking breadcrumb. E.g., Home > About Us
An alternative divider that looks very nice is to use the pipe symbol (|) instead of the greater than sign (>). E.g., Home | About
Us
To learn how to change the colour of the links for the Breadcrumb Trail, click here...
-
How to search and replace.
- To search and replace on an individual page, click on the Design tab for the page you want to modify. At the top
left of the Design tab's menubar, click on the binoculars icon.
- The global search and replace option is on the Main Menu under Tools > Find and Replace on All
Pages.
-
Fitting banner ads into your XSite Pro Web site.
If you want to put full-sized affiliate banner ads on XSite Pro Web pages, make sure that you consider the width of the banners
when BUILDING your site. Banners are generally 468 pixels wide so your main panel must be at least this wide. If you are adding
padding to your main panel, then you must take that into consideration, too. Padding of 10 pixels reduces the display area of
the panel by 20 pixels, so a panel with a 10 pixel padding would need to be 488 pixels wide to accommodate a 468 pixel
banner.
-
How to put a border around one panel in XSite Pro.
If you want to set off your left or right panel with a nice, neat little border, here are two ways to do it.
Option #1:
This example is for the left panel. Just change the word LEFT to RIGHT if you want to outline the right panel. To outline both panels,
add both sets of code. Go to Other > Scripts. Add the following CSS code in the top section:
<style>
td.XSP_LEFT_PANEL_SPC
{
border-top: solid 1px black;
border-left: solid 1px black;
border-right: solid 1px black;
}
td.XSP_LEFT_PANEL
{
border-left: solid 1px black;
border-right: solid 1px black;
border-bottom: solid 1px black;
}
</style>
Change the size of the border by editing the pixels (px) and change the colour by editing the colour. You can used named colours
like "red" or HEX colours like #0000FF. Make a dashed border by changing "solid" to "dashed." Put 0px for any side of the panel you want
to leave without a border on it.
Other sections you can put borders around:
TD.XSP_HEADER_PANEL
TD.XSP_MAIN_PANEL
TD.XSP_MAIN_PANEL_FOOTER
TD.XSP_FOOTER_PANEL
Option #2:
You can put a table into any panel and add the border around the table instead of around the panel. You can use the same code to put a border around an image, too. Here's an example of the CSS class for a one pixel black
border:
<style>
.border {border: 1px solid #000000;}
</style>
Don't forget to add the class to the table! Example:
<table border="0" class="border">
<tr>
<td>CONTENTS OF TABLE HERE
</td>
</tr>
</table>
Make sure you put the element border="0" into the table tag. Why not use the default table border? The default table border
looks awful, especially at wide widths because it simulates beveling. We've all seen those older or amateur Web sites with the big, ugly
grey borders around tables. Shudder!
-
How to put a border around your entire page in XSite Pro.
Sometimes you need to outline your Web page so it doesn't look like it's floating in space. I actually use this technique
quite often. Go to Other > Scripts. Add the following CSS code in the top section:
<style>
TABLE.XSP_OUTLINE
{
HEIGHT: 100%;
WIDTH: 750px;
border-width: 1px;
border-style: solid;
border-color: black;
}
</style>
This can also be written as follows:
<style>
TABLE.XSP_OUTLINE
{
HEIGHT: 100%;
WIDTH: 750px;
border: 1px solid black;
}
</style>
Change the size (width) of the border by editing the "border-width" (px=pixels) and change the colour by editing the "border-color." You
can use named colours like "red" or HEX colours like #0000FF. Change the style by editing the "border-style." For instance you can change
"solid" to "dashed," etc. Change "WIDTH" to match your header width. Leave "HEIGHT" at 100%.
-
How to put a nice border around an image using CSS.
Here's an example of the CSS class for a one pixel black border:
<style>
.border {border: 1px solid #000000;}
</style>
Don't forget to add the class to the image! Example:
<img src=http://www.mywebsite.com/images/myphoto.jpg width="100" height="150" border="0" class="border">
Make sure you put the element border="0" into the image code tags. Why not use the default image border? Because the default
image border is blue and looks amateurish if left on.
-
Why doesn't my CSS style show up when I "Preview" my Web site in XSite Pro?
Let's say for example that you've added a border around a panel using CSS in XSitePro. You click on the Preview button
to view your handiwork, but your nice border doesn't show up. Here's how to solve that...
To see your CSS styles in XSitePro, you need to add at least one page to your Web site. (Note: If the page you add is your Home
page, remember to designate the page as the Home page by checking the box under the INFO tab that says "This is the Home Page for
the site." This isn't required to get your CSS to show up, just a reminder for when you take your site live!)
Preview your Web site again and your CSS styles should now show up!
-
How to display articles using tokens in XSitePro.
Read this section carefully. There's a lot of information packed into the next few sentences!
Divide your articles into topics. Create a separate Web page for each topic.
Now create Web pages for each article and move the articles for each topic below the topic page. Highlight each article and use the
right arrow beside the list of Web pages to make the article a sub-page of its topic page.
Then, on each topic page, right click and select "Insert Links to All Subpages." Choose Numbered List or Bulleted List > With
Descriptions. This inserts a token into the topic page. Note: The "Descriptions" are taken from the "Description for sitemap and meta
tags" box for the appropraite page under Web Pages > Info.
Example: http://www.xsiteprodesigns.com/xsite-pro-tips.html
Put links to the topic pages only (not the individual articles) in the left hand navigation panel. Do this by NOT selecting any
checkboxes (on the Info tab) for article pages except "Publish this page" and possibly "Show on Site Map."
-
Editing your XSite Pro template.
Yes, you can make changes to your XSite Pro Web site by replacing any graphic with one of your own or by removing the graphic and using a
coloured background for that column/section instead. This works if you are using a default XSite Pro template or a custom template*.
*If you own an application that will open the .psd file that we provide as part of your custom template, you will have full control over
your header/footer and other graphics. The .psd file will contain the layers that make up your graphics, e.g., the text will be on a
separate layer that you can edit or delete. This makes it easy to replace or edit elements in your template graphics.
After editing, you need to slice the image and save the part you want to change. Then simply use that graphic in place of the one
currently in use in your template. Adjust your column widths accordingly. All columns should add up to the same number of pixels as the
full width of your header graphic.
These software applications will allow you to edit a .psd file:
-
How can I change the link colours in XSite Pro to match my template colours?
For the right or left navigation bars, go to Other > Navigation Bar > Colors. Change the colours there.
For the regular links on the site, go to Other > Scripts and put some CSS similar to this in the top section, or
add it to your existing CSS file:
<style>
a:link {color: brown;}
a:visited {color: orange;}
a:hover {color: green;}
</style>
Colours can also be represented by their hexadecimal number. More information on hexadecimal and named colours.
The following will give you the same results as above:
<style>
a:link {color: #A52A2A;}
a.visited {color: #FFA500;}
a:hover {color: #008000;}
</style>
For the bottom navigation bars (Footer/Main Panel), you can control the link colour only by changing the text
colour for that section using the Page Layout options. So far, I have not been successful in using CSS to change the
colours of the different states of the links in these sections, although it may be possible with some advanced CSS.
For the breadcrumb trail, go to Other > Scripts and put some CSS similar to
this in the top section, or add it to your existing CSS file:
<style>
DIV.BREADCRUMB { font-size: 10pt; color: brown; font-family: Verdana, Sans-Serif; font-weight: normal; text-decoration: none;
}
A.BREADCRUMB { font-size: 10pt; color: brown; font-family: Verdana, Sans-Serif; font-weight: normal; text-decoration: underline;
}
A.BREADCRUMB:visited { color: orange; }
A.BREADCRUMB:hover { color: green }
</style>
More navigation bar ideas here!
-
How should my CSS be formatted in XSite Pro?
Opening and closing tags: When you add CSS elements directly into XSite Pro,
you use Other > Scripts and add it to the top section. The opening tag for that section will be <style>. The
closing tag for that section will be </style>. ALL your CSS will go between those two tags.
On this tips page I show the opening and closing tags with each example of CSS because I don't want to assume that you already
have the opening and closing tags in place. However, if you have already put in the opening and closing tags, do not add
them again when you add new CSS. Just make sure your new element is BETWEEN the existing opening and closing tags.
-
How can I underline my Left or Right Panel Navigation
Links?
For the Left Panel Navigation
Links, there are two options:
a) You can go to Other > Navigation Bar. Then check the "Font Underline" box.
b)
Or you can add some CSS to Other > Scripts (Top Section).
<style>
A.NAVBAR_LEFT
{ text-decoration: underline; }
</style>
For the Right Panel
Navigation Links, you can only underline your links by adding some CSS to Other > Scripts (Top Section).
<style>
A.NAVBAR_RIGHT { text-decoration: underline; }
</style>
Note: If you add CSS for both Right and Left Navigation Panels, it would look like this:
<style>
A.NAVBAR_LEFT { text-decoration: underline; }
A.NAVBAR_RIGHT { text-decoration: underline; }
</style> Here's a nice
tip: add the following code to your CSS and your left hand navigation links will underline when you hover over them. Note the
colon in front of the word hover.
<style>
:hover { text-decoration: underline; }
</style>
-
How can I find the ASCII codes for symbols like copyright, registered sign, angle quotes,
etc.?
XSite Pro has several ASCII characters you can choose from. On the Design tab menu bar, click on the Insert Special Characters icon.
If the symbol isn't available from the Insert Special Characters icon in XSite Pro, you will need to add the ASCII code directly into the
HTML using the Source view.
If you want to find the actual ASCII and HTML Character Entities for many symbols, check out these Web sites: http://www.bbsinc.com/iso8859.html, http://www.intuitive.com/coolweb/entities.html.
| Name |
Symbol |
ASCII |
HTML Character Entity |
| Right angle quote |
» |
» |
» |
| Left angle quote |
« |
« |
« |
| Right double quote |
” |
” |
” |
| Left double quote |
“ |
“ |
“ |
| Middle dot, centered dot |
· |
· |
· |
| Round filled bullet |
• |
• |
• |
| Pound sign |
£ |
£ |
£ |
- I am using the right angle quote on my navigation bar, like this: Marketing »
- The dots and bullets are useful to put in phone numbers instead of dashes, or to separate items
in your header, like this:
Lakeview Cottages · Full Kitchens · Canoe Rentals
- Symbols that you may not have on your keyboard like the pound sign or yen sign, etc. can be
rendered using ASCII codes.
- For your header: To create these kinds of symbols in your graphics program, like Photoshop, you
will need to load some dingbat fonts. Dingbats produce small images instead of letters when you type. You will need to load
several fonts to get all the symbols that are available. If you have WP TypographicalSymbols (a Word Perfect font), you may
have quite a bit of what you'll need. This font works fine in Photoshop.
- How do I create an "Add to Favorites" (Bookmark) link in XSitePro?
On the Design view, right click on the page where you want to insert the link. Choose Script Wizard > Add to Favorites. Type the text you
want the link to read into the "Text for the link" section. It can say "Bookmark This Site," "Add to Favorites," or whatever you choose as
long as it's a recognizable call-to-action for the visitor. You can make the link bold by wrapping some HTML around the token in the Source
view. Example: <strong><<SCRIPT_0000000043>></strong>.
If you want more control over this script, here's another way to do it. Add the following JavaScript to your Other > Scripts tab (top
section before or after any CSS code you already have there).
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function addbookmark()
{
bookmarkurl="http://www.mywebsite.com/"
bookmarktitle="My Website - What I Offer"
if (document.all)
window.external.AddFavorite(bookmarkurl,bookmarktitle)
}
// End -->
</script>
Of course, change the bookmarkurl and the bookmarktitle to your own! Now, wherever you want to add an "Add to Favorites" link, type the
following in the Source view:
<a href="javascript:addbookmark()">Bookmark This Site! (or whatever you want)</a>
Now you have full control over the link. You can change the font. You can use CSS to format the link. You can even wrap the anchor
tag around an image and make the image your "Add to Favorites" link.
- My background image repeats so that I can see part of it more than once. What can I do?
Repeating background images cause some ugly problems and look very unprofessional. I see it often with footers in XSite Pro
templates. It happens when the Web site owner adds more content to the footer than expected by the designer. This pushes the
container holding the background image deeper than the image itself and the image then repeats. A similar thing happens
frequently with headers.
The first step is to make sure that all your panels add up to the width of the header in pixels. For the most part, you can ignore the
padding in this calculation since padding affects the inside of the cell; it doesn't make the cell bigger unless it pushes the contents
(an image, for example) beyond the limits of the cell. Example: the panel is 125px wide, the padding is 20px (which means it takes up
40px in width) and an image inside the panel is 125px...now you could have a problem.
Once the panel widths are correct, try removing text or images that you have added to a panel or table cell. The answer will usually be that something
you have added is pushing the panel or table cell open further than the height or width of the background image, causing it to
repeat. If you fix this, you will fix your problem. One way to get to the root of this is to load your template into a blank Web site
and start adding things from your current Web site one at a time until you see the problem happen. Common culprits are: 1. too many
lines of text and/or large-sized text in a footer, 2. graphics (like banner ads) that are too wide in a panel or too
deep in a footer.
CSS can make this problem go away even when things do get pushed out too far. At least it can mitigate the damage considerably.
You'll need to use the background-repeat element to prevent repeating images. Below are some examples. 1. The first element tells the browser
not to repeat the image at all (in the footer). 2. The second set of elements tell the browser to repeat the background image down, but not
across (in the left panel). 3. You can also create your own class and apply it to table cells holding background images. The .repeat class
below tells the browser to repeat the image across, but not down. Of these three, you will find "no-repeat" to be your most useful
tool in avoiding those unsightly repeating images.
<style>
TD.XSP_FOOTER_PANEL {background-repeat: no-repeat;}
td.XSP_LEFT_PANEL_SPC { background-repeat: repeat-y;}
td.XSP_LEFT_PANEL {background-repeat: repeat-y;}
.repeat {background-repeat: repeat-x;}
</style>
- How can I add a gradient to my left, right and main panels?
Create a gradient image that is about 300 pixels high and about 10 pixels wide. Use a pale colour so your text will show up
well. You want the gradient going from top to bottom so that it fades to white as it goes down. Import the gradient into XSite Pro using
Other > File Manager. Now add the CSS below to Other > Scripts in the top section. Make sure that you add "background-repeat: repeat-x"
or your image will repeat down as well as across.
<style>
TD.XSP_CENTER_PANEL {BACKGROUND-IMAGE: url('gradient.gif'); background-repeat:repeat-x;}
TD.XSP_LEFT_PANEL_SPC {BACKGROUND-IMAGE: url('gradient.gif'); background-repeat:repeat-x;}
TD.XSP_RIGHT_PANEL_SPC {BACKGROUND-IMAGE: url('gradient.gif'); background-repeat:repeat-x;}
</style>
-
Free online tools to add rounded corners, borders and other effects to images.
http://www.online-image-editor.com/
 |
|
With this tool, you can add multiple borders to graphics you want to add to your XSitePro header or template by simply
creating the borders one after another on the same image. This photo of me has three rounded borders: 5px white, 1 px black, 3 px
silver.
http://www.picnik.com
New! Picnik is an awesome online tool that allows you to edit your
images like a pro! You can add rounded edges with a background colour that matches your Web page, crop, resize, rotate, sharpen your
images, change your image into sepia tones, add borders, and do all kinds of great effects and fun stuff. And it's way easier to use than
Photoshop, believe me!
Photoshop® Hints: If you have Photoshop, you can add mulitple strokes one after another to an image using Edit > Stroke. Note: On the
Layers palette in Photoshop the Stroke feature only allows you to add one border to an image, so use the menu option instead. To preserve
your original image, copy it to a new layer and add strokes to the copy only.
- Free Color Picker tool
Ever wanted to find out the Hexadecimal or RGB value for a colour you see on a Web site on your desktop or in a software application? I use
an old, old colour picker that you can't get anymore, so I thought I should look for something more current. Here's what I found: http://www.iconico.com/colorpic/. To me it's overkill for most purposes and more awkward to use than
my old colour picker, but it's fun, has a lot of features and certainly does the job.
To capture a colour, you simply click on the ColorPic box to make sure it is active, then run your cursor over the colour you want to
capture. Click Ctrl-G to grab and add the colour chip to the palette. You also click Ctrl-G on a colour chip to delete it from the palette,
so it's kind of a toggle.
Copy and paste the Hexadecimal or RGB values into Photoshop or XSite Pro and voila! Now you can duplicate any colour you see online or on
your computer.
Hint: To find the RGB values of a colour for XSite Pro, enter the hex value in the Color section in the field that has a "#" in front of it.
The RGB (Red, Green, Blue) values will appear below in the Mixer section.
- How to create your own header
We have created two tutorials for you on creating your own header.
Tutorial #1: Create a Classy Header for Your XSitePro Web Site
Tutorial #2: Use a Simple Filter to Create a Professional Header
- How to create templates that look unique (removing the XSite Pro footprint)
We have created a tip page for you that shows you ways to create unique, professional Web sites using XSite Pro. Click here...
-
How do I decide if a photo or clipart image will work with my header design?
Keep the following ABC's in mind when searching for clipart or photos online, or looking at photos in your personal collection for
use on your site.
A. Arrangement: The main person or animal in the image should be looking straight
ahead or into the centre of the header. Cars, planes, boats and any object that has a "front end," like a teapot's spout, should
also be pointing straight ahead or into the centre of the header. Flipping a clipart image to change its orientation might work, but
flipping a photo will not always work due to shadows and highlights. The photo will just look "wrong."
B. Background: Look for photos with a high degree of contrast between the
background and the main image. While you can crop a photo or clipart image to remove a lot of the background, this option
doesn't always suit your header. You may need to erase the background partially or completely. However, in photos where there is
little contrast between the background and the main image this can be a tricky proposition.
Note: There are special images called "photo objects" that come with a plain white background or "clipping path" so you can easily
extract the image. InZones.com, Clipart.com  and PhotoObjects.net have these, but these sites require a subscription fee. The last two sites are owned by JupiterImages, which also owns Photos.com .
C. Colour: While the colour of things on a clipart image or photo can be changed using the
Hue/Saturation tool in Photoshop, this isn't something you may be prepared to learn. It's best to choose images that are neutral,
pastel or match the colour scheme in your header design. Another option is to design your header and its colour scheme
around the photo you choose.
Tip: Cheap photo sites don't always have the kind or quality of photo you need, but quality photos can be
expensive. Here's a tip for you: check out Web template sites like Template Monster®. Often you can
buy a template with great photos for less than you could buy the photos themselves!
Here are some places to get decent quality, cheap photos ($1 - $5 per photo; no subscription fee, but you may have to buy credits to get
started):
- Tutorial to add a shadow to photos using CSS and a transparent PNG image.
Here is a link to the tutorial. Note that Internet Explorer doesn't play well with this CSS, so you must make sure
your photo is on a white background. Then it will look nice in Internet Explorer, too.
- How do I make printer-friendly pages in XSite Pro?
Thanks to Chris and Hadrian on the XSite Pro Forum for this idea!
Note: This code is only active when printing or using the "Print Preview" option in your browser. The centre panel has been widened to
700px.
<style>
@media print {
TD.XSP_HEADER_PANEL{display: none;}
DIV.XSP_LEFT_PANEL{display: none;}
TD.XSP_LEFT_PANEL{display: none;}
TD.XSP_LEFT_PANEL_SPC{display: none;}
DIV.XSP_RIGHT_PANEL{display: none;}
TD.XSP_RIGHT_PANEL{display: none;}
TD.XSP_RIGHT_PANEL_SPC{display: none;}
TD.XSP_CENTER_PANEL{width: 700px;}
TD.XSP_MAIN_PANEL{body {color: #000000; background: #ffffff;
font-family: verdana, arial, sans-serif; font-size: 10pt; width: 700px; }
a {text-decoration: underline; color: #0000ff;}
TD.XSP_MAIN_PANEL_FOOTER{display: none;}
TD.XSP_FOOTER_PANEL{display: none;}
}
</style>
You can alternatively add this code (between the style tags above) to an external CSS file (e.g., print.css), but when you make changes to
it, you will need to remember to upload it to your server again. And don't forget to link to it in Other > Scripts (top section), like
this: <link rel="stylesheet" type="text/css" href="print.css" media="print">.
I am using this code on XSite Pro Designs. This Web page is long, so, to save a tree, just use "Print Preview" to see what a printer-friendly
page looks like.
- How to upload PDF's and other files to your XSite Pro Web site.
To upload PDF's and other files, like MP3's, video files, etc. to your XSite Pro Web site, go to Other > File Manager, click
Add and browse to find the file on your hard drive. Next time you upload your pages, the PDF will get uploaded, too. Now simply link to the
file from your Web page like this <a href="myfreereport.pdf">Click here</a> to download My Free Report. Choose Insert Link >
Other FIles and locate your PDF in the list.
If you want to show an image of your PDF, create a screen capture and resize it in a graphics editor like Photoshop. You can also open PDF
files in Photshop CS2 (not sure if this worked in earlier versions) and extract images or the cover page and save that as an image. Make sure
you resize it so it loads quickly.
Add a link to the PDF from the image. Include a text link to the PDF to make your page more user friendly.
<a href="myfreereport.pdf"><src img="myfreereport.jpg"></a>
<br>
<a href="myfreereport.pdf">Click here</a> to download My Free Report.
Want to make your links more SEO-friendly? Try this:
<a href="keywords.pdf"><src img="keywords.jpg"></a>
<br>
Download My Free Report on <a href="keywords.pdf">keywords</a>.
Replace "keywords" with YOUR keywords, like this:
<a href="puppy-training.pdf"><src img="puppy-training.jpg"></a>
<br>
Download My Free Report on <a href="puppy-training.pdf">puppy training</a>.
Tip: You might also want to give your visitors more explicit instructions like, "Right click and Save As or Save Target As
to save My Free Report to your hard drive." You might also want to put a link to the application people will need in order to access your
file, e.g. Adobe Reader®, Windows Media Player®, etc. Often the company will allow you to use a small image for linking purposes, so check
their site.
Here's the page to get logos for Adobe Reader.
Here's the page to get logos for Windows Media Player.
- How to add a hover effect to your navigation links using CSS.
a) Add the following code to your CSS and all your left hand navigation links will underline when you hover over
them. Note the colon in front of the word hover. Test link. Note: This effect only works in Internet Explorer.
IMPORTANT: to use this effect, do NOT select "Underline" in Other > Navigation Bar in XSite Pro. If you do this, your links will be
underlined all the time, not just on hover.
<style>
:hover
{text-decoration: underline;}
</style>
b) Add the following code to your CSS and all your left hand navigation links will highlight when you hover over
them. Note the colon in front of the word hover. In the example below, the links will show a light blue highlight. Test link. Note: This effect only works in Internet
Explorer.
<style>
:hover {background-color:
#a7acf6;}
</style>
More XSite Pro Tips and Tricks Here!
Click here for more information on XSitePro
|
