Menu
▾
▴
SF.net SVN: docbook:[9064] trunk/xsl/webhelp
|
From: <ka...@us...> - 2011-09-18 03:57:06
|
Revision: 9064
http://docbook.svn.sourceforge.net/docbook/?rev=9064&view=rev
Author: kasunbg
Date: 2011-09-18 03:56:59 +0000 (Sun, 18 Sep 2011)
Log Message:
-----------
UI improvements.
Moved search highligher to search tab.
Added nice icons for navigation buttons etc.
Removed footer navigation
Corrected tree colorings
Overall, some css magic
Modified Paths:
--------------
trunk/xsl/webhelp/template/common/css/positioning.css
trunk/xsl/webhelp/template/common/main.js
trunk/xsl/webhelp/xsl/webhelp.xsl
Added Paths:
-----------
trunk/xsl/webhelp/template/common/css/ie.css
trunk/xsl/webhelp/template/common/images/main_bg_fade.png
trunk/xsl/webhelp/template/common/images/next-arrow.png
trunk/xsl/webhelp/template/common/images/previous-arrow.png
trunk/xsl/webhelp/template/common/images/sidebar.png
Added: trunk/xsl/webhelp/template/common/css/ie.css
===================================================================
--- trunk/xsl/webhelp/template/common/css/ie.css (rev 0)
+++ trunk/xsl/webhelp/template/common/css/ie.css 2011-09-18 03:56:59 UTC (rev 9064)
@@ -0,0 +1,13 @@
+.statustext{
+ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)
+ progid:DXImageTransform.Microsoft.BasicImage(opacity=.5);
+ width: 100%;
+ height: 30px;
+ right: -5px;
+ top:105px;
+ /* left: 280px; */ /* change to -12px; when sidebar is collapsed */
+}
+
+body #content{
+ padding-top: 136px;
+}
Property changes on: trunk/xsl/webhelp/template/common/css/ie.css
___________________________________________________________________
Added: svn:executable
+ *
Modified: trunk/xsl/webhelp/template/common/css/positioning.css
===================================================================
--- trunk/xsl/webhelp/template/common/css/positioning.css 2011-09-16 19:51:38 UTC (rev 9063)
+++ trunk/xsl/webhelp/template/common/css/positioning.css 2011-09-18 03:56:59 UTC (rev 9064)
@@ -1,10 +1,29 @@
+tr th .added { color: #E6E6FA; }
+tr th .changed {color: #99ff99; }
+div.added tr, div.added { background-color: #E6E6FA; }
+div.deleted tr, div.deleted { text-decoration: line-through;
+ background-color: #FF7F7F; }
+div.changed tr, div.changed { background-color: #99ff99; }
+div.off { }
+
+span.added { background-color: #E6E6FA; }
+span.deleted { text-decoration: line-through;
+ background-color: #FF7F7F; }
+span.changed { background-color: #99ff99; }
+span.off { }
+
+
body { font: 12px Verdana, Geneva, sans-serif; }
p, ul, ol, li { font: 10pt Verdana, Geneva, sans-serif; }
-h1 { font: bold 15pt Arial, Helvetica, geneva; }
-h2 { font: bold 14pt Arial, Helvetica, geneva; }
+h1 { font: 15pt Arial, Helvetica, geneva;
+ color: black!important!;
+}
+h2 { font: normal 12pt Arial, Helvetica, geneva;
+ color: black!important;
+}
#header {
- background: white url(../images/header-bg.gif) repeat-x;
+ background: #444444 url("../images/main_bg_fade.png") scroll top left no-repeat;
position: fixed;
width: 100%;
height: 95px;
@@ -12,10 +31,30 @@
right: 0;
bottom: auto;
left: 0;
- border-bottom: 2px solid #cccccc;
+ border-bottom: 1px solid #bbc4c5;
z-index: 2000;
}
+#header h1 {
+ color: #fff;
+ margin-left: 310px;
+}
+
+#header h1, p.breadcrumbs {
+ margin-top: 30px;
+ margin-left: 310px;
+}
+
+#header img {
+ float: left;
+ margin-left: 20px;
+ margin-top: 12px;
+}
+
+#header p.breadcrumbs a {
+ color: #bbb;
+}
+
#leftnavigation {
/* background-color:#91e7b3;*/
overflow: auto;
@@ -26,7 +65,9 @@
left: 0;
width: 280px;
z-index: 1500;
- border-right:2px solid #CCCCCC;
+ border-right:2px solid #bbc4c5;
+ padding: 0px;
+ background-color: #f0f0f0!important;
}
#treeDiv {
@@ -39,6 +80,7 @@
width: 243px;
z-index: 1500;
border-right:2px solid #CCCCCC;
+ background-color: #f0f0f0!important;
}
#searchDiv {
@@ -51,6 +93,7 @@
width: 243px;
z-index: 1500;
border-right:2px solid #CCCCCC;
+ background-color: #f0f0f0!important;
}
#content {
@@ -65,36 +108,82 @@
color: #000000;
/*border-left: 2px solid #cccccc; overflow :scroll;*/
z-index: 1000;
-
- max-width: 70em;
min-width:800px;
}
#navheader {
position: fixed;
- top: 65px;
- right:4px;
+ background: #fff;
+ border-radius: 5px 0px 0px 5px;
+ padding-left: 10px;
+ right: 0px;
+ top: 37px;
}
-#content h1, #content h2 { color: #cc0000; }
+#content h1, #content h2 { color: black; }
.navfooter { bottom: 2%; }
.highlight { background-color: #c5d3c3; }
.highlightButton{ font-size: 0; }
+#content pre.literallayout, #content pre.programlisting
+{
+ -x-system-font: none;
+ background-color: silver;
+ border-bottom-color: #DEDEDE !important;
+ border-bottom-style: solid !important;
+ border-bottom-width: 1px !important;
+ border-left-color-ltr-source: physical !important;
+ border-left-color-rtl-source: physical !important;
+ border-left-color-value: #DEDEDE !important;
+ border-left-style-ltr-source: physical !important;
+ border-left-style-rtl-source: physical !important;
+ border-left-style-value: solid !important;
+ border-left-width-ltr-source: physical !important;
+ border-left-width-rtl-source: physical !important;
+ border-left-width-value: 1px !important;
+ border-right-color-ltr-source: physical !important;
+ border-right-color-rtl-source: physical !important;
+ border-right-color-value: #DEDEDE !important;
+ border-right-style-ltr-source: physical !important;
+ border-right-style-rtl-source: physical !important;
+ border-right-style-value: solid !important;
+ border-right-width-ltr-source: physical !important;
+ border-right-width-rtl-source: physical !important;
+ border-right-width-value: 1px !important;
+ border-top-color: #DEDEDE !important;
+ border-top-style: solid !important;
+ border-top-width: 1px !important;
+ color: #23302D;
+ display: block;
+ font-family: Monaco,'Courier New','DejaVu Sans Mono','Bitstream Vera Sans Mono',monospace;
+ font-size: 12px !important;
+ font-size-adjust: none;
+ font-stretch: normal;
+ font-style: normal;
+ font-variant: normal;
+ font-weight: normal;
+ line-height: normal;
+ margin-bottom: 1em !important;
+ margin-left: 0 !important;
+ margin-right: 0 !important;
+ margin-top: 1em !important;
+ overflow-x: scroll;
+ padding-bottom: 0.5em !important;
+ padding-left: 0.5em !important;
+ padding-right: 0.5em !important;
+ padding-top: 0.5em !important;
+ width: 100%;
+}
+
/* Show Hide TOC tree */
.pointLeft {
- background: url("../images/showHideTreeIcons.png") 0 0 no-repeat;
- height: 28px;
- width: 15px;
+ padding-right: 5px;
display: block;
- font-size: 0;
cursor: pointer;
}
.pointRight {
- background: url("../images/showHideTreeIcons.png") -15px 0 no-repeat;
- height: 28px;
+ padding-right: 5px;
display: block;
- font-size: 0;
cursor: pointer;
}
@@ -132,6 +221,29 @@
font-weight: bold;
}
+p.breadcrumbs {
+ display: inline;
+ margin-bottom: 0px;
+ margin-top: 33px;
+}
+
+p.breadcrumbs a {
+ padding-right: 12px;
+ margin-right: 5px;
+ text-decoration: none;
+ color: #575757;
+ text-transform: uppercase;
+ font-size: 10px;
+}
+
+p.breadcrumbs a:first-child {
+ background: url(../images/breadcrumb-arrow-white.png) no-repeat right center;
+}
+
+p.breadcrumbs a:hover {
+ text-decoration: underline;
+}
+
/* OXYGEN ADDITION FOR SEARCH RESULT RATING */
#star ul.star {
@@ -166,3 +278,167 @@
FONT-SIZE: 1px;
}
+<!--
+#header h1 {
+ margin-top: 2px;
+}
+-->
+
+table.navLinks {
+ margin-right: 20px;
+}
+
+table.navLinks td a {
+ text-decoration: none;
+ text-transform: uppercase;
+ color: black;
+ font-size: 11px;
+}
+
+a.navLinkPrevious {
+ padding-left: 12px;
+ background: url(../images/previous-arrow.png) no-repeat left center;
+}
+
+a.navLinkNext {
+ padding-right: 12px;
+ background: url(../images/next-arrow.png) no-repeat right center;
+}
+
+a#showHideButton {
+ padding-left: 20px;
+ background: url(../images/sidebar.png) no-repeat left center;
+}
+
+
+.filetree li span a { color: #777; }
+
+#treediv { -webkit-box-shadow: #CCC 0px 1px 2px 0px inset; }
+
+.legal, .legal *{
+ color: #555;
+ text-align: center;
+ padding-bottom: 10px;
+}
+
+.internal
+ {
+ color : #0000CC;
+ }
+
+.writeronly
+ {
+ color : red;
+ }
+
+.remark, .remark .added, .remark .changed, .remark .deleted{
+ background: yellow;
+ }
+
+tr th, tr th .internal, tr th .added, tr th .changed
+ {
+ background: #00589E;
+ color: white;
+ font-weight: bold;
+ text-align: left;
+ }
+
+.statustext{
+ position:fixed;
+ top:105px;
+ width: 0%;
+ height: 0%;
+ opacity: .3;
+ -webkit-transform: rotate(90deg);
+ -moz-transform: rotate(90deg);
+ -o-transform: rotate(90deg);
+ white-space: nowrap;
+ color: red;
+ font-weight: bold;
+ font-size: 2em;
+ margin-top: 30px;
+ }
+
+#toolbar {
+ width: 100%;
+ height: 33px;
+ position: fixed;
+ top: 93px;
+ z-index: 99;
+ left: 280px;
+ color: #333;
+ line-height: 28px;
+ padding-left: 10px;
+}
+
+#toolbar-left {
+ position: relative;
+ left: 0px;
+}
+
+body p.breadcrumbs {
+ margin: 0px;
+ padding: 0px;
+ line-height: 28px;
+}
+
+body #content {
+ position: static;
+ margin-top: 126px;
+ top: 0px;
+}
+
+<!--
+#header h1 {
+ position: fixed;
+ top: 35px;
+ left: -15px;
+ color: white!important;
+}
+-->
+
+body.sidebar #toolbar{
+ left: 0px;
+}
+
+body.sidebar #toolbar-left{
+ left: 0px;
+}
+
+div#toolbar-left img {
+ vertical-align: text-top;
+}
+
+
+div.note *, div.caution *, div.important *, div.tip *, div.warning * {
+ background: inherit !important;
+ color: inherit !important;
+ border: inherit !important;
+}
+
+#content table thead, #content table th{
+ background: gray;
+ color: white;
+ font-weight: bold;
+}
+
+#content table caption{
+ font-weight: bold;
+}
+
+#content table td, #content table {
+ border: 1px solid black;
+}
+
+#content table td, #content table th {
+ padding: 5px;
+}
+
+#content table {
+ margin-bottom: 20px;
+
+}
+
+*[align = 'center']{
+ text-align: center;
+}
Added: trunk/xsl/webhelp/template/common/images/main_bg_fade.png
===================================================================
(Binary files differ)
Property changes on: trunk/xsl/webhelp/template/common/images/main_bg_fade.png
___________________________________________________________________
Added: svn:executable
+ *
Added: svn:mime-type
+ application/octet-stream
Added: trunk/xsl/webhelp/template/common/images/next-arrow.png
===================================================================
(Binary files differ)
Property changes on: trunk/xsl/webhelp/template/common/images/next-arrow.png
___________________________________________________________________
Added: svn:executable
+ *
Added: svn:mime-type
+ application/octet-stream
Added: trunk/xsl/webhelp/template/common/images/previous-arrow.png
===================================================================
(Binary files differ)
Property changes on: trunk/xsl/webhelp/template/common/images/previous-arrow.png
___________________________________________________________________
Added: svn:executable
+ *
Added: svn:mime-type
+ application/octet-stream
Added: trunk/xsl/webhelp/template/common/images/sidebar.png
===================================================================
(Binary files differ)
Property changes on: trunk/xsl/webhelp/template/common/images/sidebar.png
___________________________________________________________________
Added: svn:executable
+ *
Added: svn:mime-type
+ application/octet-stream
Modified: trunk/xsl/webhelp/template/common/main.js
===================================================================
--- trunk/xsl/webhelp/template/common/main.js 2011-09-16 19:51:38 UTC (rev 9063)
+++ trunk/xsl/webhelp/template/common/main.js 2011-09-18 03:56:59 UTC (rev 9064)
@@ -103,10 +103,10 @@
var ulNode = a.getElementsByTagName("ul")[0];
if (ulNode != undefined) {
if (ulNode.hasAttribute("style")) {
- ulNode.setAttribute("style", "display: block;");
+ ulNode.setAttribute("style", "display: block; background-color: #D8D8D8 !important;");
} else {
var ulStyle = document.createAttribute("style");
- ulStyle.nodeValue = "display: block;";
+ ulStyle.nodeValue = "display: block; background-color: #D8D8D8 !important;";
ulNode.setAttributeNode(ulStyle);
} }
//adjust tree's + sign to -
@@ -128,15 +128,16 @@
//Setting the background for selected node.
var style = a.getAttribute("style", 2);
if (style != null && !style.match(/background-color: Background;/)) {
- a.setAttribute("style", "background-color: #6495ed; " + style);
- b.setAttribute("style", "color: white;");
+ a.setAttribute("style", "background-color: #D8D8D8; " + style);
+ b.setAttribute("style", "color: black;");
} else if (style != null || style != "") {
- a.setAttribute("style", "background-color: #6495ed; " + style);
- b.setAttribute("style", "color: white;");
+ a.setAttribute("style", "background-color: #D8D8D8; " + style);
+ b.setAttribute("style", "color: black;");
} else {
- a.setAttribute("style", "background-color: #6495ed; ");
- b.setAttribute("style", "color: white;");
- } }
+ a.setAttribute("style", "background-color: #D8D8D8; ");
+ b.setAttribute("style", "color: black;");
+ }
+ }
//shows the node related to current content.
//goes a recursive call from current node to ancestor nodes, displaying all of them.
@@ -194,13 +195,13 @@
if (showHideButton != undefined && showHideButton.hasClass("pointLeft")) {
//Hide TOC
showHideButton.removeClass('pointLeft').addClass('pointRight');
- content.css("margin", "0 0 0 0");
+ content.css("margin", "125px 0 0 0");
leftNavigation.css("display", "none");
showHideButton.attr("title", "Show the TOC tree");
} else {
//Show the TOC
showHideButton.removeClass('pointRight').addClass('pointLeft');
- content.css("margin", "0 0 0 280px");
+ content.css("margin", "125px 0 0 280px");
leftNavigation.css("display", "block");
showHideButton.attr("title", "Hide the TOC Tree");
}
Modified: trunk/xsl/webhelp/xsl/webhelp.xsl
===================================================================
--- trunk/xsl/webhelp/xsl/webhelp.xsl 2011-09-16 19:51:38 UTC (rev 9063)
+++ trunk/xsl/webhelp/xsl/webhelp.xsl 2011-09-18 03:56:59 UTC (rev 9064)
@@ -193,6 +193,16 @@
padding-left: 20px;
background: transparent url(<xsl:value-of select="$webhelp.common.dir"/>jquery/treeview/images/folder.gif) 0 0px no-repeat;
}
+
+ /* Overide jquery treeview's defaults for ul. */
+ .treeview ul {
+ background-color: #F0F0F0 !important;
+ margin-top: 4px;
+ }
+
+ #webhelp-currentid {
+ background-color: #D8D8D8 !important;
+ }
</style>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="{$webhelp.common.dir}css/positioning.css"/>
@@ -444,11 +454,15 @@
<xsl:call-template name="user.footer.content"/>
- <xsl:call-template name="footer.navigation">
+ <hr/>
+ <div class="legal"><a href="index.html">Legal notices</a></div>
+
+ <!-- Redundant since the upper navigation bar always visible -->
+ <!--xsl:call-template name="footer.navigation">
<xsl:with-param name="prev" select="$prev"/>
<xsl:with-param name="next" select="$next"/>
<xsl:with-param name="nav.context" select="$nav.context"/>
- </xsl:call-template>
+ </xsl:call-template-->
<xsl:call-template name="user.webhelp.content.footer"/>
</div>
@@ -473,8 +487,9 @@
<xsl:variable name="up" select="parent::*"/>
<div id="header">
- <xsl:call-template name="webhelpheader.logo"/>
-
+ <!--xsl:call-template name="webhelpheader.logo"/-->
+ <img style='margin-right: 2px; height: 59px; padding-right: 25px; padding-top: 8px' align="right"
+ src='{$webhelp.common.dir}images/logo.png' alt="Company Logo"/>
<!-- Display the page title and the main heading(parent) of it-->
<h1 align="center">
<xsl:apply-templates select="." mode="object.title.markup"/>
@@ -492,20 +507,20 @@
<div id="navheader" align="right">
<xsl:comment>
<!-- KEEP this code. In case of neither prev nor next links are available, this will help to
- keep the integrity of the DOM tree-->
+ keep the integrity of the DOM tree-->
</xsl:comment>
<!--xsl:with-param name="prev" select="$prev"/>
<xsl:with-param name="next" select="$next"/>
<xsl:with-param name="nav.context" select="$nav.context"/-->
- <table>
+ <table class="navLinks">
<tr>
- <td style="height: 28px; width: 16px;">
+ <td>
<a id="showHideButton" onclick="showHideToc();"
- class="pointLeft" title="Hide TOC tree">.
+ class="pointLeft" title="Hide TOC tree">Sidebar
</a>
</td>
<td>
- <xsl:if test="$webhelp.include.search.tab = 'true'">
+ <!--xsl:if test="$webhelp.include.search.tab = 'true'">
<img src="{$webhelp.common.dir}images/highlight-blue.gif" alt="H" height="25px"
onclick="toggleHighlight()" id="showHideHighlight" style="cursor:pointer">
<xsl:attribute name="title">
@@ -514,16 +529,16 @@
</xsl:call-template>
</xsl:attribute>
</img>
- </xsl:if>
+ </xsl:if-->
</td>
<xsl:if test="count($prev) > 0
- or (count($up) > 0
- and generate-id($up) != generate-id($home)
- and $navig.showtitles != 0)
- or count($next) > 0">
+ or (count($up) > 0
+ and generate-id($up) != generate-id($home)
+ and $navig.showtitles != 0)
+ or count($next) > 0">
<td>
<xsl:if test="count($prev)>0">
- <a accesskey="p" tabindex="5">
+ <a accesskey="p" class="navLinkPrevious" tabindex="5">
<xsl:attribute name="href">
<xsl:call-template name="href.target">
<xsl:with-param name="object" select="$prev"/>
@@ -540,7 +555,7 @@
<xsl:when test="count($up)>0
and generate-id($up) != generate-id($home)">
|
- <a accesskey="u" tabindex="5">
+ <a accesskey="u" class="navLinkUp" tabindex="5">
<xsl:attribute name="href">
<xsl:call-template name="href.target">
<xsl:with-param name="object" select="$up"/>
@@ -556,7 +571,7 @@
<xsl:if test="count($next)>0">
|
- <a accesskey="n" tabindex="5">
+ <a accesskey="n" class="navLinkNext" tabindex="5">
<xsl:attribute name="href">
<xsl:call-template name="href.target">
<xsl:with-param name="object" select="$next"/>
@@ -702,6 +717,7 @@
<div id="searchResults">
<center> </center>
</div>
+ <p class="searchHighlight"><a href="#" onclick="toggleHighlight()">Search Highlighter (On/Off)</a></p>
</div>
</xsl:if>
<xsl:call-template name="user.webhelp.tabs.content"/>
This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.
|