ThesisSkin EditorHTML → Add a Box

Add a Box to a Template

To add a Box to a Template:

  1. Select the Box you want to add from the Box Manager drop-down (the gray area on the right side of the Skin Editor HTML screen, where it says “Select a Box to add”)
  2. Click the Add Box button

Once your new Box appears in the Box Manager:

  1. Position your cursor over it, hold down shift, and then click + drag the Box over to the template area
  2. As you do this, the top portion of viable Container Boxes will become highlighted in pale yellow—these are places where you can drop your Box

To place your new Box into a specific Container:

  1. Drag the Box over the top portion of a viable Container
  2. When this area turns a brighter shade of yellow, you will be able to “drop” your Box successfully by letting go of the shift + drag action

Once the Box is inside the Container:

  1. Drag it up or down into the precise position you desire (do not hold the shift key for this!)
  2. Click Save Template to preserve your changes

How to Move Boxes in the HTML Editor

  • Nesting: Out of one Container and into another: shift + drag
  • Sorting: Up or down within a Container: Simply drag it

Adding Dependent Boxes

Certain Boxes are designated as dependents of other Boxes, and they are not accessible from the Box Manager dropdown selector. Instead, they are only accessible from their parent Box’s tray.

Wanna see? Some examples of Boxes that contain dependents are: Post Box, Post List, Query Box, Comment List, and Comment Form.

To add a dependent Box, first locate its parent Box in the Template. Hover over it until you see the plus sign appear to the right of its name, and then click that to expand the Box.

Click show tray ↓ at the bottom of the Box’s active area to view its dependents.

Locate the dependent you wish to add and then click on it; this will add it to the active area of its parent, so you can then drag it into your preferred location within that Box.

After you’ve moved the dependent Box where you want, click Save Template to preserve your changes.