Custom List Styles in XSitePro

Change a bulleted list into a check marked list.

Bulleted lists are useful to highlight points on a page. But they are very common and not very attention grabbing. Spice them up by changing an ordinary bulleted list into a check mark list.

	Create your list in NotePad
	In XSitePro2, Right click and go to Design Wizards > Bulleted List
	You can then choose from one of the pre made checks, bullets, arrows or hands. Or you can choose Other and select one of your own list icons (we chose our logo).
	In the top half of the screen you can enter each list item.
	Select and copy each line from NotePad into a new line in the top section.
	When done, insert your list.
	That's it. It IS just that easy.

Pretty easy huh? BUT if you check the source code, you will see it used a table to put the checks next to the list items. Tables are fine I suppose, but really unneeded and out dated, plus it is pretty flunky to update it your list if you want to add more items.

With a very little bit of CSS we can get our list set up nicely without using table to add images for the bullets.

How can I add checkmark to items in a list?

If you only have 1 list and want it checked, you can do it quickly and easily in the Source tab.

• Add your checkmark image to your Resource Manager so it will be available to your when needed.
• In XSitePro create your bulleted list as usual.
• When done, go to the Source Tab and look for your first bulleted item.
• It will have an open tag just above it looking like <ul>. This is what we are going to change.
• highlight that opening tag and replace it with the following code:

<ul style="list-style-image: url(images/check.png);>

• Change check.png to the name of your custom image.
• Now go back to Design and see you have a custom checkmark list.

Neat huh?

How can I add checkmark to all lists in a site?

If you only have several lists on a site and want the same custom style applied to every one of them, you can add some CSS code to quickly modify them.

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>
ul {
list-style-image: url(images/check.png);>
}
</style>

The above code will affect every bulleted list on your entire site. Just change check.png to the name of your image. Short and simple. Sweet!