XSitePro Website Design Software Message Board

The online forum dedicated to XSitePro users. Get help with website design in general and using this popular and incredibly powerful website software
It is currently Mon May 20, 2013 6:43 am

View unanswered posts | View active topics


Board index » XSitePro » Technical Discussion

All times are UTC - 7 hours




Post new topic Reply to topic  Page 1 of 1
  [ 8 posts ] 
  Print view Previous topic | Next topic 
Author Message
MikeJen
PostPosted: Sat Apr 28, 2012 7:32 pm 
Offline

Joined: Sat Jul 23, 2011 5:39 am
Posts: 48
Hi XSitePro experts :wink:

I spend a whole day on this issue (because I'm not good at css...) so I hope someone will take a quick look at my code below.

I want to style my TOS, Privacy Policy etc. so that both the page-margin and <p>, <h1>, <h2> etc. are different from the rest of the pages on my site (but without having to insert extra code in front of each h1, h2 etc).

I created a class named "specialpages" In the HEAD section of the page in Global Scripts:

Code:
.specialpages p,h1,h2 {LINE-HEIGHT: 1.5em; FONT-FAMILY: etc. etc.}

body.specialpages {MARGIN-LEFT: 300px; MARGIN-RIGHT: etc.}

.specialpages h1 {TEXT-ALIGN: center; etc. etc.}

.specialpages h2 {FONT-SIZE: 15px; etc. etc.}


And then I have ignored page layout completely (in Advanced Page Settings) for each "special page" and inserted <body class="specialpages"> in Custom Script at the Top of BODY Section (is this the right place? it also works if I put it in HEAD section...).

It works fine, but that doesn't mean that it is the right or best way to do it...
Top
 Profile  
 
ablewebs
PostPosted: Sat Apr 28, 2012 8:12 pm 
Offline
User avatar

Joined: Fri Feb 24, 2006 1:53 pm
Posts: 3443
Location: Vancouver, BC, Canada
If you're going to put the CSS in the Advanced Settings for the special pages, you don't need to create the .specialpages class. You also don't need to "Ignore page layout completely." If you do that, your special pages won't include the template's header, footer or navigation menus, etc. All you have to do is add the appropriate CSS to Advanced Settings > Scripts > HEAD section for each special page. Example:
Code:
<style>
BODY {MARGIN-LEFT: 300px; MARGIN-RIGHT: 300px;}
P {LINE-HEIGHT: 1.5em; FONT-FAMILY: Arial;}
H1 {LINE-HEIGHT: 1.5em; TEXT-ALIGN: center; FONT-FAMILY: Georgia; COLOR: green;}
H2 {LINE-HEIGHT: 1.5em; FONT-FAMILY: Impact; FONT-SIZE: 15px; COLOR: red;}
</style>
This code will over-ride any CSS in the xsitepro_styles.css file as well as any code for the same elements in Global Scripts (because it is placed AFTER any CSS in Global Scripts). The one thing I'm not sure you really want is the margins on the BODY element. That could make the site jump around in the browser as you go from page to page. Perhaps you meant to put the margins (or padding, perhaps) on TD.XSP_MAIN_PANEL instead.

Don't forget to check the box at the bottom of the Advanced Page Settings > Scripts > HEAD section window that says "Include global script."

_________________
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!

Image
Top
 Profile  
 
MikeJen
PostPosted: Sun Apr 29, 2012 5:58 am 
Offline

Joined: Sat Jul 23, 2011 5:39 am
Posts: 48
Thanks for your help Andrea! :wink:

Now, you are the CSS expert here but would it do any harm to do it the way I do because I do want a totally different design for my TOS, Privacy Policy etc.
- no sidebars, footer etc. - that why I choosed the "Ignore page layout completely" (actually I think I would like to keep my header but I don't know how).

1) I thought that keeping my code in one place (in Globla Scripts) would keep my code more clean and easy to maintain. Let's say that I want to change the line-height or font for these special pages - instead of editing each page I would just edit my class in Global Scripts and then all the pages would pick up that style.
I thought that was the best way to do it, but perhaps it is "bad css"?

2) Another thing: Why do I have to put body in front of the .specialpages class to make it work? - h1 and h2 are placed after .specialpages, and that works. Seems strange to me :roll: I have searched for hours for an answer to that question without finding any answer.
Top
 Profile  
 
ablewebs
PostPosted: Sun Apr 29, 2012 8:46 am 
Offline
User avatar

Joined: Fri Feb 24, 2006 1:53 pm
Posts: 3443
Location: Vancouver, BC, Canada
There's no particular right or wrong way to do the CSS as long as it follows the correct syntax and doesn't break the HTML. Whatever works is fine. Since I didn't know your reasoning behind what you did, I came up with the solution that I would likely use.

1. Using Global Scripts is fine, but then, of course, you do have to use classes or ID's. Those classes or ID's then have to be applied to the HTML tags on each page that you want to use them on, which is why you needed to add this tag <BODY class="specialpages"> to each page. Maintenance is more efficient through Global Scripts, though, you're right about that.

The problem with adding <body class="specialpages"> to your special pages is that you create broken HTML: you have two opening <body> tags and only one closing </body> tag. You'll see this if you View Source in the browser. Your method would work fine, however, if you were using Dreamweaver, for instance, because you could access the <BODY> tag directly. But in XSitePro, we can't directly get at some of the HTML.

2. When using .specialpages P, H1, H2, you are saying: any P, H1 or H2 tag that is a child of an element using the class .specialpages will use the attributes in the declaration. P, H1 and H2 are all children of the BODY tag (which uses the .specialpages class). You can't use .specialpages BODY, because <BODY> IS the parent tag, it's not a child tag of anything, i.e., it doesn't HAVE a parent tag that uses the class .specialpages.

BODY.specialpages uses an element type (BODY), plus a class name (specialpages) to ensure that ONLY the BODY tag will use the attributes in the declaration {MARGIN-LEFT: 300px; MARGIN-RIGHT: 300px;}. So any other tag with the class .specialpages will NOT use these attributes.

_________________
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!

Image
Top
 Profile  
 
MikeJen
PostPosted: Mon Apr 30, 2012 3:44 pm 
Offline

Joined: Sat Jul 23, 2011 5:39 am
Posts: 48
Thanks a lot for your explanation Andrea - now I understand! :D

I thought about it... your solution is the best. I removed the class and chose something similar to your first suggestion. Looking at the source code in my browser I realized that it wasn't necessary (at least not in my case) to check the box at the bottom of the Advanced Page Settings > Scripts > HEAD section window that says "Include global script." It just added a lot of unnecessary code.

One thing I wonder about, is why you placed the "BODY {MARGIN-LEFT: 300px; MARGIN-RIGHT: 300px;}" in the HEAD section - shouldn't it be in the "Custom script at the top of the BODY section"? I'm not really sure that I understand the whole thing about "start of the file", "HEAD section", "BODY section" etc. and where to put what ... :roll:

Quote:
The problem with adding <body class="specialpages"> to your special pages is that you create broken HTML: you have two opening <body> tags and only one closing </body> tag.

Now I'm just curious... Couldn't I add </body> in the "Custom script at the bottom of the BODY section" - wouldn't that insert the missing closing </body> tag in my code? (looks like it when I look at the code in my browser).

Thanks again, we are lucky to have you here on this forum. :wink:
Top
 Profile  
 
ablewebs
PostPosted: Mon Apr 30, 2012 4:02 pm 
Offline
User avatar

Joined: Fri Feb 24, 2006 1:53 pm
Posts: 3443
Location: Vancouver, BC, Canada
On-page CSS using <link> or <style> tags should always go in the HEAD section. If you put the <style> tag in the body of a Web page, the browsers might show a flash of unstyled elements before the browser interprets the <style> tag. You can get shifting or flickering of elements if this happens.

Inline CSS can go within the body. Example:
Code:
<table style="border: 3px solid red;">


A web page should only have one set of<body> </body> tags.

_________________
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!

Image
Top
 Profile  
 
MikeJen
PostPosted: Mon Apr 30, 2012 5:03 pm 
Offline

Joined: Sat Jul 23, 2011 5:39 am
Posts: 48
That makes sense :wink: I just thought I could insert "BODY {MARGIN-LEFT: 300px; MARGIN-RIGHT: 300px;}" directly into the "Custom script at the top of the BODY section" without the <style> </style> tags...

Btw. do you use just one pair of <style> </style> tags in "Global scripts - HEAD" where you insert everything, or do you group the different things in several style tags - such as one pair of <style> </style> tags for styling the p, h1, h2, h3 etc., then another pair for classes, another pair for linkstyling and so on? I have all mine in one but it looks kind of messy...

Thanks once more Andrea - sometimes I feel like a monkey behind a keyboard... :roll:
Top
 Profile  
 
ablewebs
PostPosted: Mon Apr 30, 2012 5:08 pm 
Offline
User avatar

Joined: Fri Feb 24, 2006 1:53 pm
Posts: 3443
Location: Vancouver, BC, Canada
Usually you only use one set of style tags, but it won't hurt to have multiple sets.

And you're right, you can't just add BODY {MARGIN-LEFT: 300px; MARGIN-RIGHT: 300px;} without the style tags.

_________________
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!

Image
Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  Page 1 of 1
  [ 8 posts ] 

Board index » XSitePro » Technical Discussion

All times are UTC - 7 hours


Who is online

Users browsing this forum: Bing [Bot] and 0 guests

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB® Forum Software © phpBB Group