[Tumblr] Reblog Bar (?) |
[Tumblr] Reblog Bar (?) |
Mellow Fisherman |
May 18 2012, 02:29 AM
Post
#1
|
Group: Members Posts: 3 Joined: 18-May 12 Member No.: 17,134 |
I don't know how else to call it. Basically, these things:
I want to add it to one of the free themes I'm currently using, which looks like this: I just want to add the bars on the side. I really have no experience with html coding whatsoever, so here's the code for the theme: CODE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- Tumblr Theme Designed by: Author: Arsha Jones URL: www.brandbuildsell.com Date: March 2010 License: This free Tumblr template is licensed under the Creative Commons Attribution 3.0 License, which permits both personal and commercial use. However, to satisfy the 'attribution' clause of the license, you are required to keep the footer links intact which provides due credit to its authors. For more specific details about the license, you may visit the URL below: http://creativecommons.org/licenses/by/3.0/ --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="color:Background" content="#2e3b44" /> <meta name="color:Headings" content="#3ea3b5" /> <meta name="color:Text" content="#1a2228" /> <meta name="color:Notes" content="#232e36" /> <meta name="image:Background" content="http://static.tumblr.com/nbxilpo/8uqkz74z6/header-bg.jpg" /> <meta name="color:Pagination" content="#fff" /> <meta name="text:BackgroundRepeat" content="no-repeat" /> <meta name="description" content="{MetaDescription}" /> <title>{Title}</title> <link rel="shortcut icon" href="{Favicon}" /> <link rel="alternate" type="application/rss+xml" href="{RSS}" /> <style type="text/css"> body { font-size: 14px; font-family: Arial, Helvetica, sans-serif; background:{color:background} url({image:background}) no-repeat center top; background-repeat:{text:BackgroundRepeat}; background-attachment: fixed; } h1,h2,h3,h4,h5,h6 { color: {color:Headings}; } h2 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 35px; margin: 0; } h2 a, h2 { text-decoration: none; color: {color:Headings}; } h2 a:hover { text-decoration: underline; } p, h5 { margin-bottom: 1em; line-height: 22px; text-align:left; color:{color:Text}; } a { color: white; text-decoration: none; } a:hover { text-decoration: none; } ul li, ol li { line-height: 25px; } blockquote { margin: 0; } blockquote p { font-family: Arial; font-size:20px; color: #000; margin-top: 0; } .quote p { font-family: Georgia, "Times New Roman", Times, serif; font-size:28px; color: {color:Headings}; margin-top: 0; font-weight:bold; } /* MAIN */ #container { width: 770px; margin: 70px auto; overflow: hidden; } #container h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 30px; margin-bottom: 60px; } /* HEADER */ #header { margin: -10px 0 0 125px; overflow: hidden; } #header h1 a { font-size:50px; color: white; display: block; text-decoration: none; } /* POST */ .link, .photo, .text, .video, .audio, .chat, .quote { overflow: hidden; margin-bottom: 40px; position:relative; } .post { float: left; margin-left: 121px; position: relative; width: 522px; padding: 20px 20px 40px 25px; background: #fff; color: {color:Text}; min-height:100px; } .postMeta { float: left; width: 50px; height: 75px; padding: 10px 0 5px 0; margin: 0 -120px 0 70px; color: white; background: url(http://static.tumblr.com/nbxilpo/F9Skz6qzs/date-bg.png) no-repeat; } .postMeta li { font-size: 11px; line-height: 5px; text-align: center; list-style: none; font-family: Georgia, "Times New Roman", Times, serif; text-transform: uppercase; } .postMeta li span { font-size: 29px; color:{color:Headings}; line-height: 40px; } .postTop { background: url(http://static.tumblr.com/nbxilpo/qEYl559l2/post-top.png) no-repeat; margin-left: 112px; width: 585px; height: 43px; margin-top:10px; margin-bottom:-15px; position:relative; } .postBottom { background: url(http://static.tumblr.com/nbxilpo/sfQl559gh/post-bottom.png) no-repeat; margin-left:112px; width: 585px; height: 66px; margin-top:-50px; margin-bottom:30px; } .notes { float:right; position:absolute; left:360px; top:-123px; font-family: Georgia, "Times New Roman", Times, serif; font-weight:bold; color: {color:Notes}; font-size:30px; display:block; width:220px; text-align:right; letter-spacing: -.08em; } .notes a { text-decoration: none; } /* POST TAGS */ .tags { clear: both; font-size: 12px; float:right; margin-right:25px; margin-top:-17px; padding: 3px 5px 3px 5px; } .tags a { color: #4d4d4d; } .tags li { display: inline; margin-right: 7px; line-height: 15px; color: #3ea3b5; } .post h2, .post h2 a { color: {color:Headings}; margin: 00px 0 0 0px; } .post a { color: {color:Text}; } /* POST ICONS */ .audioIcon { background: url(http://static.tumblr.com/nbxilpo/NV6kz6lnf/audio.png) no-repeat; position: absolute; top:100px; margin-left:-17px; width: 27px; height: 118px; position:absolute; } .linkIcon { background: url(http://static.tumblr.com/nbxilpo/LeWkz6lns/link.png) no-repeat; position: absolute; top:100px; margin-left:-17px; width: 25px; height: 83px; } .photoIcon { background: url(http://static.tumblr.com/nbxilpo/DuTkz6lo1/photo.png) no-repeat; position: absolute; top:100px; margin-left:-17px; width: 28px; height: 127px; } .quoteIcon { background: url(http://static.tumblr.com/nbxilpo/rX5kzbz9g/quote.png) no-repeat; position: absolute; top:100px; margin-left:-17px; width: 31px; height: 129px; } .textIcon { background: url(http://static.tumblr.com/nbxilpo/NvXkz6lot/text.png) no-repeat; position: absolute; top:100px; margin-left:-17px; width: 26px; height: 92px; } .videoIcon { background: url(http://static.tumblr.com/nbxilpo/GCZkz6lp6/video.png) no-repeat; position: absolute; top:100px; margin-left:-17px; width: 27px; height: 128px; } .chatIcon { background: url(http://static.tumblr.com/nbxilpo/ivakzbz3p/chat.png) no-repeat; position: absolute; top:100px; margin-left:-17px; width: 27px; height: 128px; } .quote .post { background: url(http://static.tumblr.com/nbxilpo/DNXkzt67k/quote.png) #fff no-repeat top left; } /* PHOTO */ .photo .post { text-align: center; } .photo .post ul { text-align: left; } .photo img { padding: 5px; background: #e3e3e3; border: 1px solid #d2d1d1; width: 500px; } /* CHAT */ /* GET RID OF? */ .chat .post h5 { margin-top: 15px; padding-top: 15px; border-top: 1px solid #dddddd; } .chat .post ul { padding-left: 0; } .chat .post li { list-style: none; margin-bottom: 10px; padding: 7px; } .chat .label { font-weight: bold; font-size: 1.1em; } .chat li p { display: inline; } .chat .even { background: #e3e3e3; } .chat .odd { background: #f1f1f1; } /* AUDIO */ div.audio_player { background: #e4e4e4; margin-bottom: 10px; } /* FOOTER */ .footer { width:585px; margin: 20px 0 0 125px; } .footer a, .footer p { color: #4d5c68; text-align: center; font-size: 10px; text-decoration: none; } /* SIDEBAR STYLING */ #sidebar { position:absolute; top:20px; left:0; display: none; border-top: 0px solid white; border-right: 0px solid white; background: url(http://static.tumblr.com/nbxilpo/Ycrkzcejg/sidebar-bg.png); /* background: -moz-linear-gradient (top, #ebebeb, white); background: -webkite-gradient(linear, left top, left bottom, from(#ebebeb), to(white));*/ padding: 30px; -moz-border-radius: 2px; -webkit-border-radius: 2px; color: #fff; width: 300px; } #sidebar a { color:#FFFFFF; } #sidebar h2 { line-height: 45px; color:#FFFFFF; margin-top: 30px; margin-bottom: 10px; } img#portrait { float: left; margin-right: 20px; margin-bottom: 20px; } #sidebarButton { position: absolute; top:0px; right: -14px; cursor: pointer; margin: 0 -21px 0 0; } #sidebar ul#following { padding-left: 0; background: red; overflow: hidden; } #sidebar ul#following li { float: left; list-style: none; padding: 0 10px 10px 0; } /* GENERIC */ #container .first, #sidebar .first { margin-top: 0; } .permalink { padding-top:20px; padding-left:35px; font-size: 10px; font-style:none; display:block; width:50px; } .permalink a { color:#b1b1b1; } /* Pagination */ .pagination { text-align:center; font-family: Georgia, "Times New Roman", Times, serif; font-weight:bold; color: {color:Pagination}; font-size:30px; letter-spacing: -.08em; } {CustomCSS} .quote1 { overflow: hidden; margin-bottom: 40px; position:relative; } </style> </head> <body> <div id="container"> <div id="headerBg"></div> <div id="header"> <h1> <a href="/">{Title}</a></h1> </div> <!-- end header --> {block:Posts} {block:Text} <div class="postTop"> <div class="textIcon">{block:NoteCount} <a href="{Permalink}"><div class="notes">{NoteCount} Notes</div> </a>{/block:NoteCount}</div></div> <div class="text"> {block:Date} <ul class="postMeta"> <li><a href="{Permalink}">{ShortMonth}</a></li> <li><span><a href="{Permalink}">{DayofMonth}</a></span></li> <li><a href="{Permalink}">{Year}</a></li> </ul> {/block:Date} <div class="post"> {block:Title} <h2> <a href="{Permalink}">{Title}</a></h2> {/block:Title} {Body} </div><!-- end post --> </div> <!-- endt text --> <div class="postBottom"> <div class="permalink"><a href="{Permalink}">permalink</a></div> {block:HasTags} <ul class="tags"> <li><strong>Tags: </strong></li> {block:Tags} <li><a href="{TagURL}">{Tag}</a></li> {/block:Tags} </ul> {/block:HasTags} </div> {/block:Text} {block:Photo} <div class="postTop"><div class="photoIcon"> {block:NoteCount}<a href="{Permalink}"><div class="notes">{NoteCount} Notes</div> </a>{/block:NoteCount} </div></div> <div class="photo"> {block:Date} <ul class="postMeta"> <li><a href="{Permalink}">{ShortMonth}</a></li> <li><span><a href="{Permalink}">{DayofMonth}</a></span></li> <li><a href="{Permalink}">{Year}</a></li> </ul> {/block:Date} <div class="post"> {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag} {block:Caption} <p>{Caption}</p> {/block:Caption} </div> </div> <!-- end photo --> <div class="postBottom"> <div class="permalink"><a href="{Permalink}">permalink</a></div> {block:HasTags} <ul class="tags"> <li><strong>Tags: </strong></li> {block:Tags} <li><a href="{TagURL}">{Tag}</a></li> {/block:Tags} </ul> {/block:HasTags} </div> {/block:Photo} {block:Chat} <div class="postTop"><div class="chatIcon"> {block:NoteCount} <a href="{Permalink}"><div class="notes">{NoteCount} Notes</div> </a> {/block:NoteCount} </div></div> <div class="chat"> {block:Date} <ul class="postMeta"> <li><a href="{Permalink}">{ShortMonth}</a></li> <li><span><a href="{Permalink}">{DayofMonth}</a></span></li> <li><a href="{Permalink}">{Year}</a></li> </ul> {/block:Date} <div class="post"> {block:Title} <h2> <a href="{Permalink}">{Title}</a></h2> {/block:Title} <ul> {block:Lines} <li class="{Alt}"> {block:Label} <span class="label">{Label}</span> {/block:Label} <p>{Line}</p> </li> {/block:Lines} </ul> </div> </div> <!-- end chat --> <div class="postBottom"> <div class="permalink"><a href="{Permalink}">permalink</a></div> {block:HasTags} <ul class="tags"> <li><strong>Tags: </strong></li> {block:Tags} <li><a href="{TagURL}">{Tag}</a></li> {/block:Tags} </ul> {/block:HasTags} </div> {/block:Chat} {block:Video} <div class="postTop"><div class="videoIcon"> {block:NoteCount} <a href="{Permalink}"><div class="notes">{NoteCount} Notes</div> </a> {/block:NoteCount} </div></div> <div class="video"> {block:Date} <ul class="postMeta"> <li><a href="{Permalink}">{ShortMonth}</a></li> <li><span><a href="{Permalink}">{DayofMonth}</a></span></li> <li><a href="{Permalink}">{Year}</a></li> </ul> {/block:Date} <div class="post"> {Video-500} {block:Caption} <p> {Caption} </p> {/block:Caption} </div> </div> <div class="postBottom"> <div class="permalink"><a href="{Permalink}">permalink</a></div> {block:HasTags} <ul class="tags"> <li><strong>Tags: </strong></li> {block:Tags} <li><a href="{TagURL}">{Tag}</a></li> {/block:Tags} </ul> {/block:HasTags} </div> {block:Video} {block:Audio} <div class="postTop"><div class="audioIcon"> {block:NoteCount} <a href="{Permalink}"><div class="notes">{NoteCount} Notes</div> </a>{/block:NoteCount} </div></div> <div class="audio"> {block:Date} <ul class="postMeta"> <li><a href="{Permalink}">{ShortMonth}</a></li> <li><span><a href="{Permalink}">{DayofMonth}</a></span></li> <li><a href="{Permalink}">{Year}</a></li> </ul> {/block:Date} <div class="post"> {AudioPlayerGrey} {FormattedPlayCount} Plays {block:Caption} <div class="caption">{Caption}</div> {/block:Caption} </div> </div> <!-- end audio --> <div class="postBottom"> <div class="permalink"><a href="{Permalink}">permalink</a></div> {block:HasTags} <ul class="tags"> <li><strong>Tags: </strong></li> {block:Tags} <li><a href="{TagURL}">{Tag}</a></li> {/block:Tags} </ul> {/block:HasTags} </div> {/block:Audio} {block:Quote} <div class="postTop"><div class="quoteIcon"> {block:NoteCount} <a href="{Permalink}"><div class="notes">{NoteCount} Notes</div> </a>{/block:NoteCount} </div></div> <div class="quote" id="blockquote"> {block:Date} <ul class="postMeta"> <li><a href="{Permalink}">{ShortMonth}</a></li> <li><span><a href="{Permalink}">{DayofMonth}</a></span></li> <li><a href="{Permalink}">{Year}</a></li> </ul> {/block:Date} <div class="post"> <blockquote> <p> {Quote} </p> {block:Source} <cite> {Source} </cite> {/block:Source} </blockquote> </div> </div> <!-- end quote --> <div class="postBottom"> <div class="permalink"><a href="{Permalink}">permalink</a></div> {block:HasTags} <ul class="tags"> <li><strong>Tags: </strong></li> {block:Tags} <li><a href="{TagURL}">{Tag}</a></li> {/block:Tags} </ul> {/block:HasTags} </div> {/block:Quote} {block:Link} <div class="postTop"><div class="linkIcon"> {block:NoteCount} <a href="{Permalink}"><div class="notes">{NoteCount} Notes</div> </a> {/block:NoteCount} </div></div> <div class="link"> {block:Date} <ul class="postMeta"> <li><a href="{Permalink}">{ShortMonth}</a></li> <li><span><a href="{Permalink}">{DayofMonth}</a></span></li> <li><a href="{Permalink}">{Year}</a></li> </ul> {/block:Date} <div class="post"> <h2> <a href="{URL}"> {Name} </a></h2> {block:Description} <p>{Description}</p> {/block:Description} </div> </div> <div class="postBottom"> <div class="permalink"><a href="{Permalink}">permalink</a></div> {block:HasTags} <ul class="tags"> <li><strong>Tags: </strong></li> {block:Tags} <li><a href="{TagURL}">{Tag}</a></li> {/block:Tags} </ul> {/block:HasTags} </div> {/block:Link} {/block:Posts} <div class="pagination"> {block:Pagination} {block:PreviousPage} <a href="{PreviousPage}">Previous</a> {/block:PreviousPage} {block:NextPage} <a href="{NextPage}">Next</a> {/block:NextPage} {/block:Pagination} </div> <div class="footer"> <!-- Please Do Not Remove These Footer Links --> <p> a free <a href="http://www.brandbuildsell.com/category/free-templates/free-tumblr-templates/">tumblr theme</a> designed by <a href="http://www.brandbuildsell.com">brand. build. sell.</a></p> <!-- Thanks and Enjoy Your Theme! --> </div> <!-- end footer --> </div> </div> <!-- end container --> <div id="sidebar"> <div id="aboutInner"> <img src="{PortraitURL-64}" alt="" id="portrait" /> <h2 class="first"> {Title} </h2> <p> {Description} </p> <h2> Search </h2> <form action="/search" method="get"> <input type="text" name="q" value="{SearchQuery}" /> <input type="submit" value="Submit" /> </form> {block:HasPages} <h2> Pages </h2> <ul id="nav"> <li> <a href="/"> Home </a> </li> {block:Pages} <li> <a href="{URL}"> {Label} </a> </li> {/block:Pages} </ul> {/block:HasPages} <h2> <a href="/archive"> Archive </a> </h2> <p> <a href="/archive"> View All Postings </a> </p> {block:Twitter} <div id="twitter" style="display:none;"> <h2><a href="http://twitter.com/{TwitterUsername}">Latest Tweets</a></h2> <div id="tweets"></div> </div> <script type="text/javascript"> function recent_tweets(data) { for (i=0; i<data.length; i++) { document.getElementById("tweets").innerHTML = document.getElementById("tweets").innerHTML + '<a href="http://twitter.com/{TwitterUsername}/status/' + data[i].id + '"><div class="content">' + data[i].text + '</div></a>'; } document.getElementById("twitter").style.display = 'block'; } </script> {/block:Twitter} {block:IfShowWhoIFollow} <h2> Following </h2> {block:Following} <ul id="following"> {block:Followed} <li> <a href="{FollowedURL}"> <img src="{FollowedPortraitURL-30" alt="{FollowedTitle}" /> </a> </li> {/block:Followed} </ul> {/block:Following} {/block:IfShowWhoIFollow} <img src="http://static.tumblr.com/jbsroa6/DnIlv8450/btn-see-more__1_.png" alt="" id="sidebarButton" /> </div> <!-- end sidebarInner --> </div> <!-- end sidebar --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script> <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js" type="text/javascript"></script> <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script> <script type="text/javascript"> (function sidebar() { var sidebar = $('#sidebar').show(), sidebarButton = $('#sidebarButton', sidebar), w = sidebar.outerWidth(); sidebar.css('left', '-' + w + 'px'); sidebarButton.toggle ( function() { sidebar.css('left', 0).show('slide', { easing: 'easeOutBounce' }, 1000, function() { sidebarButton.css('right', '-14px'); }); }, function() { sidebar.animate({ left: '-' + w + 'px' }, 1000, 'easeOutBounce'); sidebarButton.css('right', '-14px'); } ); }()); </script> {block:Twitter} <script type="text/javascript" src="/tweets.js"></script> {/block:Twitter} <script type="text/javascript" src="http://static.tumblr.com/nbxilpo/vpTkzwq6w/cufon-yui.js"></script> <script type="text/javascript" src="http://static.tumblr.com/nbxilpo/JSZkzwqls/rockwell_400-rockwell_700.font.js"></script> <script type="text/javascript"> Cufon.now(); </script> <script type="text/javascript"> Cufon.replace('h2, .quote p, #container h1, .postMeta li, .notes, .pagination'); </script> </body> </html> If someone knows how I can add the bars, it'd be greatly appreciated! |
Mellow Fisherman |
May 18 2012, 07:43 PM
Post
#2
|
Group: Members Posts: 3 Joined: 18-May 12 Member No.: 17,134 |
Nevermind, I've figured it out. It's actually called the blockquote.
The problem now is that it appears on my quote posts as well. What change should I add? CODE blockquote { margin: 10px 0px 0px 25px; border-left: 5px solid #eee; font-family: Arial; font-size:15px; color: #000; margin-top: 0; padding: 0px 0px 0px 8px; } blockquote p { padding: 0 } .quote p { font-family: Georgia, "Times New Roman", Times, serif; font-size:28px; color: {color:Headings}; margin-top: 0; font-weight:bold; } |
Mellow Fisherman |
May 18 2012, 10:24 PM
Post
#3
|
Group: Members Posts: 3 Joined: 18-May 12 Member No.: 17,134 |
I've figured it out again! Please close this thread.
|
Lo-Fi Version | Time is now: 25th April 2024 - 12:24 PM |