larryaronson.com

Here’s how to add a floating tipbox or editorial sidebar to a post in your WordPress blog. I’m writing this to answer a question from a client and it just made more sense to demonstrate the technique in a post rather than explain it in an email.  The floating tipbox that appears below duplicates the example my client provided. The text explains how to create and customize a box to your own specifications.

First, make sure you are logged in as an administrative user. Go to the site admin area (also called the dashboard) and click on the Design tab; then click on the submenu tab, Theme Editor. You should now be looking at a page with a text editing window on the left and a list of theme files on the right. Stylesheet (style.css) should be the active file in the edit window. If it’s not, then select it from the bottom of the list on the right.

Scroll to the bottom of the stylesheet file and add the follow lines. Don’t worry, you only have to do this step once:

.tipbox {
 max-width: 33%;
 float: right;
 font-size: .66em;
 padding: 1em;
 border-width: thick thin thin thin;
 border-style: solid;
 border-color: grey;
}

Click the button labeled “Update File” to save your additions to the stylesheet.

Now, back in the post editor, edit your post as usual. The content of the tipbox should be entered just as if it were an ordinary text, but place that text before the content that you want to flow around the tipbox. Here, we just have one paragraph of text in the box but you can have any content—headings, lists, images, etc., in an floating box.

Once all of your content is in place, click the tab labeled, HTML, at the top of the editing area. The content of the editing area will change showing the marked up content instead of the WYSIWYG version. Find your tipbox content and insert the following text immediately in front of it:

<div class="tipbox">

and the following text immediately after the content:

</div>

Click the Visual tab to return to the WYSIWYG mode and save the draft. The  WYSIWYG mode doesn’t recognize the floating mode, so you’ll have to click on the “Preview this Post” button to see if it worked.

You can create as many tipboxes as you’d like. Enclose any content in a set of division tags  with the class assigned to tipbox – headings, paragraphs, lists, whatever, it will be boxed and floated on the right margin.

Customizing the tipbox.

Let’s take a look at the details and see how they can be changed to achieve different effects. The rules added to the stylesheet do this by giving your browser the following instructions:

• Set our tipbox to occupy no more than 1/3 (33%) of the available column width. Unlike an image element, which has a fixed width, a division element normally takes up 100% of the width available, so, we have to tell it to take less.  You can also supply a fixed value, e.g:   max-width: 200px;
• This tipbox element should float on the right margin of the column and whatever content follows this element should wrap around it on the left. This and the previous rule are required to create the sidebar or cutout element; everything else is decoration.
• Make the font size 2/3 of what it would normally be. ’em’ is a measurement unit equal to the width of the letter ‘m’. We could have also stated the size using a percent or other measurement units: 66%, 9pt, 12px, for example, but em works better for a number of reasons.
• Put 1 em worth of space as padding between the border of the tipbox and the content inside. Space is important for readability.
• Give tipbox a thick border on top with thin borders on the right, bottom and left sides. Borders can also set set as pixels, l.e:  border-width: 5px 2px 2px 2px, would be about the same in this example
• Make the border a solid line. It could also be dashed, dotted, double, inset and outset.
• Make the border grey, You can also give it an explicit color value as an RBG value. see below

Here’s a set of rules that, instead of a border, creates a class called ‘bluebox’ that uses different background and foreground colors to visually define a floating box:

.bluebox {
 max-width: 150px;
 float: left;
 font-size: 9pt;
 margin-right: 8px;
 padding: 5px;
 color: #ffffe0;                 /* light yellow text */
 background: #000066;    /* on a dark blue background */
}

Tags: CSS, sidebar, styles, tip, wordpress