XSitePro Website Design Software Message Board

Hello everybody,

I want to place borders around each of the panels in a website.
I've found how to do this when I did a search on the forum....

However, my questions is as follows:
- how do I create rounded corners instead of square corners on the border?
- how do I create a space between each of the borders so that each border is not up against the border around the next panel?

I tried to attach a screenshot to show what I mean but it failed....drats...

Appreciate your help...

Regards

Greg

You can do it with the CSS border radius property.

Let's say you want a border with rounded corners around the web pages on your XSite Pro website.

Add this script in Other --> Global Scripts --> In the HEAD section of the page:

Note that this doesn't work with older versions of Internet Explorer.

This can also be done this with various panel areas in XSite Pro and with internal tables.

_________________
XSitePro runs great on HostGator (WordPress does, too)

CopyWolf, Have you tested this in IE9? If so can you post a link, please. I find that I have to change the DOCTYPE to get border-radius to work in IE9.

_________________
Andrea Wilson

1. Custom XSitePro Templates. XSitePro Consulting and Training. FREE TIPS!

2. Off-the-Shelf XSitePro Templates! Versatile designs. Easy to manage and maintain!

3. AllWebMenus Pro and XSitePro Work Perfectly Together! NEW!

I haven't tested it in IE with XSite Pro, although it works on WordPress pages. (It seems that most of my work of late is WordPress.)
What DOCTYPE do you use with XSite Pro?

Full disclosure: In most cases with XSite Pro, I just create a top image and bottom image with rounded corners and use these. It's a lot more work but it works in all browsers.

For the folks out there who may be wondering about this, here's an example of using this technique:
http://www.x-rayphantom.com/

_________________
XSitePro runs great on HostGator (WordPress does, too)

Here's something I was writing up as a future tip, CopyWolf...

Now that Internet Explorer 9 supports border-radius, we have the option of applying it to tables, table cells, divs, images, etc. in XSitePro. However, the default DOCTYPE in XSitePro renders your site in "Quirks Mode" in the browsers. Default XSitePro DOCTYPE:Whereas Internet Explorer 9 requires "Standards Mode" to render border-radius. Here's the most basic DOCTYPE that supports "Standards Mode":But there are caveats!

1. XSitePro support does not like you adding a DOCTYPE which supersedes the one that comes with XSitePro. I say supersedes, not overwrites, because you can't overwrite the default DOCTYPE. When you add a DOCTYPE to Other > Global Scripts > "Before anything else in the file," your DOCTYPE will appear BEFORE the default one (and thus it will be the one the browsers use), however, the default DOCTYPE is still there (not good practice). So, do this at your own risk!

2. Because your site will now be rendered in "Standards Mode," some things in XSitePro may no longer work the way you are used to them working. So, test your site well and check it in all browsers.

_________________
Andrea Wilson

1. Custom XSitePro Templates. XSitePro Consulting and Training. FREE TIPS!

2. Off-the-Shelf XSitePro Templates! Versatile designs. Easy to manage and maintain!

3. AllWebMenus Pro and XSitePro Work Perfectly Together! NEW!