Backport of Help online donnation button

Change-Id: I600ca4327385d36d00fe042bbdb36b906d199f75
Reviewed-on: https://gerrit.libreoffice.org/69511
Tested-by: Jenkins
Reviewed-by: Adolfo Jayme Barrientos <fitojb@ubuntu.com>

3 files changed, 451 insertions, 354 deletions

diff --git a/help3xsl/default.css b/help3xsl/default.css
index e6a59ad8b8..391403e724 100644
--- a/help3xsl/default.css
+++ b/help3xsl/default.css
@@ -39,14 +39,15 @@ h5,
 h6,
 .listitem,
 .listitemintable,
-.tablecontent,
-.input {
+.tablecontent {
     font-family: -apple-system, system-ui, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", "DejaVu Sans", "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif, FreeSerif, NanumGothic, "Noto Sans Tibetan", Taprom;
 }
 .input {
+    background-color: rgba(0,0,0,0.04);
     transition-property: background-color;
     transition-duration: 150ms;
     border-bottom: 1px dashed rgba(0,0,0,0.1);
+    font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
 }
 [data-tooltip]{
   position:relative;
@@ -85,7 +86,7 @@ h6,
     pointer-events: auto;
 }
 body {
-    background-color: #F4F7F7;
+    background-color: #F7F8F7;
     margin: 0;
     line-height: normal;
 }
@@ -94,11 +95,11 @@ body {
 }
 a {
     text-decoration: none;
-    color: #0369AE;
+    color: #0379BC;
 }
 a:hover {
     text-decoration: underline;
-    color: #1C99E0;
+    color: #0499EE;
 }
 pre,
 .code,
@@ -115,6 +116,11 @@ pre,
     padding: 1px 3px;
     font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
 }
+.smathcode {
+    border-radius: 2px;
+    padding: 1px 3px;
+    font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
+}
 .acronym {
     font-weight: bold;
 }
@@ -124,10 +130,23 @@ pre,
     border-top: 1px solid black;
 }
 .emph,
-.menuitem,
-.keycode {
+.menuitem {
     font-weight: bold;
 }
+.keycode {
+    /*font-weight: bold;*/
+    font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
+}
+.widget{
+    padding: 1px 10px;
+    background: #f0f0f0;
+    background: linear-gradient(to bottom,#f0f0f0,#fcfcfc);
+    border-radius: 3px;
+    color: #303030;
+    border: 1px solid #a0a0a0;
+    border-bottom-width: 2px;
+    white-space: nowrap;
+}
 /* div's for warning, tip and note */
 .note,
 .tip,
@@ -140,25 +159,18 @@ pre,
     margin-top: 15px;
 }
 .note {
-    border-left: 4px solid #FFDE09;
-    background-color: #FFF4D0;
+    border-left: 4px solid #61897C;
+    background-color: #D9E7E2;
 }
 .tip {
-    border-left: 4px solid #38618C;
-    background-color: #DAE2EA;
+    border-left: 4px solid #4866AD;
+    background-color: #CDD5E8;
 }
 .warning {
-    border-left: 4px solid #FF5964;
-    background-color: #FFE0E2;
-}
-.noteicon {
-    padding:0.3em;
-    transition: transform .2s; /* Animation */
+    border-left: 4px solid #D5B177;
+    background-color: #F9EEDC;
 }
-.noteicon:hover {
-    transform: scale(2.0); /* (200% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
-}
-.notetext {
+.noteicon, .notetext {
     padding:0.3em;
 }
 
@@ -177,17 +189,13 @@ pre,
 .iconcell {
     padding:0.3em;
 }
-.imageicon {
-    transition: transform .2s; /* Animation */
-}
-.imageicon:hover{
-    transform: scale(2.0); /* (200% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
-}
 
 table {
-    box-shadow: rgba(0,0,0,0.1) 0px 1px 3px 0px;
+    background: #FEFEFE;
+    box-shadow: rgba(0,0,0,0.08) 0 1px 5px 0;
     border-collapse: collapse;
-    background: #fefefe;
+    margin-left: auto;
+    margin-right: auto;
 }
 table, th, td {
     border-top: 0;
@@ -220,13 +228,13 @@ p,
 ol,
 td {
     font-size: 1.17rem;
-    margin: 2px 2px 2px 2px;
+    margin: 2px 0 2px 0;
 }
 h1 {
     font-size: 1.83rem;
     font-weight: 300;
     border-bottom: 2px solid #148603;
-    padding-bottom: 6px;
+    margin-bottom: 1.67rem;
 }
 h1 a {
     text-decoration: none;
@@ -242,20 +250,12 @@ h5,
 h6 {
     font-size: 1.17rem;
 }
-.avis {
-    /*    background-color: #EEEEEE;*/
-}
 .relatedtopics {
     font-weight: normal;
 }
-.relatedbody {
-    margin-top: 2px;
-    margin-bottom: 2px;
-    margin-left: 5px;
-}
 .howtoget {
-    background: #CCF4C6;
-    border-left: 4px solid #148603;
+    background: #EBE7E9;
+    border-left: 4px solid #4E4B55;
     border-radius: 0 4px 4px 0;
     box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2);
     padding: 0.3em;
@@ -268,9 +268,10 @@ h6 {
     box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2);
     display: inline-block;
     font-weight: bold;
-    padding: 0.3em;
+    padding: 0.1em 0.3em;
 }
 .howtogetbody {
+    padding: 0 0.3em;
 }
 .samplefilesection{
 }
@@ -292,46 +293,12 @@ h6 {
     color: red;
     text-align: left;
 }
-.donation {
-    padding: 0 0 10px 0;
-    margin-bottom: 1em;
-    border-bottom: 1px dashed rgba(0,0,0,0.1);
-}
-.donation p{
-    font-size:1.2rem;
-}
+
 .bascode {
-    background-color: #fafafa;
-    margin-left: 30px;
-    margin-right: 30px;
-}
-.bascodepar {
-    font-family: monospace;
+    margin-top:15px;
+    margin-bottom: 15px;
 }
 
-/* Basic code syntax highlight */
-
-.identifier,
-.unknown {
-    color: green;
-}
-.keyword {
-    color: blue;
-}
-.comment {
-    color: gray;
-}
-.number,
-.string {
-    color: red;
-}
-.operator,
-.parameter {
-    color: black;
-}
-.hotlink {
-    color: blue;
-}
 .infopage {
     color: green;
     font-size: 1.33rem;
@@ -346,7 +313,7 @@ h6 {
 #DisplayArea {
     background-color: #FCFCFC;
     overflow: auto;
-    padding: 10px;
+    padding: 10px 10px 40px 10px;
     grid-area: main;
 }
 #DisplayArea > p {
@@ -377,9 +344,12 @@ h6 {
 .embedded {}
 .header-extrawurst {
     grid-area: header;
-}
-header {
+    position: sticky;
+    top: 0px;
     background-color: #18A303;
+    z-index: 1000;
+}
+header {    
     color: #fff;
     height: 64px;
     padding: 8px 8px 8px 16px;
@@ -414,7 +384,6 @@ header {
     overflow-y: hidden;
     /* make it smooth on iOS */
     -webkit-overflow-scrolling: touch;
-    text-align: center;
 }
 .lang nav a, .modules nav a {
     color: #fff;
@@ -429,9 +398,9 @@ header {
     white-space: nowrap;
 }
 footer {
-    border-top: 2px solid #148603;
-    padding: 15px 10px 0 10px;
-    margin: 40px 0;
+    padding: 40px 10px 40px 10px;
+    background-color: #FCFCFC;
+    box-shadow: 0 2px 8px 0 rgba(0,0,0,.05);
 }
 footer p {
     font-size: 0.98rem;
@@ -480,7 +449,6 @@ aside input[type=checkbox]:checked ~ .contents-treeview {
 }
 .index a {
     font-size: 16px;
-    margin-bottom: 5px;
 }
 #Bookmarks {
     padding: 0 20px;
@@ -553,12 +521,13 @@ aside input[type=checkbox]:checked ~ .contents-treeview {
     font-weight: bold;
     color: #148603;
 }
-.pagination {
-    padding: 0;
+.pagination-container {
+    text-align: center;
+    margin-left: -40px; /* The normalizer fails to account for this */
 }
 .pagination li {
     display: inline-block;
-    padding: 4px;
+    padding: 0 5px;
 }
 .pagination a {
     text-decoration: none;
@@ -570,34 +539,78 @@ aside input[type=checkbox]:checked ~ .contents-treeview {
     display: none;
 }
 li.active {
-    background-color: #0369A3;
+    background-color: #0379BC;
 }
 li.active a {
     color: #fff;
 }
 li.disabled a {
-    color: #90C0E6;
+    opacity: 0.4;
+    pointer-events: none;
 }
 #search-bar {
+    border: 1px solid #CCC;
+    box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
+    box-sizing: border-box;
+    line-height: 1.5em;
     margin-top: 10px;
+    outline: none;
+    padding: 0 .25em;
+    transition: all 0.30s ease-in-out;
     width: 100%;
-    caret-color: #148603;
+}
+#search-bar:focus {
+    border: 1px solid #0EA5FB;
 }
 #search-bar::placeholder {
     font-style: italic;
 }
+.google-donation {
+    border-top: 2px solid #148603;
+    background-color: #FCFCFC;
+    box-shadow: 0 2px 8px 0 rgba(0,0,0,.05);
+}
+.donation {
+    background: #0379BC;
+    background-image: linear-gradient(to bottom, #3498db, #2980b9);
+    border-radius: 8px;
+    padding: 5px 10px 5px 10px;
+    margin: 20px auto 0 auto;
+    max-width: 200px;
+    color: #ffffff;
+    text-decoration: none;
+}
+.donation a {
+    color: white;
+}
+.donation a:hover {
+    color: white;
+    text-decoration: none;
+}
+.donation:hover{
+    background: #0379BC;
+    background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
+}
+.donation p {
+    font-size:1.2rem;
+    text-align: center;
+}
 .google-search {
     max-width: 300px;
-    margin: 0 auto;
+    margin: 40px auto 0 auto;
 }
 .modules {
     border-bottom: 2px solid #f3f3f3;
+    background-color: #233336;
 }
 .modules label:after, .lang label:after {
     font-size: 30px;
     color: #fff;
     content:"⌄";
 }
+.lang {
+    background-color: #233336;
+}
 .lang label, .modules label {
     display: none;
 }
@@ -660,9 +673,12 @@ li.disabled a {
 }
 .contents-treeview a, .index a {
     text-decoration: none;
+    line-height: 1.4;
 }
 .contents-treeview a:hover, .index a:hover {
-    text-decoration: underline;
+    border-left: 2px solid rgba(0,0,0,0.05);
+    margin-left: -12px;
+    padding-left: 10px;
 }
 .contents-treeview input + label + ul {
     margin: 0 0 0 22px;
@@ -685,8 +701,7 @@ li.disabled a {
 .contents-treeview label,
 .contents-treeview a,
 .contents-treeview label::before {
-    height: 16px;
-    line-height: 16px;
+    display: block;
     vertical-align: middle;
 }
 .contents-treeview label:before {
@@ -700,12 +715,11 @@ li.disabled a {
     content: "⊟";
 }
 .contents-current {
-    background-color: #0369A3;
-    color: #FFF;
-    padding-right: 1px;
-}
-.contents-current:hover {
-    color: #FFF;
+    background: rgba(0,0,0,0.05);
+    border-left: 2px solid #0379BC;
+    font-weight: 600;
+    margin-left: -12px;
+    padding-left: 10px;
 }
 /* webkit adjacent element selector bugfix */
 
@@ -764,7 +778,6 @@ li.disabled a {
         font-size: 19px;
     }
     aside {
-        background-color: #F4F7F7;
         float: left;
         width: 320px;
     }
@@ -774,16 +787,24 @@ li.disabled a {
     .rightside {
         grid-area: rightside;
     }
-    .google-search {
-        margin: 0;
-        position: absolute;
-        top: 19px;
-        left: 860px;
+    .google-donation {
+        grid-area: google;
+        position: sticky;
+        top: 0px;
+        background-color: #FCFCFC;
+        box-shadow: none;
+    }
+    .donation {
+        max-width: 400px;
+    }
+    footer {
+        grid-area: footer;
     }
     .lang {
         position: absolute;
         top: 0;
         left: 200px;
+        background-color: transparent;
     }
     .modules {
         width: 120px;
@@ -791,12 +812,11 @@ li.disabled a {
         top: 0;
         left: 80px;
         border: none;
+        background-color: transparent;
     }
     #DisplayArea {
-        background-color: #FCFCFC;
         box-shadow: 0 2px 8px 0 rgba(0,0,0,.05);
-        padding: 10px 50px;
-        width: 800px;
+        padding: 10px 50px 40px 50px;
     }
 }
 @media screen and (min-width: 1440px) {
@@ -817,24 +837,43 @@ li.disabled a {
         content: "";
     }
 }
+/* Use @supports to sneak these rules past IE */
 @supports (grid-area: auto) {
     @media screen and (min-width: 960px) {
+        .google-donation {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background-color: #18A303;
+            border-top: none;
+        }
+        .google-search {
+            margin: 0;
+        }
+        .donation {
+            margin: 0 auto;
+        }
+        footer {
+            border-top: 2px solid #148603;
+        }
         body {
             display: grid;
-            grid-template-columns: 320px 1fr;
-            grid-template-rows: minmax(1em, auto) minmax(1em, auto) 1fr;
-            grid-template-areas: "header header"
-                                 "rightside main"
-                                 "leftside main"
+            grid-template-columns: 320px 80px 1fr;
+            grid-template-rows: minmax(1em, auto) minmax(1em, auto) 1fr minmax(1em, auto);
+            grid-template-areas: "header header google"
+                                 "rightside main main"
+                                 "leftside main main"
+                                 ". footer footer"
         }
     }
     @media screen and (min-width: 1440px) {
         body {
             display: grid;
-            grid-template-columns: 320px 900px 1fr;
-            grid-template-rows: 1fr minmax(1em, auto);
-            grid-template-areas: "header header header"
-                                 "leftside main rightside"
+            grid-template-columns: 320px 450px 450px 1fr;
+            grid-template-rows: 1fr minmax(1em, auto) minmax(1em, auto);
+            grid-template-areas: "header header google google"
+                                 "leftside main main rightside"
+                                 ". footer footer ."
         }
         .rightside {
             width: auto;
diff --git a/help3xsl/help2.js b/help3xsl/help2.js
index 505dcaf8ec..0003b72d82 100644
--- a/help3xsl/help2.js
+++ b/help3xsl/help2.js
@@ -65,6 +65,20 @@ function setSystemSpan(spanID) {
         }
     }
 }
+// Find spans that need the switch treatment and give it to them
+var spans = document.querySelectorAll("[class^=switch]");
+var n = spans.length;
+for (z = 0; z < n; z++) {
+    var id = spans[z].getAttribute("id");
+    if (id === null) {
+        continue;
+    }
+    else if (id.startsWith("swlnsys")) {
+        setSystemSpan(id);
+    } else {
+        setApplSpan(id);
+    }
+}
 /* add &DbPAR= and &System= to the links in DisplayArea div */
 /* skip for object files */
 function fixURL(module, system) {
@@ -75,7 +89,7 @@ function fixURL(module, system) {
     for (var i = 0; i < n; i++) {
         if (itemlink[i].getAttribute("class") != "objectfiles"){
         setURLParam(itemlink[i], pSystem, pAppl);
-        };
+        }
     }
 }
 //Set the params inside URL
@@ -159,11 +173,49 @@ function setupLanguages(target, page) {
     var langNav = document.getElementById('langs-nav');
     if (!langNav.classList.contains('loaded')) {
         var html = '';
-        languagesSet.forEach(lang => {
+        languagesSet.forEach(function(lang) {
             html += '<a href="' + target + lang + page + '">' + ((lang in languageNames)? languageNames[lang]: lang) + '</a>';
         });
         langNav.innerHTML = html;
         langNav.classList.add('loaded');
     }
 }
+
+// Test, if we are online
+if (document.body.getElementsByTagName('meta')) {
+    var _paq = _paq || [];
+    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+    _paq.push(['disableCookies']);
+    _paq.push(['trackPageView']);
+    _paq.push(['enableLinkTracking']);
+    (function() {
+    var u="//piwik.documentfoundation.org/";
+    _paq.push(['setTrackerUrl', u+'piwik.php']);
+    _paq.push(['setSiteId', '68']);
+    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
+    })();
+    var system = getParameterByName("System");
+} else {
+    var system = getSystem();
+}
+
+var module = getParameterByName("DbPAR");
+var helpID = getParameterByName("HID");
+fixURL(module,system);
+var dbg = getParameterByName("Debug");
+if (dbg == null) { dbg=0; }
+document.getElementById("DEBUG").style.display = (dbg == 0) ? "none":"block";
+document.getElementById("bm_module").innerHTML ="Module is: "+module;
+document.getElementById("bm_system").innerHTML ="System is: "+system;
+document.getElementById("bm_HID").innerHTML ="HID is: "+helpID;
+
+// Mobile devices need the modules and langs on page load
+if (Math.max(document.documentElement.clientWidth, window.innerWidth || 0) < 960) {
+    var e = new Event('change');
+    var modules = document.getElementById('modules');
+    var langs = document.getElementById('langs');
+    modules.dispatchEvent(e);
+    langs.dispatchEvent(e);
+}
 /* vim:set shiftwidth=4 softtabstop=4 expandtab cinoptions=b1,g0,N-s cinkeys+=0=break: */
diff --git a/help3xsl/online_transform.xsl b/help3xsl/online_transform.xsl
index 95892bdd4c..f3b71bac9c 100644
--- a/help3xsl/online_transform.xsl
+++ b/help3xsl/online_transform.xsl
@@ -68,11 +68,6 @@
 <xsl:variable name="filename" select="/helpdocument/meta/topic/filename"/>
 <xsl:variable name="title" select="/helpdocument/meta/topic/title"/>
 
-<!-- Module and the corresponding switching values-->
-<xsl:param name="Database" select="'swriter'"/>
-<xsl:variable name="module" select="$Database"/>
-<xsl:variable name="appl"/>
-
 <!-- the other parameters given by the help caller -->
 
 <xsl:variable name="pversion">
@@ -99,9 +94,10 @@
 <xsl:variable name="linkpostfix" select="''"/>
 
 <!-- images for notes, tips and warnings -->
-<xsl:variable name="note_img" select="concat($img_url_prefix,'icon-themes/help/note.svg')"/>
-<xsl:variable name="tip_img" select="concat($img_url_prefix,'icon-themes/help/tip.svg')"/>
-<xsl:variable name="warning_img" select="concat($img_url_prefix,'icon-themes/help/warning.svg')"/>
+<xsl:variable name="iconsizestyle" select="'width:40px;height=40px;'"/>
+<xsl:variable name="note_img" select="concat($img_url_prefix,'icon-themes/res/helpimg/note.svg')"/>
+<xsl:variable name="tip_img" select="concat($img_url_prefix,'icon-themes/res/helpimg/tip.svg')"/>
+<xsl:variable name="warning_img" select="concat($img_url_prefix,'icon-themes/res/helpimg/warning.svg')"/>
 
 <!-- Strings for the help UI page -->
 <xsl:variable name="tmp_href_ui"><xsl:value-of select="concat($urlpre,'text/shared/help/browserhelp.xhp')"/></xsl:variable>
@@ -149,18 +145,24 @@
             <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' 'unsafe-eval' piwik.documentfoundation.org *.google.com *.googleapis.com"/>
         </xsl:if>
         <title><xsl:value-of select="$titleL10N"/></title>
-        <link rel="shortcut icon" href="{$target}media/navigation/favicon.ico" />
-        <link  type="text/css" href="{$target}normalize.css" rel="Stylesheet" />
-        <link  type="text/css" href="{$target}default.css" rel="Stylesheet" />
-        <script type="text/javascript" src="{$target}help2.js"></script>
-        <script type="text/javascript" src="{$target}languages.js"></script>
-        <script type="text/javascript" src="{$target}{$lang}/langnames.js"></script>
-        <script type="text/javascript" src="{$target}fuzzysort.js"></script>
-        <script type="text/javascript" src="{$target}paginathing.js"></script>
+        <link rel="shortcut icon" href="{$target}media/navigation/favicon.ico"/>
+        <link  type="text/css" href="{$target}normalize.css" rel="Stylesheet"/>
+        <link  type="text/css" href="{$target}default.css" rel="Stylesheet"/>
+        <link  type="text/css" href="{$target}prism.css" rel="Stylesheet"/>
+        <script type="text/javascript" src="{$target}help2.js" defer=""/>
+        <script type="text/javascript" src="{$target}languages.js" defer=""/>
+        <script type="text/javascript" src="{$target}{$lang}/langnames.js" defer=""/>
+        <script type="text/javascript" src="{$target}fuzzysort.js" defer=""/>
+        <script type="text/javascript" src="{$target}paginathing.js" defer=""/>
+        <script type="text/javascript" src="{$target}prism.js" defer=""/>
+        <script type="text/javascript" src="{$target}{$lang}/bookmarks.js" defer=""/>
+        <script type="text/javascript" src="{$target}{$lang}/contents.js" defer=""/>
+        <script type="text/javascript" src="{$target}help.js" defer=""/>
         <meta name="viewport" content="width=device-width,initial-scale=1"/>
     </head>
     <body itemscope="true" itemtype="http://schema.org/TechArticle">
     <xsl:if test="$online">
+        <!-- help2.js checks, if meta elements exist in the body -->
         <meta itemprop="version" content="{$productversion}"/>
         <meta itemprop="inLanguage" content="{$lang}"/>
         <meta itemprop="datePublished" content="2017"/>
@@ -169,7 +171,7 @@
     <div class="header-extrawurst">
         <header>
             <div class="logo-container">
-		    <a class="logo" href="{$target}{$lang}/text/shared/05/new_help.html">
+                <a class="logo" href="{$target}{$lang}/text/shared/05/new_help.html">
                     <div class="symbol"></div>
                     <p><xsl:value-of select="$ui_logo"/></p>
                 </a>
@@ -214,101 +216,46 @@
     </aside>
     <div id="DisplayArea" itemprop="articleBody">
         <xsl:apply-templates select="/helpdocument/body"/>
-        <footer>
-            <xsl:if test="$online">
-                <div class="google-search">
-                    <script type="text/javascript">
-                        <![CDATA[
-                        (function() {]]>
-                        <xsl:call-template name="getToken"><xsl:with-param name="lang" select="$lang"/></xsl:call-template>
-                        <![CDATA[
-                        var gcse = document.createElement('script');
-                        gcse.type = 'text/javascript';
-                        gcse.async = true;
-                        gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
-                        var s = document.getElementsByTagName('script')[0];
-                        s.parentNode.insertBefore(gcse, s);
-                        })();
-                        ]]>
-                    </script>
-                    <xsl:text disable-output-escaping="yes">&lt;gcse:search&gt;&lt;/gcse:search&gt;</xsl:text>
-                </div>
-            </xsl:if>
-            <xsl:if test="$online">
-                <div class="donation">
-                    <p><a href="https://www.libreoffice.org/donate/?pk_campaign=help" target ="_blank">
-                        <xsl:value-of select="$ui_donate"/>
-                    </a></p>
-                </div>
-                <p><a href="https://www.libreoffice.org/imprint" target="_blank">Impressum (Legal Info)</a> | <a href="https://www.libreoffice.org/privacy" target="_blank">Privacy Policy</a> | <a href="https://www.documentfoundation.org/statutes.pdf" target="_blank">Statutes (non-binding English translation)</a> - <a href="https://www.documentfoundation.org/satzung.pdf" target="_blank">Satzung (binding German version)</a> | Copyright information: Unless otherwise specified, all text and images on this website are licensed under the <a href="https://www.libreoffice.org/download/license/" target="_blank">Mozilla Public License v2.0</a>. “LibreOffice” and “The Document Foundation” are registered trademarks of their corresponding registered owners or are in actual use as trademarks in one or more countries. Their respective logos and icons are also subject to international copyright laws. Use thereof is explained in our <a href="https://wiki.documentfoundation.org/TradeMark_Policy" target="_blank">trademark policy</a>. LibreOffice was based on OpenOffice.org.</p>
-            </xsl:if>
-            <div id="DEBUG" class="debug">
-                <h3 class="bug">Help content debug info:</h3>
-                <p>This page is: <a href="https://opengrok.libreoffice.org/xref/help/source{$filename}" target="_blank"><xsl:value-of select="$filename"/></a></p>
-                <p>Title is: <xsl:value-of select="$title"/></p>
-                <p id="bm_module"></p>
-                <p id="bm_system"></p>
-                <p id="bm_HID"></p>
+    </div>
+    <div class="google-donation">
+        <xsl:if test="$online">
+            <div class="google-search">
+                <script type="text/javascript">
+                    <![CDATA[
+                    (function() {]]>
+                    <xsl:call-template name="getToken"><xsl:with-param name="lang" select="$lang"/></xsl:call-template>
+                    <![CDATA[
+                    var gcse = document.createElement('script');
+                    gcse.type = 'text/javascript';
+                    gcse.async = true;
+                    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
+                    var s = document.getElementsByTagName('script')[0];
+                    s.parentNode.insertBefore(gcse, s);
+                    })();
+                    ]]>
+                </script>
+                <xsl:text disable-output-escaping="yes">&lt;gcse:search&gt;&lt;/gcse:search&gt;</xsl:text>
+            </div>
+            <div class="donation">
+                <p><a href="https://www.libreoffice.org/donate/?pk_campaign=help" target ="_blank">
+                    <xsl:value-of select="$ui_donate"/>
+                </a></p>
             </div>
-        </footer>
+        </xsl:if>
     </div>
-    <script type="text/javascript" src="{$target}{$lang}/bookmarks.js"/>
-    <script type="text/javascript" src="{$target}{$lang}/contents.js"/>
-    <script type="text/javascript" src="{$target}help.js"/>
-    <xsl:choose>
-        <xsl:when test="$online">
-            <script type="text/javascript">
-                <![CDATA[
-                var module = getParameterByName("DbPAR");
-                var system = getParameterByName("System");
-                var helpID = getParameterByName("HID");
-                fixURL(module,system);
-                var dbg = getParameterByName("Debug");
-                if (dbg == null){dbg=0}
-                document.getElementById("DEBUG").style.display = (dbg == 0) ? "none":"block";
-                document.getElementById("bm_module").innerHTML ="Module is: "+module;
-                document.getElementById("bm_system").innerHTML ="System is: "+system;
-                document.getElementById("bm_HID").innerHTML ="HID is: "+helpID;
-                ]]>
-            </script>
-        </xsl:when>
-        <xsl:otherwise>
-            <script type="text/javascript">
-                <![CDATA[
-                var module = getParameterByName("DbPAR");
-                var helpID = getParameterByName("HID");
-                var system = getSystem();
-                fixURL(module,system);
-                var dbg = getParameterByName("Debug");
-                if (dbg == null){dbg=0}
-                document.getElementById("DEBUG").style.display = (dbg == 0) ? "none":"block";
-                document.getElementById("bm_module").innerHTML ="Module is: "+module;
-                document.getElementById("bm_system").innerHTML ="System is: "+system;
-                document.getElementById("bm_HID").innerHTML ="HID is: "+helpID;
-                ]]>
-            </script>
-        </xsl:otherwise>
-    </xsl:choose>
-    <xsl:if test="$online">
-        <!-- Piwik -->
-        <script type="text/javascript">
-            <![CDATA[
-            var _paq = _paq || [];
-            /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-            _paq.push(['disableCookies']);
-            _paq.push(['trackPageView']);
-            _paq.push(['enableLinkTracking']);
-            (function() {
-            var u="//piwik.documentfoundation.org/";
-            _paq.push(['setTrackerUrl', u+'piwik.php']);
-            _paq.push(['setSiteId', '68']);
-            var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-            g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
-            })();
-            ]]>
-        </script>
-        <!-- End Piwik Code -->
-    </xsl:if>
+    <footer>
+        <xsl:if test="$online">
+            <p><a href="https://www.libreoffice.org/imprint" target="_blank">Impressum (Legal Info)</a> | <a href="https://www.libreoffice.org/privacy" target="_blank">Privacy Policy</a> | <a href="https://www.documentfoundation.org/statutes.pdf" target="_blank">Statutes (non-binding English translation)</a> - <a href="https://www.documentfoundation.org/satzung.pdf" target="_blank">Satzung (binding German version)</a> | Copyright information: Unless otherwise specified, all text and images on this website are licensed under the <a href="https://www.libreoffice.org/download/license/" target="_blank">Mozilla Public License v2.0</a>. “LibreOffice” and “The Document Foundation” are registered trademarks of their corresponding registered owners or are in actual use as trademarks in one or more countries. Their respective logos and icons are also subject to international copyright laws. Use thereof is explained in our <a href="https://wiki.documentfoundation.org/TradeMark_Policy" target="_blank">trademark policy</a>. LibreOffice was based on OpenOffice.org.</p>
+        </xsl:if>
+        <div id="DEBUG" class="debug">
+            <h3 class="bug">Help content debug info:</h3>
+            <p>This page is: <a href="https://opengrok.libreoffice.org/xref/help/source{$filename}" target="_blank"><xsl:value-of select="$filename"/></a></p>
+            <p>Title is: <xsl:value-of select="$title"/></p>
+            <p id="bm_module"></p>
+            <p id="bm_system"></p>
+            <p id="bm_HID"></p>
+        </div>
+    </footer>
     </body>
 </html>
 </xsl:template>
@@ -476,35 +423,35 @@
 
 <!-- LIST -->
 <xsl:template match="list">
-	<xsl:choose>
-		<xsl:when test="@type='ordered'">
-			<ol>
-				<xsl:if test="@startwith">
-					<xsl:attribute name="start"><xsl:value-of select="@startwith"/></xsl:attribute>
-				</xsl:if>
-				<xsl:apply-templates />
-			</ol>
-		</xsl:when>
-		<xsl:otherwise>
-			<ul><xsl:apply-templates /></ul>
-		</xsl:otherwise>
-	</xsl:choose>
+    <xsl:choose>
+        <xsl:when test="@type='ordered'">
+            <ol>
+                <xsl:if test="@startwith">
+                    <xsl:attribute name="start"><xsl:value-of select="@startwith"/></xsl:attribute>
+                </xsl:if>
+                <xsl:apply-templates />
+            </ol>
+        </xsl:when>
+        <xsl:otherwise>
+            <ul><xsl:apply-templates /></ul>
+        </xsl:otherwise>
+    </xsl:choose>
 </xsl:template>
 
 <xsl:template match="list" mode="embedded">
-	<xsl:choose>
-		<xsl:when test="@type='ordered'">
-			<ol>
-				<xsl:if test="@startwith">
-					<xsl:attribute name="start"><xsl:value-of select="@startwith"/></xsl:attribute>
-				</xsl:if>
-				<xsl:apply-templates mode="embedded"/>
-			</ol>
-		</xsl:when>
-		<xsl:otherwise>
-			<ul><xsl:apply-templates mode="embedded"/></ul>
-		</xsl:otherwise>
-	</xsl:choose>
+    <xsl:choose>
+        <xsl:when test="@type='ordered'">
+            <ol>
+                <xsl:if test="@startwith">
+                    <xsl:attribute name="start"><xsl:value-of select="@startwith"/></xsl:attribute>
+                </xsl:if>
+                <xsl:apply-templates mode="embedded"/>
+            </ol>
+        </xsl:when>
+        <xsl:otherwise>
+            <ul><xsl:apply-templates mode="embedded"/></ul>
+        </xsl:otherwise>
+    </xsl:choose>
 </xsl:template>
 
 <!-- LISTITEM -->
@@ -522,12 +469,12 @@
 <!-- OBJECT -->
 <xsl:template match="object">
     <xsl:if test="$online">
-	    <xsl:call-template name="insertobject"/>
+        <xsl:call-template name="insertobject"/>
     </xsl:if>
 </xsl:template>
 <xsl:template match="object" mode="embedded">
     <xsl:if test="$online">
-	    <xsl:call-template name="insertobject"/>
+        <xsl:call-template name="insertobject"/>
     </xsl:if>
 </xsl:template>
 
@@ -541,7 +488,7 @@
             </xsl:call-template>
         </xsl:when>
 
-        <xsl:when test="contains(' note warning tip ',@role)">
+        <xsl:when test="@role='note' or @role='tip' or @role='warning'">
             <xsl:call-template name="insertnote">
                 <xsl:with-param name="type" select="@role" />
             </xsl:call-template>
@@ -551,8 +498,12 @@
             <xsl:apply-templates />
         </xsl:when>
 
-        <xsl:when test="@role='bascode'">
-            <xsl:call-template name="insertbascode" />
+        <xsl:when test="@role='bascode' or @role='pycode'">
+            <xsl:value-of select="." />
+        </xsl:when>
+
+        <xsl:when test="@role='smathcode'">
+            <p id="{@id}" class="smathcode"><span class="input" data-tooltip="{$ui_copyclip}"><xsl:apply-templates /></span></p>
         </xsl:when>
 
         <xsl:when test="@role='logocode'">
@@ -582,7 +533,7 @@
             </xsl:call-template>
         </xsl:when>
 
-        <xsl:when test="contains(' note warning tip ',@role)">
+        <xsl:when test="@role='note' or @role='tip' or @role='warning'">
             <xsl:call-template name="insertnote">
                 <xsl:with-param name="type" select="@role" />
             </xsl:call-template>
@@ -592,6 +543,17 @@
             <xsl:apply-templates />
         </xsl:when>
 
+        <xsl:when test="@role='bascode' or @role='pycode'">
+            <xsl:value-of select="." />
+        </xsl:when>
+
+        <xsl:when test="@role='smathcode'">
+            <p id="{@id}" class="smathcode"><span class="input" data-tooltip="{$ui_copyclip}"><xsl:apply-templates /></span></p>
+        </xsl:when>
+
+        <xsl:when test="@role='logocode'">
+            <xsl:call-template name="insertlogocode" />
+        </xsl:when>
         <xsl:otherwise>
             <xsl:call-template name="insertpara" />
         </xsl:otherwise>
@@ -654,94 +616,82 @@
 
 <!-- SWITCH -->
 <xsl:template match="switch">
-    <xsl:variable name="idsw" select="concat('swln',generate-id())"/>
-    <span id="{$idsw}" class="switch">
-        <xsl:choose>
-            <xsl:when test ="@select = 'sys'">
-                <xsl:apply-templates />
-                <script type="text/javascript">
-                    <![CDATA[setSystemSpan("]]><xsl:value-of select="$idsw"/><![CDATA[");]]>
-                </script>
-            </xsl:when>
-            <xsl:when test ="@select = 'appl'">
+    <xsl:choose>
+        <xsl:when test ="@select = 'sys'">
+            <xsl:variable name="idsw" select="concat('swlnsys',generate-id())"/>
+            <span id="{$idsw}" class="switch">
                 <xsl:apply-templates />
-                <script type="text/javascript">
-                    <![CDATA[setApplSpan("]]><xsl:value-of select="$idsw"/><![CDATA[");]]>
-                </script>
-            </xsl:when>
-            <xsl:otherwise>
+            </span>
+        </xsl:when>
+        <xsl:when test ="@select = 'appl'">
+            <xsl:variable name="idsw" select="concat('swlnappl',generate-id())"/>
+            <span id="{$idsw}" class="switch">
                 <xsl:apply-templates />
-            </xsl:otherwise>
-        </xsl:choose>
-    </span>
+            </span>
+        </xsl:when>
+        <xsl:otherwise>
+            <p class="debug">Unsupported switch condition.</p>
+        </xsl:otherwise>
+    </xsl:choose>
 </xsl:template>
 <xsl:template match="switch" mode="embedded">
-    <xsl:variable name="idsw" select="concat('swln',generate-id())"/>
-    <span id="{$idsw}" class="switch">
-        <xsl:choose>
-            <xsl:when test ="@select = 'sys'">
+    <xsl:choose>
+        <xsl:when test ="@select = 'sys'">
+            <xsl:variable name="idsw" select="concat('swlnsys',generate-id())"/>
+            <span id="{$idsw}" class="switch">
                 <xsl:apply-templates mode="embedded"/>
-                <script type="text/javascript">
-                    <![CDATA[setSystemSpan("]]><xsl:value-of select="$idsw"/><![CDATA[");]]>
-                </script>
-            </xsl:when>
-            <xsl:when test ="@select = 'appl'">
-                <xsl:apply-templates />
-                <script type="text/javascript">
-                    <![CDATA[setApplSpan("]]><xsl:value-of select="$idsw"/><![CDATA[");]]>
-                </script>
-            </xsl:when>
-            <xsl:otherwise>
-                <xsl:apply-templates />
-            </xsl:otherwise>
-        </xsl:choose>
-    </span>
+            </span>
+        </xsl:when>
+        <xsl:when test ="@select = 'appl'">
+            <xsl:variable name="idsw" select="concat('swlnappl',generate-id())"/>
+            <span id="{$idsw}" class="switch">
+                <xsl:apply-templates mode="embedded"/>
+            </span>
+        </xsl:when>
+        <xsl:otherwise>
+            <p class="debug">Unsupported switch condition.</p>
+        </xsl:otherwise>
+    </xsl:choose>
 </xsl:template>
 
 <!-- SWITCHINLINE -->
 <xsl:template match="switchinline">
-    <xsl:variable name="idsw" select="concat('swln',generate-id())"/>
-    <span id="{$idsw}" class="switchinline">
-        <xsl:choose>
-            <xsl:when test ="@select = 'sys'">
+    <xsl:choose>
+        <xsl:when test ="@select = 'sys'">
+            <xsl:variable name="idsw" select="concat('swlnsys',generate-id())"/>
+            <span id="{$idsw}" class="switchinline">
                 <xsl:apply-templates />
-                <script type="text/javascript">
-                    <![CDATA[setSystemSpan("]]><xsl:value-of select="$idsw"/><![CDATA[");]]>
-                </script>
-            </xsl:when>
-            <xsl:when test ="@select = 'appl'">
+            </span>
+        </xsl:when>
+        <xsl:when test ="@select = 'appl'">
+            <xsl:variable name="idsw" select="concat('swlnappl',generate-id())"/>
+            <span id="{$idsw}" class="switchinline">
                 <xsl:apply-templates />
-                <script type="text/javascript">
-                    <![CDATA[setApplSpan("]]><xsl:value-of select="$idsw"/><![CDATA[");]]>
-                </script>
-            </xsl:when>
-            <xsl:otherwise>
-               <xsl:apply-templates />
-            </xsl:otherwise>
-        </xsl:choose>
-    </span>
+            </span>
+        </xsl:when>
+        <xsl:otherwise>
+            <p class="debug">Unsupported switch condition.</p>
+        </xsl:otherwise>
+    </xsl:choose>
 </xsl:template>
 <xsl:template match="switchinline" mode="embedded">
-    <xsl:variable name="idsw" select="concat('swln',generate-id())"/>
-    <span id="{$idsw}" class="switchinline">
-        <xsl:choose>
-            <xsl:when test ="@select = 'sys'">
-                <xsl:apply-templates />
-                <script type="text/javascript">
-                    <![CDATA[setSystemSpan("]]><xsl:value-of select="$idsw"/><![CDATA[");]]>
-                </script>
-            </xsl:when>
-            <xsl:when test ="@select = 'appl'">
-                <xsl:apply-templates />
-                <script type="text/javascript">
-                    <![CDATA[setApplSpan("]]><xsl:value-of select="$idsw"/><![CDATA[");]]>
-                </script>
-            </xsl:when>
-            <xsl:otherwise>
-                <xsl:apply-templates />
-            </xsl:otherwise>
-        </xsl:choose>
-    </span>
+    <xsl:choose>
+        <xsl:when test ="@select = 'sys'">
+            <xsl:variable name="idsw" select="concat('swlnsys',generate-id())"/>
+            <span id="{$idsw}" class="switchinline">
+                <xsl:apply-templates mode="embedded"/>
+            </span>
+        </xsl:when>
+        <xsl:when test ="@select = 'appl'">
+            <xsl:variable name="idsw" select="concat('swlnappl',generate-id())"/>
+            <span id="{$idsw}" class="switchinline">
+                <xsl:apply-templates mode="embedded"/>
+            </span>
+        </xsl:when>
+        <xsl:otherwise>
+            <p class="debug">Unsupported switch condition.</p>
+        </xsl:otherwise>
+    </xsl:choose>
 </xsl:template>
 
 <!-- TABLE -->
@@ -800,6 +750,65 @@
     </xsl:call-template>
 </xsl:template>
 
+<!-- XHP extensions (2018) -->
+<!-- H1-H6 -->
+<xsl:template match="h1 | h2 | h3 | h4 | h5 | h6">
+    <xsl:element name="{local-name()}">
+        <xsl:attribute name="id"><xsl:value-of select="@id"/></xsl:attribute><xsl:apply-templates />
+    </xsl:element>
+</xsl:template>
+<xsl:template match="h1 | h2 | h3 | h4 | h5 | h6" mode="embedded">
+    <xsl:element name="{concat('h',substring-after(local-name(),'h') + 1)}">
+        <xsl:attribute name="id"><xsl:value-of select="@id"/></xsl:attribute><xsl:apply-templates mode="embedded"/>
+    </xsl:element>
+</xsl:template>
+
+<!-- INPUT -->
+<xsl:template match="input">
+    <span class="input" data-tooltip="{$ui_copyclip}"><xsl:apply-templates /></span>
+</xsl:template>
+<xsl:template match="input" mode="embedded">
+    <span class="input" data-tooltip="{$ui_copyclip}"><xsl:apply-templates mode="embedded"/></span>
+</xsl:template>
+
+<!--MENUITEM, KEYCODE, LITERAL, WIDGET-->
+<xsl:template match="menuitem | keycode | literal | widget">
+    <span class="{local-name()}"><xsl:apply-templates /></span>
+</xsl:template>
+<xsl:template match="menuitem | input | keycode | literal" mode="embedded">
+    <span class="{local-name()}"><xsl:apply-templates mode="embedded"/></span>
+</xsl:template>
+
+<!--NOTE TIP AND WARNING-->
+<xsl:template match="tip | note | warning">
+    <xsl:variable name="imgsrc">
+        <xsl:choose>
+            <xsl:when test="local-name()='note'"><xsl:value-of select="$note_img"/></xsl:when>
+            <xsl:when test="local-name()='tip'"><xsl:value-of select="$tip_img"/></xsl:when>
+            <xsl:when test="local-name()='warning'"><xsl:value-of select="$warning_img"/></xsl:when>
+        </xsl:choose>
+    </xsl:variable>
+    <div class="{local-name()}">
+        <div class="noteicon"><img src="{$imgsrc}" alt="{local-name()}" title="{local-name()}" style="{$iconsizestyle}"/></div>
+        <div class="notetext"><p id="{@id}"><xsl:apply-templates /></p></div>
+    </div>
+    <br/>
+</xsl:template>
+<xsl:template match="tip | note | warning" mode="embedded">
+    <xsl:variable name="imgsrc">
+        <xsl:choose>
+            <xsl:when test="local-name()='note'"><xsl:value-of select="$note_img"/></xsl:when>
+            <xsl:when test="local-name()='tip'"><xsl:value-of select="$tip_img"/></xsl:when>
+            <xsl:when test="local-name()='warning'"><xsl:value-of select="$warning_img"/></xsl:when>
+        </xsl:choose>
+    </xsl:variable>
+    <div class="{local-name()}">
+        <div class="noteicon"><img src="{$imgsrc}" alt="{local-name()}" title="{local-name()}" style="{$iconsizestyle}"/></div>
+        <div class="notetext"><p id="{@id}"><xsl:apply-templates mode="embedded"/></p></div>
+    </div>
+    <br/>
+</xsl:template>
+
 <!-- In case of missing help files -->
 <xsl:template match="help-id-missing"><xsl:value-of select="$Id"/></xsl:template>
 
@@ -866,7 +875,6 @@
 
 </xsl:template>
 
-
 <!-- Insert Paragraph -->
 <xsl:template name="insertpara">
     <xsl:variable name="role">
@@ -883,15 +891,17 @@
 </xsl:template>
 
 <xsl:template match="bascode">
-    <div class="bascode" itemscope="true" itemtype="http://schema.org/SoftwareSourceCode" itemprop="codeSampleType" content="snippet"><xsl:apply-templates /></div>
+    <div class="bascode" itemscope="true" itemtype="http://schema.org/SoftwareSourceCode" itemprop="codeSampleType" content="snippet"><pre><code class="language-visual-basic line-numbers"><xsl:apply-templates /></code></pre></div>
 </xsl:template>
 <xsl:template match="bascode" mode="embedded">
-    <div class="bascode" itemscope="true" itemtype="http://schema.org/SoftwareSourceCode" itemprop="codeSampleType" content="snippet"><xsl:apply-templates /></div>
+    <div class="bascode" itemscope="true" itemtype="http://schema.org/SoftwareSourceCode" itemprop="codeSampleType" content="snippet"><pre><code class="language-visual-basic line-numbers"><xsl:apply-templates mode="embedded" /></code></pre></div>
 </xsl:template>
 
-<!-- Insert Basic code snippet  -->
-<xsl:template name="insertbascode">
-    <pre class="bascodepar"><xsl:apply-templates /></pre><br/>
+<xsl:template match="pycode">
+    <div class="pycode" itemscope="true" itemtype="http://schema.org/SoftwareSourceCode" itemprop="codeSampleType" content="snippet"><pre><code class="language-python line-numbers"><xsl:apply-templates /></code></pre></div>
+</xsl:template>
+<xsl:template match="pycode" mode="embedded">
+    <div class="pycode" itemscope="true" itemtype="http://schema.org/SoftwareSourceCode" itemprop="codeSampleType" content="snippet"><pre><code class="language-python line-numbers"><xsl:apply-templates mode="embedded" /></code></pre></div>
 </xsl:template>
 
 <!-- Insert Logo code snippet  -->
@@ -964,7 +974,7 @@
         <xsl:apply-templates select="$doc//variable[@id=$anchor]" mode="embedded"/>
     </xsl:variable>
     <div class="{$type}">
-        <div class="noteicon"><img src="{$imgsrc}" alt="{$alt}" title="{$alt}"/></div>
+        <div class="noteicon"><img src="{$imgsrc}" alt="{$alt}" title="{$alt}" style="{$iconsizestyle}"/></div>
         <div class="notetext"><p><xsl:apply-templates /></p></div>
     </div>
     <br/>
@@ -996,10 +1006,10 @@
     <xsl:variable name="auxID" select="concat(@select,generate-id())"/>
     <xsl:choose>
         <xsl:when test="$embedded = 'yes'">
-            <span hidden="true" id="{$auxID}"><xsl:apply-templates mode="embedded"/></span>
+            <span hidden="true" id="{$auxID}" class="{@select}"><xsl:apply-templates mode="embedded"/></span>
         </xsl:when>
         <xsl:otherwise>
-            <span hidden="true" id="{$auxID}"><xsl:apply-templates/></span>
+            <span hidden="true" id="{$auxID}" class="{@select}"><xsl:apply-templates/></span>
         </xsl:otherwise>
     </xsl:choose>
 </xsl:template>
@@ -1125,11 +1135,7 @@
             <xsl:call-template name="convert2px"><xsl:with-param name="value" select="@height"/></xsl:call-template>
         </xsl:if>
     </xsl:variable>
-    <img src="{$src2}" alt="{$alt}" title="{$alt}" height="{$height}" width="{$width}">
-        <xsl:if test="ancestor::tablecell">
-            <xsl:attribute name="class"><xsl:value-of select="'imageicon'"/></xsl:attribute>
-        </xsl:if>
-    </img>
+    <img src="{$src2}" alt="{$alt}" title="{$alt}" style="{concat('width:',$width,';height:',$height)}"/>
 </xsl:template>
 
 <!-- Insert an object -->