If you have access to manage blocks on your Drupal site, the following tips and tricks may help you achieve better positioning of your blocks.

Automatic Re-Sizing and Regions

Blocks that are placed within the main content regions of a horizontal, vertical or multipurpose page (only available if you have installed the custom Georgia Tech Content Types package) will automatically resize, based on number of blocks in that region. Regions whose blocks behave this way include:

• Area ABOVE Main Content (IGNORES sidebar regions)
• Area ABOVE Main Content (RESPECTS sidebar regions)
• Main Content
• Area BELOW Main Content (RESPECTS sidebar regions)
• Area BELOW Main Content (IGNORES sidebar regions)

Choose your Width

There are also block layout options that you can use to change a block's default width. You'll find these in the Layout drop-down list when you are creating or updating a Block:

• Full width
• Three quarter width
• Two thirds width
• Half width
• One third width
• One quarter width

For instance, you could have four blocks that sit side-by-side, but then apply the "Full width" layout option to the fifth block so that it extends the full width of the region, rather than sitting there like a misplaced element.

Remember: these widths apply to a block WHEREVER it is shown. So, if you need the same content to display differently on different pages, you may need to create a separate block for each look.

Screen Size and Number of Horizontal Blocks

Blocks will have different limits on number shown per row, based on the screen size of the device used to view your site.

• For a desktop computer view of your site: regions are limited to four blocks next to each other (horizontally), after which additional blocks will break and start a new row.
• On smaller screen sizes (such as tablets): blocks will stack two or three horizontally.
• On the smallest viewports (such as smartphones): blocks will stack on top of each other (vertically), instead of next to each other (horizontally).

Clear Floats to Prevent Collisions

There is also a "Clear floats" checkbox available, useful for preventing block collisions due to varying content heights within each block.

An example problem might be a block in a lower row colliding with a block in the row above it, due to the content of the block in the upper row causing it to sit higher than its adjacent blocks. Just apply the clear floats option to the lower block and it will no longer collide with the block above.

If your site is using the Drupal 7 GT Theme, and has had the custom Georgia Tech Page Layouts package installed, then when adding a new block, or editing an existing block, you can make your blocks look fancier than a standard Drupal block.  This is done by selecting a custom style via the checkboxes under the "STYLING" section at the bottom of any block configuration page.  The available styles are:

• BLOCK STYLE: promo block
• BLOCK STYLE: related info block
• ICON: Information
• ICON: Alert
• ICON: Download
• ICON: Link
• ICON: Institution
• ICON: Mortar Board
• BLOCK TITLE: GT Gold
• BLOCK TITLE: GT Blue
• BLOCK TITLE: Gray

BLOCK STYLE: promo block

This style formats your block title on a transparent background and the rest of the block on a grey background with gold top and bottom borders.

BLOCK STYLE: related info block

This style formats your block title on a gold background and the rest of the block on a grey background.

ICON: Information

This style formats your block title with an 'i' information icon before the title and a gold border below the title.  The body is styled as a normal Drupal block.

ICON: Alert

This style formats your block title with an exclamation point icon before the title and a gold border below the title.  The body is styled as a normal Drupal block.

ICON: Download

This style formats your block title with an down arrow icon before the title and a gold border below the title.  The body is styled as a normal Drupal block.

ICON: Link

This style formats your block title with an arrow icon (pointing to the upper right) before the title and a gold border below the title.  The body is styled as a normal Drupal block.

ICON: Institution

This style formats your block title with a Greek / Roman building icon before the title and a gold border below the title.  The body is styled as a normal Drupal block.

ICON: Mortar Board

This style formats your block title with a graduation mortar board icon before the title and a gold border below the title.  The body is styled as a normal Drupal block.

BLOCK TITLE: GT Gold

This style formats your block title with a gold background.  The body is styled as a normal Drupal block.

BLOCK TITLE: GT Blue

This style formats your block title with a blue background.  The body is styled as a normal Drupal block.

BLOCK TITLE: Gray

This style formats your block title with a grey background.  The body is styled as a normal Drupal block.

Super Blocks are only available if your site has the Georgia Tech Super Block module installed.

Creating a Super Block

To start making a new Super Block, use the Administrative toolbar (the black bar across the top of your site). Choose Content > Add content > Super Block.

After the new Super Block form opens, you can enter your information into the fields described below.

Title and Description

Description

• Example Description 1: "Block - Homepage - Bachelor's Programs"
• Example Description 2: "Block - About Section - Contact Information"
• The Description field is always required.
• Only you and other editors of the site will see the "Description" field; it will be used for the block reference fields on layout pages (such as in the Article or Aside areas on a Multipurpose page.)
• Be concise, but describe each block in a way that is easy for your fellow editors to sort through later (because you will probably have a long list of blocks) .
• Consider using a pattern for naming your blocks that indicates what type of content it is, what parts of your website it will probably appear on, and then the specific content in this block.

Title

• Example Title: "Bachelor's Programs"
• The Title is optional.
• If used, visitors to your site will read the Title as a very short text headline at the top of a Super Block.
• You can use <em>, <strong>, and <br />, tags in the title if needed. Just don't forget to close <em> and <strong> tags! (i.e., <strong>Strong Title</strong>)

The Teaser and Image

​​Teaser Text

• This field is optional, but can be used to include text or a blurb about the image in your Super Block.
• It can also be used instead of an image, if only want to include text and links in your Super Block.

Primary Image

• The Primary Image is optional, but is the heart of what makes super blocks so fun!
• Image Size Recommendation: 492 by 320 pixels
• Always enter the "Alternative text" so that your images communicate with people using screen readers, too!

Image Placement

• This field is required, but you can ignore it if not uploading an image.
• Here you can select positioning for your image and the default value is "Left".
  • If super blocks are in a region with other blocks (such as within the "Articles" section of a Multipurpose page), the image will fill the entire width of the block across the top, and any teaser text you entered will appear below the image.
  • But, if a super block appears alone in a region, the image will align with the left or right side of your block and any teaser text you entered will wrap around the sides of your image inside of the block.

The Jump Link

Jump Link Title and URL

• These are optional, but you can enter a link (in the URL box) and it's human-readable label (in the Title box), if necessary.
• The Link Title will show on the completed Super Block as a standard "Highlight Button".
• The Link URL you enter will apply to the Highlight Button, and also to the Title and Primary Image of the Super Block.

Jump Link Location

• This field is required, but you can ignore it if not entering a Jump Link.
• Depending on what options you select, your Highlight Button link will appear either:
  • Below the teaser text and image (the default value), or
  • As an overlay on top of the image.

The Skin (or Design)

• This field is required, and determines which of the pre-set design treatment is used for this block. The skin options are:
  • Standard: uses a gray title and jump link with white text and a gold icon (this is the default value).
  • GT Blue: uses a blue title and jump link with white text and gold icon.
  • GT Gold: uses a blue title, but the jump link is gold with white text, and a blue icon.