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.
The exact formatting isn’t important. Essentially, it’s a named set of rules where each rule is composed of a selector, followed by a colon (:) followed by a value or list of values. The individual rules are separated by semi-colons and the order doesn’t matter. The entire set of rules is enclosed in braces ({}) preceded by the set’s name. If you want to, you can put it all on one line. Just make sure you begin the name with a period (.). That identifies this rule set as a “class”.
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:
Tip:
Keep a list somewhere of the styles you add to your stylesheet so you don’t reinvent the wheel the next time you need one.
.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 */
}
The BUTCH & harold website is a traditional HTML website. It’s nicely designed but unlike the blogs I’ve been working on recently, there are no templates or includes for global page elements. There are just a lot of HTML files. I didn’t build this site, but the Web designer/programmer who originally constructed it did a good job writing clean, modern code, making It easy to add content and make minor layout changes within the existing architecture. However, s/he did use some tricks with the navigation menu that gave me headaches trying to implement the drop-menu without rewriting the entire thing—and make it work in all browsers.
