Geir, all,
This is the first step to creating a site-wide CSS.
I've created a short version of the CSS file (see site.css) with the
major elements that a webpage might need. This is surely only a draft.
I'll need to work a bit more on table elements and also import
additional styles from drl.css to enable extended presentation
facilities for big docs that go with contribs.
I've also changed the .vsl accordingly (see patch attached). Most
changes concern removing redundant styles, assigning classes to specific
elements, etc.
IMPORTANT NOTE: YOUR HELP NEEDED. The .vsl file now has the link to the
CSS hard-coded into the output HTML code so it only works for HTML page
of one level (currently, for those that are two folder-levels down from
the CSS). This bug can be fixed by adding a relative path variable
instead of the hard-coded path. However, I am new to VSL and not sure
I'll do it the right way. Perhaps, it would be much easier for you.
Let me know what you think of this. I have some specific considerations
of how we could adjust the VSL file and the CSS styles set further, but
we should first decide whether we need it at all :)
Again, any help welcomed!
Best regards,
Nadya Morozova
-----Original Message-----
From: Geir Magnusson Jr. [mailto:[EMAIL PROTECTED]
Sent: Wednesday, August 23, 2006 4:29 PM
To: harmony-dev@incubator.apache.org
Subject: Re: [doc] Intrim solution
Morozova, Nadezhda wrote:
> Geir,
>
> Thanks for your effort in migrating docs to a more stable state inside
> the website. I've been examining your solution, and here are my
> comments:
>
> 1) Nice and quick way to import new docs into the website without
> converting them into XML for internal processing. Never thought of it
:)
>
> 2) Source of resulting file is not optimal because:
> - Doctype declarations, metatags and head content are copied
> from the imported document into the middle of the
> resulting HTML code
> - <body> of the page HTML has a nested <body> of imported
> document
Yep, but has there been any reported bad effects?
> 3) Stylesheet referenced in resulting document is applied to the whole
> page, including the left navigation menu.
Yep.
>
> This last point can be workarounded easily by making minor changes in
> the referenced stylesheet (I could do this and send you a patch).
> However, I don't like this solution and would rather vote for a common
> CSS for the whole website.
Yep!
>
> A major obstacle to having one CSS for the Harmony website is that
> there's no such CSS at the moment! L&F of page content is set in the
> .vsl file that Anakia uses.
> I suggest that we move away from this by reducing .vsl to processing
> only and move out all presentation tags into a Harmony-wide CSS. This
> would help us:
> - reduce file size (and consequently i-net traffic) for Harmony
website:
> you load only one file instead of loading the same styles for each
page
> - reduce effort of integrating more docs into the website: each doc
> references the same stylesheet and is displayed in the same way
> - simplify doc structure: no nested <body> and <meta> elements;
numerous
> <font> tags replaced with a hierarchical HTML tag and class structure
> - clarify website functioning mechanism: distinguish processing macros
> and presentation of resulting output
>
> If the community agrees, I could try and implement this solution.
> That would take a relatively significant amount of time as it would
> include:
> 1) Editing .vsl to remove presentation info and improving structure of
> resulting HTML code
> 2) Creating a .css and testing it to fit existing files and new ones
> 3) Going through all current XML files making up the website to make
> adjustments in <body> content per new CSS requirements (can be done by
a
> script or auto-replacement but still)
The last one I don't understand. Rarely is there any L&F info in the
XML - that's the point of this approach - that the document content -
the XML - is independent of the rendering.
>
> All in all, this seems like a serious effort. Help most welcomed!
>
Sounds good - I wouldn't try to bite it all off at once - I'd start with
seeing what it takes to get a basic CSS applied in the .vsl and start
looking at it from there.
Lets try to do this incrementally, so if we decide not to do it, the
investment is as small as possible.
(IOW, go for it!)
geir
---------------------------------------------------------------------
Terms of use : http://incubator.apache.org/harmony/mailing.html
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
From 72957bcf0c39d6e1de8d985deb9e3c5a1b82e23d Mon Sep 17 00:00:00 2001
From: nmorozov <[EMAIL PROTECTED]>
Date: Thu, 24 Aug 2006 14:23:53 +0400
Subject: [PATCH] Removing presentation info from doc model
---
xdocs/stylesheets/site.vsl | 114 +++++++++++++++++++-------------------------
1 files changed, 48 insertions(+), 66 deletions(-)
diff --git a/xdocs/stylesheets/site.vsl b/xdocs/stylesheets/site.vsl
index 0ef8754..2d51d93 100644
--- a/xdocs/stylesheets/site.vsl
+++ b/xdocs/stylesheets/site.vsl
@@ -16,19 +16,6 @@ limitations under the License.
-->
-<!-- Content Stylesheet for Site -->
-
- ## Defined variables
- #set ($bodybg = "#ffffff")
- #set ($bodyfg = "#000000")
- #set ($bodylink = "#525D76")
- #set ($bannerbg = "#525D76")
- #set ($bannerfg = "#ffffff")
- #set ($subbannerbg = "#828DA6")
- #set ($subbannerfg = "#ffffff")
- #set ($tablethbg = "#039acc")
- #set ($tabletdbg = "#a0ddf0")
-
<!-- start the processing -->
#document()
<!-- end the processing -->
@@ -64,14 +51,13 @@ #end
#if ($value.getAttributeValue("rowspan"))
#set ($rowspan = $value.getAttributeValue("rowspan"))
#end
-<td bgcolor="$tabletdbg" colspan="$!colspan" rowspan="$!rowspan" valign="top"
align="left">
- <font color="#000000" size="-1" face="arial,helvetica,sanserif">
+<td class="TableCell" colspan="$!colspan" rowspan="$!rowspan" >
+
#if ($value.getText().length() != 0 || $value.hasChildren())
$value.getContent()
#else
#end
- </font>
</td>
#end
@@ -82,14 +68,12 @@ #end
#if ($value.getAttributeValue("rowspan"))
#set ($rowspan = $value.getAttributeValue("rowspan"))
#end
-<th bgcolor="$tablethbg" colspan="$!colspan" rowspan="$!rowspan" valign="top"
align="left">
- <font color="#000000" size="-1" face="arial,helvetica,sanserif">
+<th class="TableHeading" colspan="$!colspan" rowspan="$!rowspan">
#if ($value.getText().length() != 0 || $value.hasChildren())
$value.getContent()
#else
#end
- </font>
</th>
#end
@@ -122,36 +106,36 @@ #end
#end
#macro ( source $value)
- <div align="left">
- <table cellspacing="4" cellpadding="0" border="0">
+ <div>
+ <table cellspacing="4" cellpadding="0" >
<tr>
- <td bgcolor="#023264" width="1" height="1"><img src="/images/void.gif"
width="1" height="1" vspace="0" hspace="0" border="0"/></td>
- <td bgcolor="#023264" height="1"><img src="/images/void.gif" width="1"
height="1" vspace="0" hspace="0" border="0"/></td>
- <td bgcolor="#023264" width="1" height="1"><img src="/images/void.gif"
width="1" height="1" vspace="0" hspace="0" border="0"/></td>
+ <td bgcolor="#023264" width="1" height="1"><img src="/images/void.gif"
width="1" height="1" vspace="0" hspace="0" /></td>
+ <td bgcolor="#023264" height="1"><img src="/images/void.gif" width="1"
height="1" vspace="0" hspace="0" /></td>
+ <td bgcolor="#023264" width="1" height="1"><img src="/images/void.gif"
width="1" height="1" vspace="0" hspace="0" /></td>
</tr>
<tr>
- <td bgcolor="#023264" width="1"><img src="/images/void.gif" width="1"
height="1" vspace="0" hspace="0" border="0"/></td>
+ <td bgcolor="#023264" width="1"><img src="/images/void.gif" width="1"
height="1" vspace="0" hspace="0" /></td>
<td bgcolor="#ffffff"><pre>$escape.getText($value.getText())</pre></td>
- <td bgcolor="#023264" width="1"><img src="/images/void.gif" width="1"
height="1" vspace="0" hspace="0" border="0"/></td>
+ <td bgcolor="#023264" width="1"><img src="/images/void.gif" width="1"
height="1" vspace="0" hspace="0" /></td>
</tr>
<tr>
- <td bgcolor="#023264" width="1" height="1"><img src="/images/void.gif"
width="1" height="1" vspace="0" hspace="0" border="0"/></td>
- <td bgcolor="#023264" height="1"><img src="/images/void.gif" width="1"
height="1" vspace="0" hspace="0" border="0"/></td>
- <td bgcolor="#023264" width="1" height="1"><img src="/images/void.gif"
width="1" height="1" vspace="0" hspace="0" border="0"/></td>
+ <td bgcolor="#023264" width="1" height="1"><img src="/images/void.gif"
width="1" height="1" vspace="0" hspace="0" /></td>
+ <td bgcolor="#023264" height="1"><img src="/images/void.gif" width="1"
height="1" vspace="0" hspace="0" /></td>
+ <td bgcolor="#023264" width="1" height="1"><img src="/images/void.gif"
width="1" height="1" vspace="0" hspace="0" /></td>
</tr>
</table>
</div>
#end
#macro ( subsection $subsection)
- <table border="0" cellspacing="0" cellpadding="2" width="100%">
- <tr><td bgcolor="$subbannerbg">
- <font color="$subbannerfg" face="arial,helvetica,sanserif">
- <a
name="$subsection.getAttributeValue("name")"><strong>$subsection.getAttributeValue("name")</strong></a>
- </font>
+
+ <tr><td>
+ <h2>
+ <a
name="$subsection.getAttributeValue("name")">$subsection.getAttributeValue("name")</a>
+ </h2>
</td></tr>
<tr><td>
- <blockquote>
+
#foreach ( $items in $subsection.getChildren() )
#if ($items.getName().equals("img"))
#image ($items)
@@ -163,10 +147,9 @@ #macro ( subsection $subsection)
$items
#end
#end
- </blockquote>
+
</td></tr>
- <tr><td><br/></td></tr>
- </table>
+
#end
@@ -177,14 +160,13 @@ #include($name)
#end
#macro ( section $section)
- <table border="0" cellspacing="0" cellpadding="2" width="100%">
- <tr><td bgcolor="$bannerbg">
- <font color="$bannerfg" face="arial,helvetica,sanserif">
- <a
name="$section.getAttributeValue("name")"><strong>$section.getAttributeValue("name")</strong></a>
- </font>
+ <table cellspacing="0" cellpadding="2" width="100%">
+ <tr><td>
+ <h1>
+ <a
name="$section.getAttributeValue("name")">$section.getAttributeValue("name")</a>
+ </h1>
</td></tr>
<tr><td>
- <blockquote>
#foreach ( $items in $section.getChildren() )
#if ($items.getName().equals("img"))
#image ($items)
@@ -198,10 +180,8 @@ #macro ( section $section)
$items
#end
#end
- </blockquote>
- </p>
+
</td></tr>
- <tr><td><br/></td></tr>
</table>
#end
@@ -211,20 +191,22 @@ #macro ( makeProject )
#set ($menus = $project.getChild("body").getChildren("menu"))
#foreach ( $menu in $menus )
- <p><strong>$menu.getAttributeValue("name")</strong></p>
+ <p
class="menuItem"><strong>$menu.getAttributeValue("name")</strong></p>
<ul>
#foreach ( $item in $menu.getChildren() )
#set ($name = $item.getAttributeValue("name"))
- <li>#projectanchor($name $item.getAttributeValue("href"))</li>
+ <li class="menuItem">#projectanchor($name
$item.getAttributeValue("href"))</li>
- <table>
+
#foreach ( $subitem in $item.getChildren() )
#set ($name = $subitem.getAttributeValue("name"))
- <tr><td>
- #projectanchor($name
$subitem.getAttributeValue("href"))
- </td></tr>
+ <table>
+ <tr><td class="menuItem">
+ #projectanchor($name
$subitem.getAttributeValue("href"))
+ </td></tr>
+ </table>
#end
- </table>
+
#end
</ul>
#end
@@ -233,11 +215,11 @@ #end
#macro (getProjectImage)
#if ($project.getChild("logo"))
#set ( $logoString = $project.getChild("logo").getAttributeValue("href") )
-<td align="left">
+<td>
#if ( $logoString.startsWith("/") )
-<a href="$project.getAttributeValue("href")"><img
src="$relativePath$logoString" alt="$project.getChild("logo").getText()"
border="0"/></a>
+<a href="$project.getAttributeValue("href")"><img
src="$relativePath$logoString" alt="$project.getChild("logo").getText()" /></a>
#else
-<a href="$project.getAttributeValue("href")"><img
src="$relativePath/$logoString" alt="$project.getChild("logo").getText()"
border="0"/></a>
+<a href="$project.getAttributeValue("href")"><img
src="$relativePath/$logoString" alt="$project.getChild("logo").getText()" /></a>
#end
</td>
#end
@@ -280,11 +262,11 @@ #macro (document)
#foreach ( $link in $links )
$link
#end
-
+ <link rel="Stylesheet" type="text/css" href="../../site.css"/>
</head>
- <body bgcolor="$bodybg" text="$bodyfg" link="$bodylink">
- <table border="0" width="100%" cellspacing="0">
+ <body>
+ <table width="100%" cellspacing="0">
<!-- TOP IMAGE -->
<tr>
<td align='LEFT'>
@@ -295,30 +277,30 @@ #macro (document)
<td align='RIGHT'>
<a href="$project.getAttributeValue("href")">
<img
src="http://incubator.apache.org/harmony/images/apache-incubator-logo.png";
- alt="$project.getChild("logo").getText()"
border="0"/></a>
+ alt="$project.getChild("logo").getText()" /></a>
</td>
</tr>
</table>
- <table border="0" width="100%" cellspacing="4">
+ <table width="100%" cellspacing="4">
<tr><td colspan="2">
<hr noshade="" size="1"/>
</td></tr>
<tr>
<!-- LEFT SIDE NAVIGATION -->
- <td width="20%" valign="top" nowrap="true">
+ <td class="menuItem" width="20%" nowrap="true">
<!-- special ACon Logo - leave here for next time -->
<a href="http://www.asia.apachecon.com/";>
<img
src="http://www.apache.org/ads/ApacheCon/234x60-2006-asia.gif";
- border="0" alt="ApacheCon Asia 2006" />
+ alt="ApacheCon Asia 2006" />
</a>
<!-- regular menu -->
#makeProject()
</td>
- <td width="80%" align="left" valign="top">
+ <td width="80%" valign="top">
#set ($allSections =
$root.getChild("body").getChildren("section"))
#foreach ( $section in $allSections )
#section ($section)
@@ -336,7 +318,7 @@ #macro (document)
<hr noshade="" size="1"/>
</td></tr>
<tr><td colspan="2">
- <div align="center"><font color="$bodylink" size="-1"><em>
+ <div align="center"><font color="$bodylink" ><em>
Copyright © 2003-2006, The Apache Software Foundation
</em></font></div>
</td></tr>
--
1.4.1
body {
background-color:#ffffff;
color:#000000;
align:left;
border:0pt;
}
.menuItem {
margin-left:0pt;
vertical-align:top;
padding:0pt;
}
td {
margin-top:4pt;
margin-bottom:4pt;
}
h1 {
font-family: Arial, helvetica, sanserif;
font-weight:bold;
font-size:12pt;
background-color:#525D76;
color:#ffffff;
text-indent:2pt;
margin-left:0pt;
}
h2 {
font-family:Arial, helvetica, sanserif;
font-weight:bold;
font-size:12pt;
background-color:#828DA6;
color:white;
text-indent:2pt;
margin-left:30pt;
}
a:link {
color:#525D76;
}
p {
font:"Times New Roman", Times, serif;
margin-left:30pt;
padding-left:2pt;
}
li {
margin-left:20pt;
padding-left:2pt;
padding-top:1pt;
padding-bottom:1pt;
padding-right:0pt;
}
td.TableCell {
vertical-align:top;
text-align:left;
background-color:#a0ddf0;
}
th.TableHeading {
background-color:#039acc;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
padding:2pt;
}
---------------------------------------------------------------------
Terms of use : http://incubator.apache.org/harmony/mailing.html
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
![http://incubator.apache.org/harmony/images/apache-incubator-logo.png"](http://incubator.apache.org/harmony/images/apache-incubator-logo.png"){kind=link}
![http://www.apache.org/ads/ApacheCon/234x60-2006-asia.gif"](http://www.apache.org/ads/ApacheCon/234x60-2006-asia.gif"){kind=link}