source: GTP-Internal/trunk/Webpage/NOF/gtp_webpage/Styles/GameTools1/template/siteStylePreview.xsl @ 1510

Revision 1510, 15.3 KB checked in by giegl, 18 years ago (diff)

GTP webpage - News redesign (images & style) WIP
Line 
1<?xml version="1.0" encoding="ISO-8859-1"?>
2
3
4<xsl:stylesheet version="1.0"
5  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
6
7<xsl:import href="siteStyle.xsl"/>
8<xsl:output method="html" />
9<xsl:strip-space elements="*" />
10
11<xsl:template match="SiteStyle">
12<html>
13<head>
14<link rel="stylesheet" href="display.css" type="text/css" />
15
16
17<script>
18
19  function NOF_Menu(){}
20  function NOF_Main_Menu(){}
21  function NOF_Menu_Item(){}
22  function NOF_Menu_Button(){}
23  function preLoad(){};
24  function F_loadRollover(){};
25  function F_roll(){}
26
27
28  //Get the absolute path to navabar script
29  var fsiApp = new ActiveXObject("FSI.FSIApplication.9000000.0");
30  document.write("&lt;script language='javascript' src='" + fsiApp.AppDirectory + "NetObjects System/rollover.js'&gt;&lt;\/script&gt;" );
31  fsiApp = null; 
32     
33  /**
34  * Move site style elements when a decorative style has been choosed.
35  */
36  function handleStyleElements() {
37 
38    //Move banner into decorator
39    if (document.getElementById("bannerContainer")) {
40      document.getElementById("bannerContainer").innerHTML = document.getElementById("defaultBanner").innerHTML;
41      document.getElementById("defaultBanner").innerHTML =  "";
42    } else if (typeof (isDecorator) != "undefined" &amp;&amp; isDecorator ) {
43      document.getElementById("defaultBanner").innerHTML =  "";
44    }
45   
46    //Move page content
47    if (typeof (topOffset) != "undefined" &amp;&amp;  typeof (leftOffset) != "undefined") {
48      document.getElementById("pageContainer").style.position = "absolute";
49      document.getElementById("pageContainer").style.top      = topOffset + "px";
50      document.getElementById("pageContainer").style.left     = leftOffset + "px";                 
51    }
52   
53    //If decorator style includes a navbar.
54    if (document.getElementById("navbarContainer")){
55        var container = document.getElementById("navbarContainer");
56        if ( container.type == "" ||  container.type == "vertical") {
57          container.innerHTML = document.getElementById("defaultNavbarVertical").innerHTML;           
58        }
59        else if (container.type == "horizontal") {
60          container.innerHTML = document.getElementById("defaultNavbarHorizontal").innerHTML;           
61        }     
62       
63        removeNavbar("defaultNavbarVertical");
64        removeNavbar("defaultNavbarHorizontal");
65    } else //No decorative styles
66      removeNavbar("defaultNavbarHorizontal");   
67  } 
68 
69  function removeNavbar(navbarId) {
70      document.getElementById(navbarId).innerHTML = "";               
71  }
72</script>
73</head>
74<style type="text/css">
75body {
76  margin: 10px;
77}
78
79.dataList { 
80  font-family: Verdana, Arial, Helvetica, sans-serif;
81  font-size: 10px;
82  font-weight: bold;
83  vertical-align: text-top;
84  white-space: nowrap;         
85}
86</style>
87
88<style ID="NOF_STYLE_SHEET">
89.NavigationButton2_1 {width:130px; height:24px; font-face:Trebuchet MS; font-size:9; font-color:#ffffff; background-color:#338c82; font-weight: bold; cursor:hand; text-decoration:none;}
90.NavigationButton2_1Hover {width:130px; height:24px; font-face:Trebuchet MS; font-size:6; font-color:#ff66ff; background-color:#338c82; font-weight: bold; cursor:hand; text-decoration:none;}
91
92.NavigationButton2_2 {width:130px; height:24px; font-face:Trebuchet MS; font-size:9; font-color:#ffffff; background-color:#338c82; font-weight: bold; cursor:hand; text-decoration:none;}
93.NavigationButton2_2Hover {width:130px; height:24px; font-face:Trebuchet MS; font-size:6; font-color:#ff66ff; background-color:#338c82; font-weight: bold; cursor:hand; text-decoration:none;}
94
95.NavigationButton2_3 {width:130px; height:24px; font-face:Trebuchet MS; font-size:9; font-color:#ffffff; background-color:#338c82; font-weight: bold; cursor:hand; text-decoration:none;}
96.NavigationButton2_3Hover {width:130px; height:24px; font-face:Trebuchet MS; font-size:6; font-color:#ff66ff; background-color:#338c82; font-weight: bold; cursor:hand; text-decoration:none;}
97
98.NavigationButton2_4 {width:130px; height:24px; font-face:Trebuchet MS; font-size:9; font-color:#ffffff; background-color:#338c82; font-weight: bold; cursor:hand; text-decoration:none;}
99.NavigationButton2_4Hover {width:130px; height:24px; font-face:Trebuchet MS; font-size:6; font-color:#ff66ff; background-color:#338c82; font-weight: bold; cursor:hand; text-decoration:none;}
100
101.NavigationButton2_5 {width:130px; height:24px; font-face:Trebuchet MS; font-size:9; font-color:#ffffff; background-color:#338c82; font-weight: bold; cursor:hand; text-decoration:none;}
102.NavigationButton2_5Hover {width:130px; height:24px; font-face:Trebuchet MS; font-size:6; font-color:#ff66ff; background-color:#338c82; font-weight: bold; cursor:hand; text-decoration:none;}
103
104DIV#NavigationBar2_1LYR {
105position:absolute; visibility:hidden; top:0; left:0; z-index:1;}
106DIV#NavigationBar2_2LYR {
107position:absolute; visibility:hidden; top:0; left:0; z-index:1;
108}
109</style>
110
111<xsl:apply-templates select="Navbar" mode="generate"/>
112
113<body bgcolor="" background="" onload="handleStyleElements()">
114<div id="pageContainer">
115  <TABLE width="600" border="0" cellpadding="0" cellspacing="0">
116    <TR>
117      <TD></TD>
118      <TD><IMG src="labels/spacer.gif" width="20" height="1"/></TD>
119      <TD align="center">
120        <div id="defaultBanner">
121          <xsl:apply-templates select="Banners/Banner[position() = 1]" />
122        </div>
123      </TD>
124      <TD><IMG src="labels/spacer.gif" width="20" height="1"/></TD>
125    </TR>
126    <TR>
127      <TD valign="top">
128        <div id="defaultNavbarHorizontal">
129           <table  border="0" cellspacing="0" cellpadding="0" width="130">
130              <tr valign="top" align="left">
131                  <td width="130" height="24"><a href="#" onMouseOver="F_roll('NavigationButton1',1)" onMouseOut="F_roll('NavigationButton1',0)"><xsl:apply-templates select="Navbar/NavbarState[position() = 1]/Button[position() = 1]/ButtonState[position() = 1]" mode="button1"/></a></td>
132             
133                  <td width="130" height="24"><a href="#" onMouseOver="F_roll('NavigationButton2',1)" onMouseOut="F_roll('NavigationButton2',0)"><xsl:apply-templates select="Navbar/NavbarState[position() = 1]/Button[position() = 1]/ButtonState[position() = 1]" mode="button2"/></a></td>
134             
135                  <td width="130" height="24"><a href="#" onMouseOver="F_roll('NavigationButton3',1)" onMouseOut="F_roll('NavigationButton3',0)"><xsl:apply-templates select="Navbar/NavbarState[position() = 1]/Button[position() = 1]/ButtonState[position() = 1]" mode="button3"/></a></td>
136             
137                  <td width="130" height="24"><a href="#" onMouseOver="F_roll('NavigationButton4',1)" onMouseOut="F_roll('NavigationButton4',0)"><xsl:apply-templates select="Navbar/NavbarState[position() = 1]/Button[position() = 1]/ButtonState[position() = 1]" mode="button4"/></a></td>
138              </tr>                               
139          </table>
140        </div>
141        <div id="defaultNavbarVertical">
142           <table  border="0" cellspacing="0" cellpadding="0" width="130">
143              <tr valign="top" align="left">
144                  <td width="130" height="24"><a href="#" onMouseOver="F_roll('NavigationButton1',1)" onMouseOut="F_roll('NavigationButton1',0)"><xsl:apply-templates select="Navbar/NavbarState[position() = 1]/Button[position() = 1]/ButtonState[position() = 1]" mode="button1"/></a></td>
145              </tr>
146              <tr valign="top" align="left">
147                  <td width="130" height="24"><a href="#" onMouseOver="F_roll('NavigationButton2',1)" onMouseOut="F_roll('NavigationButton2',0)"><xsl:apply-templates select="Navbar/NavbarState[position() = 1]/Button[position() = 1]/ButtonState[position() = 1]" mode="button2"/></a></td>
148              </tr>
149              <tr valign="top" align="left">
150                  <td width="130" height="24"><a href="#" onMouseOver="F_roll('NavigationButton3',1)" onMouseOut="F_roll('NavigationButton3',0)"><xsl:apply-templates select="Navbar/NavbarState[position() = 1]/Button[position() = 1]/ButtonState[position() = 1]" mode="button3"/></a></td>
151              </tr>
152              <tr valign="top" align="left">
153                  <td width="130" height="24"><a href="#" onMouseOver="F_roll('NavigationButton4',1)" onMouseOut="F_roll('NavigationButton4',0)"><xsl:apply-templates select="Navbar/NavbarState[position() = 1]/Button[position() = 1]/ButtonState[position() = 1]" mode="button4"/></a></td>
154              </tr>                               
155          </table>
156        </div>
157       
158      </TD>
159      <TD></TD>
160      <TD valign="top">
161        <TABLE id="layout" border="0" cellspacing="0" cellpadding="0">
162          <TR>
163            <TD><H1>Heading 1</H1>
164              <H3>Heading 3</H3>
165              <P>Lorem ip sum, Dolor sit amet, consectetuer adipiscing elit, sed diam nonum. Lorem ip sum, Dolor sit amet, consectetuer adipiscing elit, sed diam nonum <A href="JavaScript:void(0);">sample link</A>. Lorem ip sum, Dolor sit amet, consectetuer adipiscing elit, sed diam nonum.Lorem ip sum, Dolor sit amet, consectetuer adipiscing elit, sed diam nonum. </P>
166              <H5>Heading 5</H5>
167              <P>Lorem ip sum, Dolor sit amet, consectetuer adipiscing elit, sed diam nonum. Lorem ip sum, Dolor sit amet, consectetuer adipiscing elit, sed diam nonum <A href="JavaScript:void(0);">sample link</A>. Lorem ip sum, Dolor sit amet, consectetuer adipiscing elit, sed diam nonum.Lorem ip sum, Dolor sit amet, consectetuer adipiscing elit, sed diam nonum.</P>
168              <IMG src="" alt="" name="line" width="350" height="2" id="line" border="0"/>
169                <TABLE border="0" cellspacing="0" cellpadding="0">
170                <TR>
171                  <TD align="center"><H4>Heading 4</H4></TD>
172                  <TD><IMG src="labels/spacer.gif" width="50" height="30"/></TD>
173                  <TD align="center"><H4>Heading 4</H4></TD>
174                </TR>
175                <TR>
176                  <TD valign="top">     
177                    <OL>
178                      <LI>Item 1</LI>
179                      <UL>
180                        <LI>Item A</LI>
181                        <LI>Item B</LI>
182                      </UL>
183                      <LI>Item 2</LI>
184                      <LI>Item 3</LI>
185                    </OL></TD>
186                  <TD></TD>
187                  <TD valign="top">
188                    <xsl:apply-templates select="Bullet" mode="preview"/>
189                  </TD>
190                </TR>
191                <TR>
192                  <TD valign="top"></TD>
193                  <TD></TD>
194                  <TD valign="top"></TD>
195                </TR>
196            </TABLE></TD>
197          </TR>
198          <TR>
199            <TD align="center"><p align="center"><font size="-2" face="Arial,Helvetica,Geneva,Sans-serif,sans-serif">[</font><a href="#"><font size="-2" face="Arial,Helvetica,Geneva,Sans-serif,sans-serif">Home</font></a><font size="-2" face="Arial,Helvetica,Geneva,Sans-serif,sans-serif">] [</font><a href="#"><font size="-2" face="Arial,Helvetica,Geneva,Sans-serif,sans-serif">Untitled1</font></a><font size="-2" face="Arial,Helvetica,Geneva,Sans-serif,sans-serif">] [Untitled2] [</font><a href="#"><font size="-2" face="Arial,Helvetica,Geneva,Sans-serif,sans-serif">Untitled3</font></a><font size="-2" face="Arial,Helvetica,Geneva,Sans-serif,sans-serif">] [</font><a href="#"><font size="-2" face="Arial,Helvetica,Geneva,Sans-serif,sans-serif">Untitled4</font></a><font size="-2" face="Arial,Helvetica,Geneva,Sans-serif,sans-serif">]</font></p></TD>
200          </TR>
201        </TABLE></TD>
202      <TD></TD>
203    </TR>
204  </TABLE>
205</div>
206<xsl:apply-templates select="header"/>
207
208</body>
209</html>
210</xsl:template>
211
212
213
214<xsl:template match="Navbar" mode="generate">
215<script>
216 var C_MENU_BORDER = 0
217 var C_MENU_SPACING = 0
218 var C_MENU_BGCOLOR = ""
219 var C_MENU_AUTO_CLOSE = true;
220 new NOF_Menu(
221   new NOF_Main_Menu(new NOF_Menu_Item('NavigationBar2_1', 'vertical', 'slideRight', 130, 0,
222     new NOF_Menu_Button('#','<xsl:value-of select="../Navbar/NavbarState[position() = 1]/Button[position() = 1]/ButtonState[position() = 1]/Image/@path"/>',
223                              '<xsl:value-of select="./NavbarState[position() = 1]/Button[position() = 1]/ButtonState[position() = 2]/Image/@path"/>',
224        new NOF_Menu_Item('NavigationBar2_2',  'vertical', 'fadeRight', 130, 0,         
225          new NOF_Menu_Button('#','<xsl:value-of select="./NavbarState[position() = 1]/Button[position() = 1]/ButtonState[position() = 1]/Image/@path"/>',
226                                  '<xsl:value-of select="./NavbarState[position() = 1]/Button[position() = 1]/ButtonState[position() = 2]/Image/@path"/>'))),
227        new NOF_Menu_Button('#','<xsl:value-of select="./NavbarState[position() = 1]/Button[position() = 1]/ButtonState[position() = 1]/Image/@path"/>',
228                                '<xsl:value-of select="./NavbarState[position() = 1]/Button[position() = 1]/ButtonState[position() = 2]/Image/@path"/>'))));
229                               
230   function preLoad(obj, path, array) {   
231   
232      var offsetX = 130; // Define submenu offsetX
233      var offsetY = 0; // Define submenu offsetX
234     
235      if (document.getElementById("navbarContainer")){
236        var container = document.getElementById("navbarContainer");
237        if (typeof(container.type) != "undefined" &amp;&amp; container.type == "horizontal") {                     
238          offsetX = 0;
239          offsetY = 40;
240        } else
241          container.type = "vertical";
242      }
243   
244     if (array == 0)
245      F_loadRollover(obj, path, 0)
246     else     
247      F_loadRollover(obj, path, new Array('NavigationBar2_1', 'vertical', 'slideRight', offsetX, offsetY));     
248   }
249
250</script> 
251</xsl:template>
252
253<xsl:template match="ButtonState" mode="button1">
254  <img id="NavigationButton1" name="NavigationButton1"
255  src="{../ButtonState[position() = 3 ]/Image/@path}"
256  onLoad="preLoad(this,'{../ButtonState[position() = 4]/Image/@path}',0)" border="0" alt="Button" title="Button" />
257</xsl:template>
258
259<xsl:template match="ButtonState" mode="button2">
260  <img id="NavigationButton2" name="NavigationButton2"
261  src="{//Navbar/NavbarState/Button/ButtonState[position() = 1]/Image/@path}"
262  onLoad="preLoad(this,'{../ButtonState[position() = 2]/Image/@path}', new Array('NavigationBar4_1', 'vertical', 'slideRight', 130, 0))" border="0" alt="Button" title="Button" /> 
263</xsl:template>
264
265<xsl:template match="ButtonState" mode="button3">
266  <img id="NavigationButton3" name="NavigationButton3"
267  src="{../ButtonState[position() = 1]/Image/@path}"
268  onLoad="preLoad(this,'{../ButtonState[position() = 2]/Image/@path}',0)" border="0" alt="Button" title="Button" />
269</xsl:template>
270
271<xsl:template match="ButtonState" mode="button4">
272  <img id="NavigationButton4" name="NavigationButton4"
273  src="{../ButtonState[position() = 1]/Image/@path}"
274  onLoad="preLoad(this,'{../ButtonState[position() = 2]/Image/@path}',0)" border="0" alt="Button" title="Button" />
275</xsl:template>
276
277<xsl:template match="Banner"> 
278  <div id="Banner.Default">
279  <xsl:choose>         
280    <xsl:when test="@type = 'Image'">     
281        <img src="{./Image/@path}" />
282    </xsl:when>
283    <xsl:otherwise>   
284      <div style="{./Font/@css}"><img src="labels/spacer.gif" width="1" height="1">Text Banner</img></div>
285    </xsl:otherwise>
286   </xsl:choose>
287  </div>     
288</xsl:template>
289
290
291</xsl:stylesheet>               
Note: See TracBrowser for help on using the repository browser.