In this post, we’ll go a bit further to branch out with some fancy HTML tricks to style boxes for text. We’ll also look at an Old School technique for creating boxes — so that even folks on the free plan can have some fun with text boxes.
Today’s post is brought to by the Daily Post Word of the Day: Branch.
Inline Styles for Simple Boxes
This post took a bit of research, but I finally have the answer to how to style boxes inline. This means that any WordPress user, no matter what their plan, can create boxes that can be used in a variety of ways, including menus and navigation, to dress up a theme! (This is a continuation from the post on styling paragraphs and headers.
The syntax is easy. Using the HTML tab, and not the Visual tab in the WP editor, insert the following code into your post where you want the box to appear.
<p style=”border: 1 px solid black;”>
Put in your text. Add the closing tag </p> .
The Problem of Cell Padding
The boxes above look a little bit crowded, don’t they? Unfortunately, I haven’t found any straight-forward way to put cell padding (a little white space) in paragraphs that does NOT involve:
(1) Access to the “head” part of the WordPress post; OR
(2) The use of Additional CSS in the “theme customization” part of WordPress–which is only available to Premium and Business Plan accounts.
|I do have a work around though!|
Table Code to the Rescue
Because I’m an Old School coder, I was working on problems like this back in HTML version 2. Back then, we used “table” code to create boxes. Here’s the W3 school quick guide to tables for the full authoritative reference.
We used it for more than just boxes. We used it for ALL KINDS of layout–it was pretty much all we had. This is pretty elementary code, burned into the DNA of the first versions of HTML, way before CSS. I (and others of my generation) spent literally hundreds of hours tediously handcoding tables to create the designs we wanted–1991, man. It was the dawn of the new age.
Table Rows, Table Data
Start table code by declaring a TABLE with this pair of tags.
You put the coding and material for the table between the <TABLE> and </TABLE> tags.
<TR> stands for “table row” — <TD> for table data. You put the actual text you want to have in the box between the <TD> and </TD> tags. For one box, you just need one row. The padding is set for the table data–either in pixels (an absolute value which could screw up responsive themes) or using percentages (like, say 3%). I’m using 3% for padding here because we need to code for responsive themes that adjust to phones and tablets.
In the table above, I set the border with: <TABLE style=”border: 2px dotted brown;”> which sets a border of 2 pixels in a dotted brown border.
Next, I have to set the table row. I’m only using one row in the box above. Here in the next box, below, I’m going to set 3 rows, so you can better understanding the code.
|<Table style=”border 2px double grey;”>|
<TD padding=”3%;”>Your text goes here </TD>
<TD padding=”3%;”>Your text goes here</TD>
A note on the WP editors
If you use advanced or “blue” editor for making tables, then the padding feature works fine when you go to look at in the VISUAL tab. But if you are using the WP ADMIN or “black” editor, you won’t see any padding when you look at the text in the VISUAL tab. You’ll have to save the file, then preview it in the browser. It can be tedious. (This is just how we had to do it in the Olden Days). Note that this kind of hand-coding is very unforgiving. A missing closing quote and your text will “disappear” in the browser as the the browser will ignore everything after it, looking for the close quote to end the statement. Miss an ending semicolor (;) and the code may not work at all. I usually get everything done but the padding in the blue editor — it’s much quicker to check my code in the visual tab than using the “Preview” button to check. I switch to the black editor for finishing touches.
Lots of Border Choices, colors and even backgrounds
HTML has many possibilities in terms of colors, borders, and even backgrounds.
|Here I set the td back-ground color with <TD style=”background-color: lightblue;”>|
Get the picture? Have fun branching out in your coding skills by learning HTML!
It’s fun, it’s expressive, and not terribly difficult. Enjoy!
More soon. ~Best wishes, Lola