[All Adaptavist Apps]
Excerpt |
---|
The first task in our customisation was the layout - choosing which panels to show and configuring what appears inside them... |
Using the buttons at the top of the Layout Tab we enabled the following panels within the theme (and disabled any panels not listed)...
We've moved the menu in to the "navigation" panel so that the menu panel can be used to display a site banner message.
After selecting the desired panels, we set the background colour on most of them to "transparent" - the notable exceptions being:
#f3f4f3
(a light grey colour)#fff
(white)#e0e0e0
(a medium grey) - this is the colour that appears by default when no tab is selectedThere are a couple of other simple panel settings we made using the panel editor:
92px
- this is the size of the top part of our header background images (see Theme Images for the actual images)center
- this make short site banner messages look a bit nicer.NB: To set the text size and alignment of the menu panel you need to temporarily enable the panel, make the changes and then disable it.
The next step was to get some customised content in to the panels as follows...
We used table macros from the Content Formatting Plugin to arrange the content and then used various Theme Builder macros to display the space logo, space title, breadcrumb trail and linked the various elements with the menulink macro.
Code Block |
---|
Wiki Markup |
{excerpt}The first task in our customisation was the layout - choosing which panels to show and configuring what appears inside them...{excerpt} h2. Panel Selection Using the buttons at the top of the [Layout Tab|USERGUIDE:Layout Tab] we enabled the following panels within the theme... * *Header* - the logos, space title and breadcrumbs appear here * *Navigation* - the menu bar appears here (moved from the Menu panel) * *Left Sidebar* - this is where tabs appear, if present * *Left Slider* - this is used to display a coloured bar down the side of the tabs * *Right Sidebar* - used to display various widgets such as Navigator and Related Communities * *Right Slider* - used to hide the right sidebar * *Title* - the page title, sometimes links and labels * *Footnote* - used to display comments, etc. * *Footer* - copyright statement, etc. We've moved the menu in to the "navigation" panel so that the menu panel can be used to display a site banner message. After selecting the desired panels, we set the background colour on most of them to "transparent" - the notable exceptions being: * The *Document* panel background colour was set to {{#f3f4f3}} (a light grey colour) * The *Title*, *Content* and *Footnotes* panels background colour was set to {{#fff}} (white) * The *Left Slider* background colour was set to {{#e0e0e0}} (a medium grey) - this is the colour that appears by default when no tab is selected There are a couple of other simple panel settings we made using the [panel editor|USERGUIDE:Panel Editor]: * The header panel height is set to {{93px}} - this is the size of the top part of our header background images (see [Theme Images] for the actual images) * The horizontal alignment of the menu panel is set to {{center}} - this make short site banner messages look a bit nicer h2. Panel Content The next step was to get some customised content in to the panels as follows... h3. Header Panel We used table macros from the Content Formatting Plugin to arrange the content and then used various Theme Builder macros to display the space logo, space title, breadcrumb trail and linked the various elements with the menulink macro. {code} {table:cellspacing=0|cellpadding=0|width=97%|height=83|align=center} {tr} {td:valign=middle|width=55} {menulink:home}{builder-logo:global=false}{menulink} {td} {td:valign=middle} {menulink:home|class=space-title}{builder-spacetitle}{menulink} {div:class=breadcrumbs}{builder-breadcrumbs}{div} {td} {td:valign=middle|align=right|width=260} {menulink:dashboard|class=site-logo}!Builder:Theme Images^adaptavist-light-small.png!{menulink} {td} {tr} {table} {code} |
Note:
...
We
...
decided
...
to
...
store
...
the
...
main
...
Adaptavist
...
logo
...
as
...
an
...
attachment
...
on
...
a
...
page
...
rather
...
than
...
setting
...
it
...
as
...
the
...
global
...
logo
...
as
...
we
...
still
...
have
...
some
...
internal
...
areas
...
of
...
our
...
site
...
using
...
the
...
old
...
global
...
logo.
We decided to customise our menu in several ways:
The menu notation is quite involved and as such we will discuss it on the next page, 2 - Menu Customisation.
The left sidebar is where we display tabs, if applicable to the space being viewed. To do this we used the following notation:
Code Block |
---|
h3. Menu panel We decided to customise our menu in several ways: * extra features shown to logged-in users - eg. the "My" menu * include some functionality from our Community Bubbles plugin (eg. social networking) * allow users to customise their "Home" menu (they can add their favourite spaces to it) * ability to include space-specific menu items * simplified View menu * admin-only Edit menu * static Contact menu * icons on the right side of the menu The menu notation is quite involved and as such we will discuss it on the next page, [2 - Menu Customisation]. h3. Left Sidebar The left sidebar is where we display tabs, if applicable to the space being viewed. To do this we used the following notation: {code} {builder-show:page=Tabs}{builder-hide:title=Tabs}{import:Tabs}{builder-hide}{builder-show} {code} |
Some
...
spaces
...
don't
...
require
...
tabs
...
and
...
those
...
that
...
do
...
often
...
have
...
space-specific
...
tabs.
...
As
...
such
...
we
...
decided
...
to
...
simply
...
import
...
a
...
page
...
called
...
"Tabs"
...
(if
...
found)
...
allowing
...
complete
...
customisation
...
of
...
the
...
sidebar
...
on
...
a
...
space-by-space
...
basis.
...
The
...
actual
...
content
...
of
...
the
...
Tabs
...
page
...
will
...
be
...
discussed
...
later
...
in
...
the
...
tutorial,
...
in
...
topic
...
...
...
...
.
...
...
...
There
...
are
...
a
...
wide
...
variety
...
of
...
things
...
that
...
we
...
want
...
to
...
display
...
in
...
the
...
right
...
sidebar
...
and
...
the
...
list
...
will
...
grow
...
and
...
change
...
over
...
time.
...
Again,
...
we
...
wanted
...
the
...
sidebar
...
to
...
be
...
customisable
...
on
...
a
...
space-by-space
...
basis
...
so
...
we
...
used
...
another
...
feature
...
from
...
our
...
Community
...
Bubbles
...
plugin:
...
Portals:
Code Block |
---|
} {portal:RIGHT-SIDEBAR} {code} |
This
...
tiny
...
bit
...
of
...
wiki
...
notation
...
is
...
all
...
it
...
takes
...
to
...
display
...
configurable
...
widgets
...
in
...
the
...
right
...
sidebar.
...
On
...
a
...
space
...
by
...
space
...
basis
...
we
...
simply
...
choose
...
which
...
widgets
...
to
...
show
...
(if
...
any)
...
and
...
Community
...
Bubbles
...
takes
...
care
...
of
...
the
...
rest.
Expand | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
{expand:I
|
|
|
|
| |||||||||
}{quote}
{ } {code} {quote}{expand} h3. Title panel Just like the header panel, |
Just like the header panel, we've
...
used
...
a
...
table
...
to
...
arrange
...
the
...
content
...
in
...
the
...
title
...
panel
...
-
...
only
...
this
...
time
...
it's
...
a
...
bit
...
more
...
complex...
Code Block |
---|
} {table:width=100%|cellpadding=0|cellspacing=0|border=0} {tr} {td:valign=middle|width=90%}h1. {builder-pagetitle}{td} {td:align=right|valign=middle|width=10%}{search-box:all=true}{td} {tr} {tr} {td:valign=top} {builder-show:context=page,blogpost|mode=view}{builder-hide:label=hide-labels} {builder-labels} {builder-hide}{builder-show} {td} {td:valign=top|class=page-links} {builder-hide:title=Forum,Home,Support|recurse=true} {compound-menuitem:edit|flat=true|icon=document_edit|caption=Edit} {compound-menuitem:pageattachments|flat=true|icon=document_attachment|caption=Files (%count%)} {builder-hide}{builder-show:title=Forum|recurse=true} {compound-menuitem:newpage|flat=true|icon=document_add|caption=New Topic|page=Forum} {builder-hide:title=Forum} {compound-menuitem:newcomment|flat=true|icon=message_add|caption=Post Reply} {builder-hide} {builder-show} {td} {tr} {table} {code} |
The
...
first
...
row
...
is
...
fairly
...
self-explanatory
...
-
...
the
...
page
...
title
...
on
...
the
...
left,
...
search
...
box
...
on
...
the
...
right.
...
The
...
second
...
row
...
is
...
a
...
little
...
more
...
involved, making use of the builder-show macro and builder-hide macro as well as the compound-menuitem macro:
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
The
...
footnotes
...
panel
...
shows
...
comments,
...
children
...
and
...
page
...
update
...
information,
...
depending
...
on
...
what
...
you
...
are
...
looking
...
at
...
within
...
a
...
space...
Code Block |
---|
} {builder-show:context=page,blogpost|mode=view}{builder-hide:title=Home}{div:class=line}{menuicon:document_info} {compound-menuitem:information|flat=true|caption=Info:} Added by {page-info:created-user} on {page-info:created-date}, last edited by {page-info:modified-user} on {page-info:modified-date} \\ {builder-children} {builder-comments}{div}{builder-hide}{builder-show} \\ {code} |
The
...
content
...
is
...
only
...
ever
...
shown
...
when
...
looking
...
at
...
either
...
a
...
page
...
or
...
a
...
blog
...
post
...
in
...
the
...
normal
...
"View"
...
mode
...
(eg.
...
it's
...
hidden
...
in
...
edit
...
mode).
...
We
...
also
...
hide
...
that
...
content
...
if
...
you're
...
looking
...
at
...
the
...
home
...
page
...
(to
...
keep
...
home
...
pages
...
nice
...
and
...
clean).
...
You'll
...
notice
...
that
...
we've
...
got
...
two
...
slashes
...
at
...
the
...
very
...
end
...
of
...
the
...
wiki
...
notation
...
-
...
that's
...
there
...
to
...
ensure
...
that
...
even
...
when
...
no
...
content
...
is
...
shown
...
there
...
is
...
at
...
least
...
something
...
output
...
within
...
the
...
panel
...
(a
...
line
...
break)
...
otherwise
...
the
...
border
...
line
...
around
...
the
...
panel
...
won't
...
work
...
properly
...
in
...
some
...
browsers.
...
...
...
In
...
the
...
footer
...
panel
...
we've
...
just
...
used
...
basic
...
wiki
...
notation
...
to
...
show
...
our
...
legal
...
messages,
...
etc:
Code Block |
---|
} {copyright} 2007 Adaptavist.com Ltd.{copyright} All rights reserved worldwide | Registered in England and Wales #5456785 | VAT Reg. GB 872 1217 39 | EIN: 98-054 5295 Site powered by Atlassian's [Confluence|ADAPTAVIST:Confluence] wiki customised with Adaptavist's [Theme Builder|ADAPTAVIST:Builder] and [Community Bubbles|ADAPTAVIST:Bubbles] plugins. | [Privacy Policy|ADAPTAVIST:Privacy Policy] | [Terms of Use|ADAPTAVIST:Terms of Use] {code} {align:right}\\ Next page: [2 - Menu Customisation]{align} h2. Optional Site Banner Message As mentioned earlier, we've moved the menu notation in to the navigation panel and hidden the menu panel. This provides us with a super-simple way to display a site banner message that will appear on all pages above the menu bar. To display a banner message, we: * enable the menu panel * put our message in to the menu panel using simple wiki notation The message should be kept short - you don't want a huge block of text appearing at the top of all pages. |
As mentioned earlier, we've moved the menu notation in to the navigation panel and hidden the menu panel.
This provides us with a super-simple way to display a site banner message that will appear on all pages above the menu bar.
To display a banner message, we:
The message should be kept short - you don't want a huge block of text appearing at the top of all pages.
Just like tabs in the left sidebar you could easily pull the message from somewhere else, however we decided to just edit messages directly within the theme layout for now.
An example message we've used in our menu panel to display an announcement throughout the site:
Code Block |
---|
New: [Theme Builder community space|Builder:Home] (forum, tutorials, news, etc)
|
Align | ||
---|---|---|
| ||
Next page: 2 - Menu Customisation |