Global Moxie

Question

How can I display link lists horizontally on in columns?

Answer

With a few minor tweaks to your page templates and your theme style sheet, you can make any of Big Medium’s link widgets present links horizontally across the page.

The premise

The HTML generated by Big Medium’s link widgets places each link inside its own <div> tag, with class bmw_link. By adding CSS styles that float each of these <div> elements to the left, the links stack up horizontally instead of vertically.

Setting the width of these <div> elements sets the width of the column. The right margin sets the “gutter” spacing between each column, and the bottom margin sets the spacing between each row.

The hitch

If you want one link widget to display more than a single row of links, you have to set each link’s text block to a fixed height. Otherwise, if one of the text blocks in one row is larger than the others, it will “catch” the first item of the next row, preventing it from aligning at the left of the row, and the whole thing is thrown out of whack.

By setting the links to a fixed height, we can enforce a grid no matter how much text is in each link. The drawback: If a link’s text block is longer than this height, its text will be clipped.

Putting it all together

1. In Big Medium, go to “Layout>Edit Templates.”

2. Select the template where you want to display links horizontally.

3. Edit the template, wrapping the widget you want to display horizontally in a <div> with a “horizontal” class. For example:

   <div class="horizontal">
       <%links%>
   </div>
   

4. After saving the template, follow the link on the next page to rebuild the necessary pages.

5. Go to “Layout>Edit Theme Style Sheet” and add the following CSS to your styles, editing the values to suit your design. For example, the following will display links in three columns in a 500-pixel block.

   div.horizontal {
       width: 500px;        /*overall width for the block of links */
       overflow: hidden;
   }
   div.horizontal div.bmw_link {
       float: left;
       width: 150px;        /* width of each column */
       height: 150px;       /* height of each row */
       margin-right: 15px;  /* spacing between columns */
       margin-bottom: 15px; /* spacing between rows */
       overflow: hidden;
   }
   

6. Save the settings, and you’re done.