PageBuilder CSS Style Advanced EditorThis webpage is a demo for using a CSS style sheet as a PageBuilder advanced editing method.This demo is basically a supplement to my PB AE Style Method tutorial. Here I use the PB AE Script method tags to block-out the PageBuilder built-in body tag of the "Grey" page style I chose to open the basic editor screen; and, extend the <head> tag to contain a CSS style sheet with the style definitions for body bgcolor, background image, and link colors. This document has NO HTML mark-up attributes in the body tag – just a simple beginning <body> tag. All body style for this document is in the CSS style sheet within the head tag of this document, except for the exception noted below for the MSN-TV LBB 2.8 - 2.8.2 updates!Note that I do not recomment using my PB AE Style method with this style sheet method because there's the quirky nuisance of the PB AE Style method being a "closed basic editor screen" method - you have to disable the style and comment tags to open the basic editor screen, as I explained in my tutorial above. Which makes this method somewhat unpopular when used with the style method AE by all but the most purist experts among us! I don't think having to take a few seconds to disable the style and comment tag is much trouble, but others disdain closed editor PB AE methods. I suggest that using either the PB AE Script or Defeat methods is the easiest way to use CSS style sheets for PageBuilder advanced editing! Here's the simple code I used in the PageBuilder title text box: PageBuilder CSS Style Advanced Editor</title> <script> <!-- /* Here's the code I placed in an "Add text" box at the top of this document: */ --> </script> <style type="text/css"> <!-- body {color: white; background-color: blue; background-image: url(http://community-2.webtv.net/jaxred/images/scrapbookFiles/importD44.gif);} a:link {color: ffd700;} a:visited {color: white;} --> </style> </head> <body> <br> <div align="center"> <noframes> <font color="red"> <limittext value="Warning: JavaScript Bug Alert – Please Reload (Cmd-R)!"> </font> </noframes> </div> <h1 align="center"> <font color="#ffd700">PageBuilder CSS Style Advanced Editor</font> </h1> <p> <table> <tr> <td> See in the code how this is a CSS style sheet with body tag style definitions in the style tag rather than in body tag attributes? This is common style sheet practice, and is the basic mechanics for XHTML compliant webpages. Basically, XHTML uses external linked stylesheets, or local style sheets to define the properties of each element in a document, with no HTML tag atributes and a minimum of inline style code. Note how I use BOTH a "background-color" and "background-image" in the stylesheet code, which is standard practice! Why? Because sometimes a background image is slow to load so you need a background color that's similar to the color of the background image so the browser will load it instantly to display the webpage content while the background image continues to load! The closer the chosen background color is to the background image color, the less change effect will be noticed when the webpage background image graphic fully loads! But, there's a glitch in our LBB programming with the 2.8 - 2.8.2 upgrades that will not allow the document body text color to be defined in the style sheet; ie: with these LBB upgrade levels, you must still use the "text" attribute in the body tag, or else the document body text will default to black text; which, with the background I'm using in the code above, would not be readable! The code I show above must be modified as shown below so this page will work correctly in LBB browser upgrades 2.8 - 2.8.2. The LBB 2.9 and 2.9.1 upgrades resolves this problem, so the above code works OK with the latest upgrdes. The modified code for the LBB 2.8 - 2.8.2 upgrades is as follows: */ --> </script> <style type="text/css"> <!-- body {background-color: blue; background-image: url(http://community-2.webtv.net/jaxred/images/scrapbookFiles/importD44.gif);} a:link {color: ffd700;} a:visited {color: white;} --> </style> </head> <body text="#FFFFFF"> <br> <div align="center"> <noframes> <font color="red"> <limittext value="Warning: JavaScript Bug Alert – Please Reload (Cmd-R)!"> </font> </noframes> </div> <h1 align="center"> <font color="#ffd700">PageBuilder CSS Style Advanced Editor</font> </h1> <p> <table> <tr> <td> Note that all I did was move the style sheet document text color property and value definition to the body tag using the HTML "text" attribute. This workaround is kinda tacky and really defeats the pupose of using the style sheet. This upgrade level related glitch and the fact that this AE method is a "closed" editor method detracts from the versatility of using CSS stylesheets in an AE method for PageBuilder webpages. However, to cover all browsers, I suggest that you could use BOTH the stylesheet (text) color definition AND the body tag "text" attribute for LBB 2.8 - 2.8.2 upgrade level compatability! Now, that is tacky, but will work OK! And, you will get warnings about these syntax errors in the webpage validators! Note: If you use must use this PB AE Style method, you must use two (2) style tags in the head tag of this document – one style tag for the AE tags that enclose and block-out the built-in PageBuilder page style body tag, and another style tag to define the body tag style! Why? Because for some unknown reason it's necessary if you want to load an external background image with a stylesheet in an extended head tag of a PageBuilder webpage. I couldn't load the background image from my scrapbook until I used the two separate style tags as shown in the code above! But, I could change the background color by using one style tag; ie: by following the style multiline comment with my "background-color" style definition. This is a quirky nuance I suggest you avoid by using separate style tags as shown above. It's perfectly legal – you can have as many separate style sheets as you like in the head tag of a document; or anywhere else in the document, just so your style code is placed ahead of the HTML elements that the style sheet defines! OK, folks; that's about it for the PB AE Style Method! Pretty simple and neat, right? Let us know what else you find out about using this method. Post your comments in the PageBuilder NG's! Thanks for visiting my webpage, folks! Have a nice day! My best wishes to all PageBuilders, their families, and friends!
JaxRed |
|
|
| |
|
|
||
|
|
||
|
|
||