diff --git a/doc/global/qt-html-templates-online.qdocconf b/doc/global/qt-html-templates-online.qdocconf
index 4e6770d2f35..94648c2652e 100644
--- a/doc/global/qt-html-templates-online.qdocconf
+++ b/doc/global/qt-html-templates-online.qdocconf
@@ -1,35 +1,35 @@
 HTML.nobreadcrumbs      = "true"
 
 HTML.stylesheets =  template/style/online.css
-extraimages.HTML =  images/btn_next_green.png \
-                    images/box_bg.png \
-                    images/page.png \
-                    images/arrow_down.png \
-                    images/btn_prev.png \
-                    images/blu_dot.png \
-                    images/ico_note_attention.png \
-                    images/btn_prev_green.png \
-                    images/bg_ll_blank.png \
-                    images/btn_next.png \
-                    images/bg_l_blank.png \
-                    images/ico_note.png \
-                    images/home.png \
-                    images/ico_out.png \
-                    images/header_bg.png \
-                    images/page_bg.png \
-                    images/bg_l.png \
-                    images/bg_r.png \
-                    images/breadcrumb.png \
-                    images/bullet_dn.png \
-                    images/feedbackground.png \
-                    images/bullet_gt.png \
-                    images/arrow.png \
-                    images/bullet_sq.png \
-                    images/bullet_up.png \
-                    images/sprites-combined.png \
-                    images/horBar.png \
-                    images/bg_ul_blank.png \
-                    images/bgrContent.png \
+HTML.extraimages =  template/images/btn_next_green.png \
+                    template/images/box_bg.png \
+                    template/images/page.png \
+                    template/images/arrow_down.png \
+                    template/images/btn_prev.png \
+                    template/images/blu_dot.png \
+                    template/images/ico_note_attention.png \
+                    template/images/btn_prev_green.png \
+                    template/images/bg_ll_blank.png \
+                    template/images/btn_next.png \
+                    template/images/bg_l_blank.png \
+                    template/images/ico_note.png \
+                    template/images/home.png \
+                    template/images/ico_out.png \
+                    template/images/header_bg.png \
+                    template/images/page_bg.png \
+                    template/images/bg_l.png \
+                    template/images/bg_r.png \
+                    template/images/breadcrumb.png \
+                    template/images/bullet_dn.png \
+                    template/images/feedbackground.png \
+                    template/images/bullet_gt.png \
+                    template/images/arrow.png \
+                    template/images/bullet_sq.png \
+                    template/images/bullet_up.png \
+                    template/images/sprites-combined.png \
+                    template/images/horBar.png \
+                    template/images/bg_ul_blank.png \
+                    template/images/bgrContent.png \
 
 
 HTML.headerstyles = \
@@ -47,7 +47,12 @@ HTML.endheader = \
     "    <a href=\"http://qt-project.org/\">\n" \
     "        <img src=\"http://doc-snapshot.qt-project.org/images/logo.png\" alt=\"Qt\"></img>\n" \
     "    </a>\n" \
-    "    <h1 >Reference Documentation Snapshots</h1>\n" \
+    "   <div class=\"nav-title\">\n" \
+    "    <h1 >Qt Documentation Snapshots</h1>\n" \
+    "       <div class=\"nav-subtitle\">\n" \
+    "       --snapshots of unreleased Qt documentation\n" \
+    "       </div>\n" \
+    "   </div>\n" \
     "    <div class=\"nav-main\">\n" \
     "        <div class=\"nav-main-content\">\n" \
     "            <a href=\"http://qt-project.org/doc\">Qt Releases</a>\n" \
diff --git a/doc/global/template/style/online.css b/doc/global/template/style/online.css
index 5b341d6955b..6a6e8225c84 100644
--- a/doc/global/template/style/online.css
+++ b/doc/global/template/style/online.css
@@ -134,7 +134,10 @@ font-weight:bold;
 margin-right: 20px;
 display:inline-block;
 }
-
+.nav-subtitle{
+color: #869CD1;
+margin-left: 220px;
+}
 .header{
 height:1px;
 padding:0px;
@@ -173,16 +176,11 @@ float:right;
 
 .naviNextPrevious{
 display: block;
-position: relative;
 text-align: right;
-top: -53px;
 float:right;
-height:20px;
 z-index:1;
 padding-right:10px;
-padding-top:2px;
 vertical-align:top;
-margin:0px;
 }
 
 
@@ -664,3 +662,88 @@ border:none;}
 
 .clearfix{
 clear:both;}
+
+/* start index box */
+.indexbox
+{
+width: 100%;
+display:inline-block;
+}
+
+.indexboxcont
+{
+display: block;
+
+}
+
+.indexboxcont .section
+{
+display: inline-block;
+width: 49%;
+*width:42%;
+_width:42%;
+padding:0 2% 0 1%;
+vertical-align:top;
+}
+
+.indexboxcont .indexIcon
+{
+width: 11%;
+*width:18%;
+_width:18%;
+overflow:hidden;
+}
+
+.indexboxcont .section {
+  float: left;
+}
+
+.indexboxcont .section p
+{
+padding-top: 20px;
+padding-bottom: 20px;
+}
+.indexboxcont .sectionlist
+{
+display: inline-block;
+vertical-align:top;
+width: 32.5%;
+padding: 0;
+}
+.indexboxcont .sectionlist ul
+{
+margin-bottom: 20px;
+}
+
+.indexboxcont .sectionlist ul li
+{
+line-height: 12px;
+}
+
+.content .indexboxcont li
+{
+font: normal bold 13px/1 Verdana;
+}
+
+.content .normallist li
+{
+font: normal 13px/1 Verdana;
+}
+
+.indexbox .indexIcon {
+width: 11%;
+}
+
+.indexbox .indexIcon span
+{
+display: block;
+}
+
+.indexboxcont:after
+{
+content: ".";
+display: block;
+height: 0;
+clear: both;
+visibility: hidden;
+}