Global Moxie

This FAQ page is for Big Medium 1.x. It does not apply to Big Medium 2.0.

Question

How can I add dividers between links or make them appear in multiple columns?

Answer

Use custom CSS styles to change the appearance of Big Medium's links.

To help you get acquainted with CSS, I'll tackle three examples here:

• Adding a dividing line between links
• Adding a graphic divider between links
• Displaying links in multiple columns.

Adding custom styles

You can add CSS styles to your site by using the Style Editor (click "Style Settings" under "Templates" in the left-column menu of the Big Medium control panel). Go to the "Additional Styles" field at the bottom of the Style Editor page, and add your style declarations.

To make Big Medium especially CSS-friendly, it's a good idea to put your site into CSS layout mode. In fact, this is required for the CSS examples that follow. To do this, go to Widget Settings (also under "Templates" in the control panel). In the "Layout & Design Method" panel, select the "Use cascading style sheets (CSS) instead of tables" option.

Example 1: Adding dividers between links

On its own, Big Medium generates links in a single column without any dividers between links, except for a single line break.

This example will show how a few quick tweaks to your templates and style sheets can add a divider line between links.

Among other things, CSS lets you set style rules for specific portions of an HTML page. You can do this by "marking" that portion of the page with <div> tags and giving the <div> a special class name. In this example, we're setting style rules for widgets that appear in Big Medium's ++LONGLINKS++ widget (the technique described here will also work for ++INDEX++, ++SHORTLINKS++, ++QUICKTEASE++ and other link widgets).

Edit your page template(s), putting the ++LONGLINKS++ widget inside a <div> tag like so:

<div class="dividedLinks">
    ++LONGLINKS++
</div>

Load the revised template into the Section Editor and rebuild pages for that section. Now you can create CSS rules for any HTML that appears within the dividedLinks tag.

Go to the Style Editor, and add the following CSS declaration to the "Additional Styles" field at the bottom of the Style Editor:

div.dividedLinks div div {
    border-top: 1px dashed #666666;
    padding-top: 1em;
}

Save these settings, and go to a page that uses your revised template. You should see a gray dashed line between the links generated by the ++LONGLINKS++ widget (you may need to refresh the page in order to load the new styles).

To change the divider into a solid line, replace the "dashed" in the border-top style to solid (other options: dotted, double, groove, inset, outset, ridge). To change the thickness from 1 pixel to 2 pixels, for example, replace the "1px" in the border-top with 2px. You can change the color by replacing the "#666666" with another hexadecimal color code.

Example 2: Adding graphic dividers between links

Ah, but you say that a plain little line just isn't fancy enough for you? A little tweak lets you add your own graphic as a divider instead.

To add a graphic as a divider, you can make it a background image for every link. We only want to display the image once (instead of having the browser tile it across the page), so we need to be sure to specify that. We also want to make sure that the graphic appears above the link text, so we need to add some extra padding to the top of the text in order to bump it below the graphic.

The following CSS declaration will center a graphic named divider.gif above each link with 10 pixels of space between the graphic and the link (padding-top is 22px: 12px for the height of the graphic, plus 10px of extra space):

div.dividedLinks div div {
    background-image: url(http://www.example.com/images/divider.gif);
    background-repeat:no-repeat;
    background-position:top center;
    padding-top: 22px;
}

Replace the URL in the background-image rule with the URL of the graphic you would like to use.

Example 3: Displaying links in multiple columns

Normally Big Medium displays its links in a single column. This example lets you instead display your links in multiple columns. There are a few caveats here, and I'll get to those in a bit. As with the examples above, I'll work with the ++LONGLINKS++ widget here, but this trick also works with any of the other widgets that generate lists of links.

First, adjust your template(s) by placing the ++LONGLINKS++ widget in a <div> tag, followed by a div to clear your columns afterward:

<div class="multiColumn">
    ++LONGLINKS++
</div>
<div style="clear:both">&nbsp;</div>

The following CSS declarations will create columns 250 pixels wide with a gutter 15 pixels wide to the right of each column (a total of 265 pixels for each column). Adjust the "width" and "margin-right" settings in the first block to match the width available for the number of columns you would like:

div.multiColumn div {
    width:250px;
    margin-right: 15px;
    float:left;
    padding-top: 1em;
}

div.multiColumn div.bmLinkleft,
div.multiColumn div.bmLinkright {
    padding-top:0;
    clear:none;
}

div.multiColumn div div {
    height: 150px;
    margin: 0;
    padding:0;
    overflow:hidden;
    float: none;
}

Now for the caveats...

• Fixed height. To make this work, you have to set a fixed height for the link text. This is done in the last CSS block above, the one for "div.twocolumn div div". In the example, the height is set to 150px (150 pixels). If the link text extends beyond 150-pixels, it gets clipped; you only see the first 150 pixels of the link text. If the text is less than 150 pixels, there will be white space between the link text and the next link in the column. The result is a nice, orderly grid.

• Don't forget to set the correct width. The width of the columns must be set narrowly enough so that they fit within the available space. As described above, the width is set in the first CSS declaration, the one for "div.twocolumn div". Adjust as necessary to make sure that the columns fit into the available space.