Extend your XSitePro site with CSS

Cascading Style Sheets (CSS) can be used to enhance and improve any site. There are infinite possibilities for you can do with XSitePro and a little CSS knowledge. Below is a collection of CSS tips to enhance your site.

How Do I change the spacing after an H1 tag?

With a little CSS code you can adjust the amount of space below your headlines. This removes the space between headlines and paragraphs.

In XSitePro V1.6 - Click on Other > Scripts > Top Box
In XSitePro V2.x - Click on Other > Global Scripts > In The Head Section of the Page

Enter the code below.

<style>
h1 {
padding-bottom: 0px;
margin-bottom: 0px;
line-height: 8pt;
font-size:24pt;
color: #XXXXXX;}
</style>

You can see how it looks here.
Change values as need to match your site.

Can I indent the first line of all paragraphs?

Yes. With a little bit of CSS coding you can indent the first line of all your paragraphs, to give your site the classical print look.

In XSitePro V1.6 - Click on Other > Scripts > Top Box
In XSitePro V2.x - Click on Other > Global Scripts > In The Head Section of the Page

<style type="text/css">
p {text-indent: 12px}
</style>

Adjust values as needed

I need more space on the left and right, but not top and bottom. Possible?

Many things are possible with CSS. With some CSS you can alter the padding of each side of the main panel of your site, to suit your needs. Force XSitePro to bend to your will with this custom CSS.4

In XSitePro V1.6 - Click on Other > Scripts > Top Box
In XSitePro V2.x - Click on Other > Global Scripts > In The Head Section of the Page

<style>
TD.XSP_CENTER_PANEL {
padding-right: 15px;
padding-left: 15px;
}
</style>

Adjust values as needed

Can I add more fonts to XSitePro?

No. XSitePro does not allow you to import or add new fonts to it's fonts menu. But that does not mean you cannot use alternate non standard fonts. You can add and use any font you want using CSS.

In XSitePro V1.6 - Click on Other > Scripts > Top Box
In XSitePro V2.x - Click on Other > Global Scripts > In The Head Section of the Page

<style>
p {font-family: "Your First Font", NextChoiceFont, FinalFont }
</style>

Replace with the font you want to use, make sure if there are spaces in the font name, you put quotes around the name. No spaces in names, need no quotes.

Change the p tag to h1, h2, h3 or whatever you need.
Or change to body to make all fonts default to that custom font.

First font would be the font you want, second would be your next preferred font if the first is not available.

NOTE: If you use custom fonts, they will only work for people who already have that font installed. If they do not have the font, it will default to Arial or Verdana. So be cautious when using this.

How can I add more space between items in a list?

Use CSS to set the line height and spacing within your lists.

In XSitePro V1.6 - Click on Other > Scripts > Top Box
In XSitePro V2.x - Click on Other > Global Scripts > In The Head Section of the Page

 

<style>
li {
padding-bottom: 12px;
}
</style>

or

<style>
li {
line-height: 200%;
}
</style>