How to show widescreen websites in XSitePro

You may have noticed that this site is optimized for widescreen viewing, yet the basic XSitePro control panel does not show this option.

How is this done Pete?

Here I show you exactly how to achieve widescreen sites with XSitePro, our example uses cpanel hosting, like hostgator.

1. Firstly, you need to find you .css file in your web server account.
2. If you have not altered this, it will be named xsp.css
3. The file will be located, along with all your other site files in public_html, this is easy to find using file manager.
4. Click on the file name, then click edit file on your menu.
5. The new window opens up with an editing box inside.
6. Right click on the text, then save this code to notepad, call this file xsp.cssbak, you can also save this as a copy on your web server.
7. Find all the sentences with fixed widths, like this width: 800px
8. Replace the widths for % rather than px.

Please note, because you will be using percentages, rather than pixels, the total across page must total 100%

I have created a PDF manual from this page, the download link is here. right click, then save as.

Below is the css code from this very site, the percentages are highlighted, and you can see how they add up.

Green on Yellow creates a 90% screen to allow a background margin

Red shows 14% left panel, 74% center panel and 12% right = 100%

Blue shows percentage widths for the whole thing to work together.

Now, all you need to do is experiment with your header, matching the colors to the graphic, and you have your very own XSite Pro created web site that will look great under any screen resolution, including widescreen.

IMPORTANT Keep a copy of your new .css file in a safe place, because if you change any layout settings, the code will all be replaced, this can also happen after an update.

Thanks for stopping by, if any of your friends are interested in buying XSitePro, show them EXtra XSitePro Value.