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):
- Background Settings - colour, image
- Border Settings - style, width, colour
- Position Settings - align, margin, padding, overflow
- Size Settings - width, height
- Text Settings - font, size, decoration, colour, formatting
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.
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
How do I customise individual borders?
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.
How do I customise individual margins and padding?
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.
How do I set specific text styles in specific panels?
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.
Added by
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.
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.