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.
-
Firstly, you need to find you .css file in your web
server account.
-
If you have not altered this, it will be named
xsp.css
-
The file will be located, along with all your other
site files in public_html, this is easy to find
using file manager.
-
Click on the file name, then click edit file on
your menu.
- The new window opens up with an editing box
inside.
- 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.
- Find all the sentences with fixed widths, like this
width: 800px
- 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.
BODY{MARGIN-LEFT:
0px;MARGIN-RIGHT: 0px;MARGIN-TOP:
0px;MARGIN-BOTTOM: 0px;BACKGROUND-COLOR:
#c2c3ea;FONT-SIZE: 10pt; COLOR: #000000;
FONT-FAMILY: Verdana, Sans-Serif;}
TABLE.XSP_OUTLINE{HEIGHT:
100%;WIDTH:
90%;}
TD.XSP_HEADER_PANEL{BACKGROUND-COLOR: #c2c3ea;
WIDTH:
90%;HEIGHT: 155px;PADDING:
1px;FONT-SIZE: 10pt; COLOR: #000000;
FONT-FAMILY: Verdana,
Sans-Serif;VERTICAL-ALIGN: top;}
TD.XSP_HEADER_PANEL TABLE{FONT-SIZE: 10pt; COLOR:
#000000; FONT-FAMILY: Verdana, Sans-Serif;}
TD.XSP_LEFT_PANEL_SPC{VERTICAL-ALIGN:
top;TEXT-ALIGN: left;HEIGHT: 100%;
WIDTH:
14%; BACKGROUND-COLOR:
#DCDCDC;PADDING: 3px;}
TD.XSP_LEFT_PANEL{VERTICAL-ALIGN: top;TEXT-ALIGN:
left;HEIGHT: 1px; WIDTH: 14%;
BACKGROUND-COLOR: #DCDCDC;PADDING: 0px;}
DIV.XSP_LEFT_PANEL{VERTICAL-ALIGN: top;TEXT-ALIGN:
left;WIDTH:
100%; FONT-SIZE: 8pt; COLOR:
#000000; FONT-FAMILY: Verdana, Sans-Serif; PADDING:
0px;}
DIV.XSP_LEFT_PANEL table{FONT-SIZE: 8pt; COLOR:
#000000; FONT-FAMILY: Verdana, Sans-Serif;}
TD.XSP_CENTER_PANEL{HEIGHT: 100%;
WIDTH:
74%; BACKGROUND-COLOR:
#FFFFFF;}
TABLE.XSP_CENTER_PANEL{HEIGHT:
100%;WIDTH:
100%;}
TD.XSP_MAIN_PANEL{VERTICAL-ALIGN: top;TEXT-ALIGN:
left;HEIGHT: 100%; WIDTH: 100%;FONT-SIZE:
10pt; COLOR: #000000; FONT-FAMILY: Verdana,
Sans-Serif;PADDING: 3px;}
TD.XSP_MAIN_PANEL TABLE{FONT-SIZE: 10pt; COLOR:
#000000; FONT-FAMILY: Verdana, Sans-Serif;}
TD.XSP_MAIN_PANEL_FOOTER{VERTICAL-ALIGN:
middle;TEXT-ALIGN: center;HEIGHT: 20px; WIDTH:
100%;FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY:
Verdana, Sans-Serif;PADDING: 5px;}
TD.XSP_MAIN_PANEL_FOOTER TABLE{FONT-SIZE: 8pt;
COLOR: #000000; FONT-FAMILY: Verdana,
Sans-Serif;}
TD.XSP_RIGHT_PANEL_SPC{VERTICAL-ALIGN:
top;TEXT-ALIGN: left;HEIGHT: 100%;
WIDTH:
12%; BACKGROUND-COLOR:
#F5F5F5;PADDING: 1px;}
TD.XSP_RIGHT_PANEL{VERTICAL-ALIGN: top;TEXT-ALIGN:
left;HEIGHT: 1px; WIDTH: 12%;
BACKGROUND-COLOR: #F5F5F5;PADDING: 0px;}
DIV.XSP_RIGHT_PANEL{VERTICAL-ALIGN: top;TEXT-ALIGN:
left;WIDTH:
100%; FONT-SIZE: 8pt; COLOR:
#000000; FONT-FAMILY: Verdana, Sans-Serif; PADDING:
0px;}
DIV.XSP_RIGHT_PANEL TABLE{FONT-SIZE: 8pt; COLOR:
#000000; FONT-FAMILY: Verdana, Sans-Serif;}
TD.XSP_FOOTER_PANEL{VERTICAL-ALIGN:
middle;TEXT-ALIGN: center;HEIGHT: 20px;
WIDTH:
90%; FONT-SIZE: 8pt; COLOR:
#FFFFFF; FONT-FAMILY: Verdana, Sans-Serif;
PADDING: 5px;BACKGROUND-COLOR: #C0C0C0;}
TD.XSP_FOOTER_PANEL TABLE{FONT-SIZE: 9pt; COLOR:
#0000FF; FONT-FAMILY: Verdana, Sans-Serif; }
TD.NAVBAR_LEFT { font-size: 8pt; color: #0000FF;
font-family: verdana; font-weight: normal;
text-decoration: none; }
A.NAVBAR_LEFT { font-size: 8pt; color: #0000FF;
font-family: Verdana, Sans-Serif; font-weight:
bold; text-decoration: underline; }
A.NAVBAR_LEFT:visited { color:#8B4513; }
A.NAVBAR_LEFT:hover { color:#191970 }
DIV.BREADCRUMB { font-size: 8pt; color: #696969;
font-family: Verdana, Sans-Serif; font-weight:
normal; text-decoration: none; }
A.BREADCRUMB { font-size: 8pt; color: #696969;
font-family: Verdana, Sans-Serif; font-weight:
normal; text-decoration: underline; }
A.BREADCRUMB:visited { color:#BC8F8F; }
A.BREADCRUMB:hover { color:#0000FF } |
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.
| 