SideNav Theme

Added by James Mortimer, last edited by James Mortimer on Jun 01, 2006  (view change)
Author James Mortimer
Version 1
Platform Version 2.1.5
Source SideNav Main.vm SideNav Page.vm
Description Simple side navigation theme with 1.7em linespacing.
URL http://confluence.atlassian.com/display/CONFEXT/SideNav+Theme

History

Version 1

  • changed all fonts on page to 12 point instead of default 9 point
  • changed spacing on all fonts to 1.7em
  • resized h1 through h5 accordingly
  • moved the space name and page name and 'weclome message' and print/pdf icons from the 'main' layout to the 'page' layout
  • moved most of the icons and page into to a left navigation panel, didn't add or change any content otherwise
  • Removed confluences '+' add page icon using a display:none style
    • I can't seem to get even linespacing > 1 em (1 equivalent measure to the current font height) while still allowing confluences '+' addpage graphic in superscript.

Screenshots

Screenshots

Source code and Installation Instructions

As an site admin, replace the appropriate site or space layout velocity scripts with:

Site Layouts

  • Main Layout SideNav Main.vm 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    #if ($sitemeshPage.getProperty("page.spacename"))
        <title>$title - $sitemeshPage.getProperty("page.spacename") - #siteTitle()</title>
    #else
        <title>$title - #siteTitle()</title>
    #end
    #standardHeader()
</head>
## HTML HEADER ENDS

## HTML BODY BEGINS
#onLoad()

<p/>
<style type="text/css">
div,p,a,body,li,ul,ol,td,tr,pre,code,table,span {
  font-size:14px;
  line-height:1.7em;
}
div.wiki-content {
  font-size:14px;
  line-height:1.7em;
}
div.wiki-content p {
  font-size:14px;
  line-height:1.7em;
}
div.wiki-content a {
  font-color:#0000FF;
  text-decoration:none;
}
div.wiki-content a:hover {
  font-color:#0000FF;
  text-decoration:underline;
  background-color:#DFDFFF;
}
div.wiki-content p span.nobr a.createlink {
  color:#7F0000;
  text-decoration:none;
}
div.wiki-content p span.nobr a.createlink:hover {
  background-color:#FFDFDF;
  color:#7F0000;
  text-decoration:underline;
}
/* due to a bug in IE, we can't use icons if we want nice even linespacing greater than 1 */
span.nobr a sup img.rendericon {
  display:none;
}
h1 { font-size:22px; line-height:1.7em}
h2 { font-size:20px; line-height:1.7em}
h3 { font-size:18px; line-height:1.7em}
h4 { font-size:16px; line-height:1.7em}
h5 { font-size:14px; line-height:1.7em}
.smalltext {
  font-size:11px;
  line-height:1.7em;
}
.bigtext,.largetext {
  font-size:18px;
  line-height:1.7em;
}
.greynavbar,.greynavbar ul li,.greynavbar ul,.greynavbar ul li a {
  font-size:14px;
  line-height:16px;
}
</style>
## CONTENT DIV BEGINS
<div id="PageContent">

    <table border="0" cellpadding="0" cellspacing="0" width="100%">

        ## LOCATION BAR: (BREADCRUMBS AND SEARCH BOX) BEGIN
        <tr class="topBar">
            <td align="left" width="85%">
                #logoBlock($sitemeshPage.getProperty("page.spacekey"))&nbsp;
                <span class="topBarDiv"> #breadcrumbs() </span>
            </td>

            <td align="right" valign="middle" width="1%" nowrap>
                #quickSearch()
            </td>
        </tr>
        ## LOCATION BAR: (BREADCRUMBS AND SEARCH BOX) END

        ## INFO BAR: (LOGO, LOCATION, AND USER/GROUP OPTIONs) BEGIN
        ## INFO BAR: (LOGO, LOCATION, AND USER/GROUP OPTIONs) END
    </table>

    ## PAGE DEPENDENT INLINE DECORATOR RENDERING SHOULD BEGIN HERE
    $body

    ## PAGE DEPENDENT INLINE DECORATOR RENDERING SHOULD END HERE
</div>
## CONTENT DIV ENDS

#parse ("/decorators/includes/footer.vmd")

Content Layouts

  • Page Layout SideNav Page.vm 
    ## PAGE SPECIFIC DECORATOR
## Here the context is the page. Modes are 'view', 'edit', 'edit-preview', 'view-information', and 'view-attachments'.


#set ($helper = $params.get("helper"))
#set ($mode = $params.get("mode"))
#set ($confPage = $helper.page)
#set ($infoPanelWidth = $params.get("infopanel-width"))

#infoPanelInitFromParams()
## GENERAL PAGE DECORATING BEGINS

<table border="0" cellpadding="0" cellspacing="0" width="100%">

#if ($action.isPrintableVersion() == false)
    <tr>
        <td style="vertical-align:top">
            <div class="greynavbar">
                <div style="margin:10px;padding:10px;width:130px;">
                    #if(!$action.anonymousUser && !$action.isPrintableVersion())
                        <span style="padding: 5px; width: 40px; border: 1px solid #cccccc; margin: 0px;float:right;">#favouriteLink()#watchLink()</span>
                    #end
                    ## history, profile, admin, logout links
                    #usernavbar()
                    #printableicon()
                    #if (!$sitemeshPage.getProperty("page.suppressPdfLink"))
                        #pdficon()
                    #end
                    <hr/>
                    #viewPageLinkWithConfirm()<br/>
                    #if ($page.isLatestVersion() == true)#editPageLink()<br/>#end
                    #if ($page.isLatestVersion() == true)#viewPageAttachmentsLinkWithConfirm()<br/>#end
                    #viewPageInfoLinkWithConfirm()<br/>
                    <hr/>
                    #browseSpaceLink()<br/>
                    #addPageLink()<br/>
                    #addNewsLink()<br/>
                    <hr/>
                    #if ($mode == "view")
                            #set ($labelable = $page)
                            #permitSearchEngines()
                            #editReport()<hr/>
                            #parse ("/labels/labels-include.vm")<hr/>
                            #if ($helper.isHistoricalVersion())
                                #versionInfo()<hr/>
                            #end
                    #end
                </div>
            </div>
        </td>
    <!--/tr-->
#end
    <!--tr-->
        <td valign="top" class="pagebody">

            ## MODE SPECIFIC DECORATING BEGINS
            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="clear: both">
                <tr>
                    <td width='100%' class="pagecontent" valign="top">

                    #parse ("/template/includes/actionerrors.vm")

                    #*
                        Display page based on mode: currently 'view', 'edit', 'preview-edit', 'info' and 'attachments.
                        See the individual page templates (viewpage.vm, editpage.vm, etc.) for the setting of the mode parameter.
                    *#
                    ## VIEW
                    #if ($mode == "view")
                            #set ($labelable = $page)
                            #permitSearchEngines()
                            <div>
                                <span style="font-weight:bold;font-size:large;">$confPage.title</span>&nbsp;
                                <span class="logoSpaceLink">($helper.space.name)</span>
                            </div>
                            #if ($helper.isHistoricalVersion())
                                ##versionInfo()
                            #end

                            <div class="wiki-content">
                               $body
                            </div>

                            #trackbackRdf ($trackbackUtils.getContentIdentifier($page) $page.title $trackbackUtils.getPingUrl($page))

                            #renderChildren()

                            #renderComments()

                    ## EDIT || PREVIEW-EDIT
                    #elseif ($mode == "edit" || $mode == "edit-preview")
                        $body

                    ## INFO
                    #elseif ($mode == "view-information")
                        $body

                    ## ATTACHMENTS
                    #elseif ($mode == "view-attachments" || $mode == "move-attachments")
                        $body
                    #end
                    </td>


                    ## INFO PANEL FOR ANY PAGE
                    #if ($infoPanelRequired == true)
                        <td valign="top" id="helptd" style="display:block; width:$infoPanelWidth;">
                            #infoPanel(true true true true)
                        </td>
                    #end
            </tr>
        </table>

        ## MODE SPECIFIC DECORATING ENDS

        </td>
    </tr>
</table>
## GENERAL PAGE DECORATING ENDS

#set ($viewingPageInfo = $params.get('viewingPageInfo'))
#parse ("/pages/page-breadcrumbs.vm")

Labels

plugin plugin Delete
non-repository non-repository Delete
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.

Comments (4)

 

  1. Jun 01, 2006

    Mike Cannon-Brookes says:

    James - great work! Any reason not to include this theme as a plugin? It's easie...

    James - great work! Any reason not to include this theme as a plugin? It's easier for others to reuse the theme then by simply uploading the JAR. (I'm really interested in whether the process is too hard , if you didn't know etc - what we can improve!)

    1. Jun 02, 2006

      Clint Stivers says:

      Creating a theme plugin from these decorators should be a breeze since you are m...

      Creating a theme plugin from these decorators should be a breeze since you are merely overriding the default page.vmd and main.vmd. You simply need to define the theme and attach these files as layout components overriding the defaults as discribed HERE. We have done something similar by overriding the page.vmd using an instance of the {include} macro in the view mode. This allows us to attach a menu to every page in a space (or site if we set the theme as global).

    2. Jun 15, 2006

      James Mortimer says:

      Thanks Mike and Clint. I was aware that plugins could be made. However I was hop...

      Thanks Mike and Clint. I was aware that plugins could be made. However I was hoping maybe someone more adept than I would pick that task up, as I haven't taken, and probably don't have, the time to learn at this time. If I had all the time in the world.....

      If I, or a helpful friend, were to put this in a jar and define a theme, is there also a public CVS or SVN for these things that I could post to?

      Just FYI, I'm not even a developer and barely know what a JAR is ... so the fact that I've already made so many mods for Confluence (some posted, like [edit-include], many I haven't had time yet) speaks for how easy it is to play with the system.

      1. Jun 20, 2006

        Jonathan Nolen says:

        Thanks for the contribution, James! And thanks for the comments. Yes, we host a...

        Thanks for the contribution, James! And thanks for the comments.

        Yes, we host a subversion repository for plugin developers. It would be great if you (or someone) could make his into a theme plugin. Others would be much more likely to use it, and perhaps add their own enhancements.