Adding a Sidebar to Tumblr, need HTML help adding a sidebar to Tumblr |
Adding a Sidebar to Tumblr, need HTML help adding a sidebar to Tumblr |
kgold |
Jun 11 2012, 08:53 PM
Post
#1
|
Group: Members Posts: 3 Joined: 11-June 12 Member No.: 17,257 |
Hey Forum, I'm a HTML n00b and need help adding a sidebar, preferably on the right side, to the Tumblr theme "showroom". I want this so I can add a Twitter feed, if there's any easier way that works too. Any help would be greatly appreciated. Below is my code ---------------------- CODE !DOCTYPE html>
<html lang="en"> <head> <meta charset="utf-8" /> {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description} <meta name="if:Show Notes" content="1"/> <meta name="text:Disqus Shortname" content=""/> <meta name="text:Google Analytics ID" content=""/> <title>{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title> <link rel="shortcut icon" href="{Favicon}" /> <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/> <script src="http://static.tumblr.com/xz44nnc/o5lkyivqw/jquery-1.3.2.min.js"></script> <!-- Showroom theme by Mixpanel (http://mixpanel.com) --> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> /* Reset CSS */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, table, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } html, body { height: 100%; } body { background: url(http://static.tumblr.com/ge74hdk/G3flw5yrs/wood_pattern.png); font-family: Helvetica, arial, sans-serif; } a { text-decoration: none; color: inherit; } .icon_image { background: url(http://static.tumblr.com/ge74hdk/gDtlw9u9f/icons.png) no-repeat; } .purple { background: url(http://static.tumblr.com/ge74hdk/h4llw84gr/purple_pixel.png); } #topbar { background: url(http://static.tumblr.com/ge74hdk/FO9lw61pp/topbar.png) repeat-x; height: 52px; } #topbar_contents { width: 882px; margin: auto; height: 30px; padding: 9px 40px; position: relative; } #topbar_contents ul { list-style-type: none; } #topbar_contents li { float: left; padding-top: 4px; padding-right: 7px; } #topbar_contents li a { height: 22px; border-radius: 12px; line-height: 22px; font-size: 13px; /* font-weight: bold;*/ color: #FFFFFF; text-shadow: 0px 1px #000000; background-color: #474b7e; box-shadow: inset 0px 1px #56588b, 0px 1px #202033, 0px -1px #3d3e6c; padding: 0px 11px; background: url(http://static.tumblr.com/ge74hdk/Muhlw6c9s/button_bg.png) repeat-x; /* http://static.tumblr.com/ge74hdk/tj4lw6cao/button_bg_active.png*/ user-select: none; -moz-user-select: none; -webkit-user-select: none; display: inline-block; *display: inline; } #topbar_contents li a:active { background: url(http://static.tumblr.com/ge74hdk/tj4lw6cao/button_bg_active.png) repeat-x; box-shadow: inset 0px 1px #242339, 0px 1px #484761, 0px -1px #232338; } #searchbox { position: absolute; right: 40px; width: 310px; } #searchbox #search_background { background-color: #252740; opacity: 0.5; box-shadow: inset 0px 0px 2px #000000; height: 30px; width: 310px; border-radius: 15px; display: inline-block; *display: inline; position: absolute; top: 0px; } #searchbox .icon_image { background-position: -24px 0px; height: 24px; width: 24px; position: absolute; top: 4px; left: 4px; } #searchbox input { color: #FFF; height: 14px; font-size: 13px; background: transparent; width: 250px; padding: 8px 20px 8px 35px; border: none; position: absolute; top: 0px; } #searchbox input:focus { outline: none; } #content { width: 882px; padding: 0px 40px; margin: auto; position: relative; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif; text-shadow: 0px 1px #FFFFFF; color: #777777; font-weight: 300; } #content a { color: #4b55b2; font-weight: bold; } #content em { font-style: italic; } #content ul { margin: 10px 0px 10px 15px; } #content ol { margin: 10px 0px 10px 20px; } #content blockquote { border-left: 4px solid #adadad; padding: 2px 0 2px 8px; margin: 20px 0; } h1#blog_title { margin: 24px 0; } h1#blog_title a { color: #000000; font-size: 60px; position: relative; z-index: 1; } h1#blog_title canvas, h1#blog_title cufon { opacity: 0.73; } #content #left { width: 532px; position: absolute; left: 40px; top: 0px; } #content #right { width: 310px; position: absolute; right: 40px; top: 0px; } #about { margin-top: 84px; position: relative; } #about_upper { background: url(http://static.tumblr.com/ge74hdk/XtRlw9jlo/about_top.png) no-repeat; height: 99px; width: 314px; } #about_middle { background: url(http://static.tumblr.com/ge74hdk/mtSlw9jvf/about_middle.png) repeat-y; width: 314px; } #about_lower { background: url(http://static.tumblr.com/ge74hdk/537lw9jl6/about_bottom.png) no-repeat; width: 314px; height: 29px; } #about_content { padding: 10px 29px; line-height: 1.4em; font-size: 14px; } #about #portrait { float: right; margin-top: -41px; width: 54px; height: 54px; padding: 3px; background-color: #FFFFFF; border: 1px solid #d9d6c6; } #tape { background: url(http://static.tumblr.com/ge74hdk/5xmlw9ovm/tape.png) no-repeat; width: 38px; height: 32px; position: absolute; top: 58px; right: 13px; } #left div.item { position: relative; margin-bottom: 10px; } #left div.item .item_content img { max-width: 500px; display: block; } #left div.item .item_content iframe { display: block; } #left div.item .upper { background: url(http://static.tumblr.com/ge74hdk/3Cklwbrez/post_upper.png) no-repeat; height: 15px; } #left div.item .middle { background: url(http://static.tumblr.com/ge74hdk/7Xmlwbrdl/post_middle.png); min-height: 0px; } #left div.item .lower_no_info { background: url(http://static.tumblr.com/ge74hdk/FNolwh5aa/post_bottom.png) no-repeat; height: 21px; width: 532px; position: relative; top: -2px; } #left div.item .lower { background: url(http://static.tumblr.com/ge74hdk/ibwlwbrcv/post_lower.png) no-repeat; height: 70px; position: relative; top: -23px; } #left div.item .lower a { color: #777777; font-weight: 300; position: relative; padding-left: 26px; margin-left: 13px; } #left div.item .lower a .icon_image { position: absolute; top: -2px; left: 0px; width: 24px; height: 24px; } #left div.item .lower a.time_ago .icon_image { background-position: -24px -24px; } #left div.item .lower a.note_count .icon_image { background-position: -24px -48px; } #left div.item .lower a.dsq-comment-count { background: url(http://static.tumblr.com/ge74hdk/gDtlw9u9f/icons.png) no-repeat; background-position: -24px -74px; } #left div.item .item_content { position: relative; top: -5px; padding: 0px 10px; } #left div.item .item_content .post_title { font-size: 20px; margin-top: -6px; } #left div.item .item_content a { } #left div.item .item_content p { margin: 10px 0; } #left div.item .item_content p:first-child { margin-top: 0px; } #left div.item .item_content p:last-child { margin-bottom: 0px; } #left div.item .item_content blockquote:first-child { margin-top: 0px; } #left div.item .item_content blockquote:last-child { margin-bottom: 0px; } #left .post_tag { background: url(http://static.tumblr.com/ge74hdk/MmJlw7ibo/post_tag.png) no-repeat; width: 39px; height: 35px; position: absolute; left: -38px; top: 10px; } #left .post_tag .icon_image { width: 24px; height: 24px; position: relative; top: 5px; left: 11px; } #left .item .content_border { padding: 5px; background-color: #FFFFFF; box-shadow: 0px 1px 2px #a8a293; display: inline-block; max-width: 500px; } #left .item .lower .lower_content { padding: 30px 30px 0px; text-shadow: none; } #left .item .lower_content a { float: right; } #left .item .lower_content a.time_ago { float: none; margin: 0px; position: relative; top: 1px; } .time_ago_container {} .time_ago_container .hl { float: left; } .time_ago_container .hl_left { background: url(http://static.tumblr.com/ge74hdk/VINlwgqym/timestamp_left.png) no-repeat; height: 23px; width: 8px; } .time_ago_container .hl_right { background: url(http://static.tumblr.com/ge74hdk/ZLllwgqyz/timestamp_right.png) no-repeat 0px -1px; height: 24px; width: 15px; } .time_ago_container .hl_middle { background-color: #efe7b4; height: 23px; } /* post-type-specific styles */ #left .item.text .item_content { padding: 16px 31px; } #left div.item.text img { max-width: 470px !important; } #left .item .caption_border_outer { border-top: 1px solid #dcd7d4; border-bottom: 1px solid #FFFFFF; margin-top: 10px; } #left .item .caption_border_inner { border-top: 1px solid #FFFFFF; border-bottom: 1px solid #dcd7d4; height: 3px; width: 512px; } #left .item .caption { padding: 12px 12px 5px; } #left .item.link .item_content { padding: 16px 31px; } #left .item.link a.link { padding: 6px 10px; border-radius: 4px; display: inline-block; *display: inline; /* IE filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; */ } #left .item.link .border_inner { border-bottom: 1px solid #959acc; display: inline; } #left .item.link .border_outer { border-bottom: 1px solid #c7c9e3; display: inline; } #left .item.chat .item_content { padding: 16px 31px; } #left .item.chat .item_content .line { border-radius: 4px; padding: 5px; } #left .item.chat .odd { background: url(http://static.tumblr.com/ge74hdk/h4llw84gr/purple_pixel.png); } #left .item.quote .item_content { padding: 16px 31px; } #left .item.quote .quote_container { padding-bottom: 5px; } #left .item.quote .quote_body { border-top: 1px solid #d3d2d3; border-left: 1px solid #d3d2d3; border-right: 1px solid #d3d2d3; width: 449px; padding: 8px 10px; border-radius: 4px 4px 0 0; } #left .item.quote .quote_lower { background: url(http://static.tumblr.com/ge74hdk/RDLlwbryq/quote_lower.png) no-repeat; width: 471px; height: 18px; } #left .item.quote cite { font-weight: bold; } #left .item.audio .item_content { padding: 16px 31px; min-height: 0px; } #left .item.audio .art { float: left; padding-right: 25px; background: url(http://static.tumblr.com/ge74hdk/s4Flw877a/record.png) no-repeat right top; margin-right: 16px; } #left .item.audio .art img { width: 110px; border-bottom: 1px solid #cfccc5; } #left .item.audio .track_info { float: left; font-size: 15px; } #left .item.audio .track_info .track_name { font-size: 20px; font-weight: bold } #left .item.audio .track_info .artist_album { font-size: 16px; font-weight: bold } #left .item.audio .track_info .audio_player { display: inline-block; *display: inline; } #left .item.audio .track_info .audio_player embed { outline: none; } #left .item.audio .track_info .player_wrapper { background-color: #e4e4e4; border-radius: 4px; padding: 7px 4px 5px; margin-top: 4px; border: 1px solid #c2c2cc; box-shadow: inset 0px 1px #f6f6f7; |
kgold |
Jun 18 2012, 08:51 PM
Post
#2
|
Group: Members Posts: 3 Joined: 11-June 12 Member No.: 17,257 |
200+ views and no responses?! Come on, please help!
|
Darin McGrew |
Jun 19 2012, 07:10 PM
Post
#3
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
The regulars here aren't familiar with Tumblr. But perhaps the FAQ entry How do I put links along the left side of my page? will help you.
|
Lo-Fi Version | Time is now: 24th April 2024 - 08:42 AM |