How to Freeze the Description Box but Not the Scroll Page on Tumblr

by David Weedmark

If your Tumblr blog theme lets the description box scroll down the page along with your blog posts, chances are you can lock the box in place. To do so, the theme must include an option in its CSS page with an option to lock the description box. Since developers often use the same CSS code for all of their themes, there's usually a good chance it has this option. The tricky part comes in trying to find what word the developer used to unlock this feature. In many cases it may be as simple as the word "fixed," but you can't be sure what the word may be until you examine the code.

Examining the HTML Code

Log in to Tumblr and click the gear-shaped Settings icon at the top of your dashboard. Select your blog from the Blogs section in the sidebar and click "Edit Theme." Click the "Edit HTML" link under the theme name in the sidebar. Your theme's HTML code appears on the left and a preview of your Tumblr blog appears on the right.

Press "Ctrl-F" on the keyboard to open the Search field and type two or three words exactly as they appear in your blog's description box. This takes you directly to the HTML code for those words. Scroll up until you see the description box code, such as "block:Description."

Examine the lines directly above the description box code and look for the attribute that keeps the description box floating, such as "unstuck" or "float." This word should be within a "div id" tag such as "<div id="float">."

Replace the attribute that keeps the description box floating on the page with the word "fixed," such as "<div id="fixed">." Click the "Update Preview" button. Click the preview on the right and try scrolling the page. If this works, click the "Save" button. Your description box will remain fixed in place while your blog's content scrolls. If this doesn't work, you need to examine the CSS code to find the right word.

Finding the CSS Code

Scroll to the top of your Tumblr theme's HTML code. Click the "Search" field above the code and type "stylesheet." This takes you to the first instance of this word in the HTML code, usually within the first 50 lines or so, such as "rel=stylesheet." Highlight the URL just before this word, beginning with "http:" and ending in "css." This is the Web address of the theme's CSS page.

Open a new browser tab, paste the CSS URL into the address bar and press "Enter." At first you may see meaningless letters and numbers, but if you scroll down the page, you will see the CSS code, which looks very similar to HTML code. You can't change this code, but you can use it to find the word that may lock the description box in place.

Press "Ctrl-F" and type the word used in the theme's HTML code to keep the description box floating, like "float." When you find this word, scroll up and down the page to examine the code nearby. Look for the opposite word that may be used to lock it in place, like "fixed," "static," or "stuck."

Go back to the browser tab displaying the theme's HTML code and replace the word keeping the description box floating with the word that may keep it fixed. Click the "Update Preview" button and then try scrolling down the preview page. If this works, click the "Save" button. If it doesn't work, continue your quest for the right magic word.


  • Don't save changes in your Tumblr theme's HTML code until you have carefully examined the Preview. Randomly changing anything in the HTML code can severely mess up your blog's layout.

Video of the Day

Brought to you by Techwalla
Brought to you by Techwalla

About the Author

A published author and professional speaker, David Weedmark has advised businesses and governments on technology for more than 20 years. He has taught computer science at Algonquin College, has started three successful technology businesses, and has written hundreds of articles for newspapers, magazines and online publications on computers and other technology topics.

More Articles

Photo Credits