Theme Builder Plugin

[All Adaptavist Apps]

Page tree

  • Created by Unknown User (gfraser), last modified on Feb 06, 2008

This feature is accessed from the Layout Tab in Theme Builder 3.0 and above by clicking one of the panels shown in the layout preview.

Menus

The menus allow you to quickly customise the following attributes of the panel (click a link for more details):

Canvas

The chequerboard pattern depicts the canvas. It enables you to quickly see whether a panel is transparent or not:


Transparent

Filled

You will also see one or two feint dotted lines in the preview which indicate the amount of padding or margin spacing applied to the panel:

Buttons

There are three buttons at the bottom-right of the panel editor:

Content...

This button allows you to edit the Panel Content (wiki notation and other panel-specific settings).

Apply

When you've finished making changes to the panel, click "Apply" to update the layout preview.

(warning) This does not save the changes to the layout, it merely updates the layout preview above the panel editor. You must save the changes using the Save button on the Toolbar.

Cancel

To cancel your visual changes (those made using the menus), click the "Cancel" button.

FAQs

You have to add Custom CSS using the CSS Tab.

To set the borders of the menu bar for example, you would use:

.atb-menu {
 border-bottom-style: 1px dotted #000;
}

That would set the border to a 1 pixel dotted black line.

For more information on the classes used to represent panels, see Panel Classes and IDs.

You have to add Custom CSS using the CSS Tab.

To set the margins and padding of the title panel for example, you would use:

.atb-title {
 margin-top: 5px;
 padding-left: 10px;
}

That would set the margin above the panel to 5 pixels and add 10 pixes of padding to the left side of the panel.

For more information on the classes used to represent panels, see Panel Classes and IDs.

You have to add Custom CSS using the CSS Tab.

For example:

.atb-title h1 {
 color: red;
}

That would set the heading 1 text colour, only in the title panel, to red.

For more information on the classes used to represent panels, see Panel Classes and IDs.

5 Comments

  1. Unknown User (simonwheatley)

    What does "defer downloading of this panel" 1 mean, and by what mechanism does it do whatever it does?

    1 It's the only option in most (all?) of the Panels > Content > Options tab.

    1. Unknown User (gfraser)

      When ticked, the panel content will be output at the end of the HTML and then moved, using javascript, in to the panel. Not suitable for anything other than basic content - eg. if you've got macros in there that use JS they would likely break.

      In some future version, it's likely the content would be pulled in via AJAX, but that would obviously need lots of testing.

  2. Unknown User (vmanuja)

    I am trying to wrap my page content within a set of custom <DIV>s. However, the "Content..." button on the Content Panel is greyed out. it works fine for Left Sidebar, Title, Menu, ... etc. I understand updating the Page.vm is a workaround (I'd rather not pursue that); not sure if there's something in ThemeBuilder setup that I am missing.

    1. Unknown User (amoran)

      The content panel contains the page content, the only way to edit the page content is to edit the page itself ... there are already a plethora of tags that you can work with, perhaps taking a look at the HTML Structure (Builder 3.x) of builder would help?

      1. Unknown User (vmanuja)

        Tx Alain: the HTML Structure definitely helps. I was just wondering if there were a way to minimize overwriting Core Confluence and TB styles... something like wrapping in the Content Panel (using confluence & velocity tags) - 

        {div:class=<custom content class>}
    $body
{div}

        BTW, even if this were possible, would the presence of DIV tag as wrapper cause nesting DIV issues since multiple divs are expected within the $body? Am asking because this is what I plan to do on my Left and the Right Nav Content (for maintainability perspective) - 

        {div:class=leftNavDiv}
    {include:left nav wiki page}
{div}

        Should I rather do -

        {div10:class=leftNavDiv}
    {include:left nav wiki page}
{div10}