How to Move a Sidebar in Tumblr
RURI RANBE
TECH
The location of the sidebar in your Tumblr theme is controlled using Cascading Style Sheets, a Web language that modifies how HTML elements appear on a page. You can modify the CSS in your theme to relocate the sidebar from one side of your blog to the other, or force the sidebar to move along with the scrollbar.
- Reposition the Sidebar
- Select the gear icon
- Choose a blog
- Click Edit HTML
- # sidebar { float : x ;
- Represents the value
- Click Update Preview
- Click the back arrow
- Make the Sidebar Move as You Scroll Up or Down
- Select the gear icon-2
- Choose a blog-2
- Click Edit HTML and then press Ctrl-F
- # sidebar {
- Fixed
- # sidebar { position : fixed ;
- Click Update Preview-2
- Click the back arrow-2
1 Reposition the Sidebar
2 Select the gear icon
Log in to your account and then select the gear icon from the main menu on the Dashboard.
3 Choose a blog
Choose a blog from the left-hand side and then click the "Customize" button next to the Theme field to go to the customization page.
4 Click Edit HTML
Click "Edit HTML" and then press "Ctrl-F" to open Find. Type "sidebar" into the search field and then press "Enter" until you locate code that resembles the following:
5 # sidebar { float : x ;
sidebar { float: x;
6 Represents the value
"X" represents the value used to define the "float" property. Replace "x" with "left" or "right," depending on where you want the sidebar to appear.
7 Click Update Preview
Click "Update Preview" and then click "Save" to apply your changes.
8 Click the back arrow
Click the back arrow and then click "Exit" to leave the customization page.
9 Make the Sidebar Move as You Scroll Up or Down
10 Select the gear icon-2
Log in to your account and then select the gear icon from the main menu on the Dashboard.
11 Choose a blog-2
Choose a blog from the left-hand side and then click the "Customize" button next to "Theme" to browse to the customization page.
12 Click Edit HTML and then press Ctrl-F
Click "Edit HTML" and then press "Ctrl-F" to open Find. Type "sidebar" into the search field and then press "Enter" until you locate the following code:
13 # sidebar {
sidebar {
14 Fixed
Type "position: fixed;" on a new line, so that your code resembles the following:
15 # sidebar { position : fixed ;
sidebar { position: fixed;
16 Click Update Preview-2
Click "Update Preview" and then click "Save" to apply your changes.
17 Click the back arrow-2
Click the back arrow and then click "Exit" to leave the customization page.
- If the sidebar overlaps your content after changing its position, search for "#content {" and then enter a new value, in pixels, next to the "margin-left" property. If you moved the sidebar to the right, decrease the value; if you moved the sidebar to the left, increase the value. Click "Update Preview" to see your changes. Continue increasing or decreasing "margin-left" as necessary until the sidebar and your posts no longer overlap each other.
- The code "#sidebar" and "#content" may vary depending on your theme. If you can't locate either ID in the CSS, right-click the appropriate portion of the page in Google Chrome or Mozilla Firefox and then click "Inspect Element." View the highlighted information inside the Inspector or Elements pane to see the ID assigned to the selected DIV object.
Related Articles
