Adding Extra Columns & Rows to Tumblr
By Randall Blackburn
You can edit your Tumblr theme in any way you would like using the Tumblr HTML editor. Tumblr themes use the “<div>” tag to specify sections in the theme. You can add an extra column, such as a sidebar, to your theme using a combination of Cascading Style Sheets -- or CSS code -- and HTML code. Define a table in one of your <div> sections, then add rows using the <tr> tags. Add cells to the rows with <td> tags.
Define a Sidebar Column
Open your Tumblr dashboard, then select the blog to modify in your dashboard.
Click “Customize,” then click “Edit HTML” to open the HTML editor.
Define the column by inserting the following code between the "<style type="text/css">" and “</style>” tags in the CSS section of the theme code. You can style the sidebar, as desired, but the code below provides the base construct for the column:
.sidebar { position: relative; left: 0px; top: 0px; }
Insert the following code between the “<div id="wrapper">” and corresponding “</div>” tags in the body section of the HTML code where you want the column to appear. Replace the text “(Insert Your Sidebar Content Here)” with your own content.
<div class="sidebar"> ...(Insert Your Sidebar Content Here)... </div>
Click “Update Preview,” then click “Save” to save your changes. Click “Exit” to close the Customize menu.
Define a Table with Rows
Open the theme code in the Tumblr HTML editor, then locate the <div> tag that you will use for your table. Create a new “<div>” section, if desired.
Insert the following code to define the new table. Replace “Cell 1,” “Cell 2,” etc. with your content. Use CSS styles to format the table, as desired.
<table> <tr><td>Row 1, Cell 1</td><td>Row 1, Cell 2</td></tr> <tr><td>Row 2, Cell 3</td><td>Row 2, Cell 4</td></tr> </table>
Click “Update Preview,” then click “Save” to save your changes. Click “Exit” to close the Customize menu.
Tips
Most Tumblr themes support the Endless Scrolling feature, so there is no need to add rows to your theme unless you want to organize the layout in tables.
Use CSS styles to customize the look and feel of your columns. For example, to assign the color white as the background, insert the statement "background: #ffffff;" into the CSS code.
References
Writer Bio
Randall Blackburn has worked for several Fortune 1000 companies as a technical writer over the past seven years. He has produced a wide variety of technical documentation, including detailed programming specifications and research papers. Randall has also acquired several years' experience writing web content. Randall lives and works in Austin, TX.