[All Adaptavist Apps]

Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 4.0

Excerpt

The first task in our customisation was the layout - choosing which panels to show and configuring what appears inside them...

Panel Selection

Using the buttons at the top of the Layout Tab we enabled the following panels within the theme (and disabled any panels not listed)...

  • 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:

  • The header panel height is set to 92px - 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.
  • The text size of the menu panel was set to 10px (quite small text as we want announcement banners to be a little subtle)

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.

Panel Content

The next step was to get some customised content in to the panels as follows...

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 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|Layout Tab] we enabled the following panels within the theme (and disabled any panels not listed)...

* *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|Panel Editor]:

* The header panel height is set to {{92px}} - 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.
* The text size of the menu panel was set to 10px (quite small text as we want announcement banners to be a little subtle)

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.

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|AtlassianConfluence:table macro] from the Content Formatting Plugin to arrange the content and then used various Theme Builder macros to display the [space logo|builder-logo macro], [space title|builder-spacetitle macro], [breadcrumb trail|builder-breadcrumbs macro] and linked the various elements with the [menulink macro|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.

...

Navigation

...

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

...

.

...

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 Block
}
{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

...

3

...

-

...

Tabs

...

.

...

Right

...

Sidebar

...

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:I
Expand
I don't have Community Bubbles installed...
I
don't
have
Community
Bubbles
installed...
}{quote}

You

can

manually

create

some

navigation

in

the

panel

that

will

look

like

widgets,

for

example:

{

Code Block
}

{div2:class=widget}
 {div:class=widget-title}Navigator{div}
 {pagetree2}
{div2}
{code} {quote}{expand} h3. Title panel Just like the header panel,

Title 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

...

:

  • If the page title (or parent page title) is "Forum",

...

  • "Home"

...

  • or

...

  • "Support"

...

  • we

...

  • hide

...

  • the

...

  • "Edit"

...

  • and

...

  • "Files"

...

  • links

...

  • If

...

  • the

...

  • page

...

  • title

...

  • (or

...

  • parent

...

  • page

...

  • title)

...

  • is

...

  • "Forum"

...

  • we

...

  • show

...

  • the

...

  • "New

...

  • Topic"

...

  • link

...

  • and

...

  • also

...

  • a

...

  • "Post

...

  • Reply"

...

  • link

...

  • (the

...

  • latter

...

  • being

...

  • hidden

...

  • if

...

  • you

...

  • are

...

  • actually

...

  • viewing

...

  • the

...

  • page

...

  • called

...

  • "Forum").

...

Footnotes

...

panel

...

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.

...

Footer

...

panel

...

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}

h2. Optional Site Banner Message

As mentioned earlier, 

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.

...

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)
{code}

Wiki Markup
{align:right}\\ Next page: [2 - Menu Customisation]{align}