Help - Search - Members - Calendar
Full Version: Help a noob
HTMLHelp Forums > Web Authoring > Web Site Functionality
Miso
Hi, i wanna add an image to my sidebar, but i have no idea how to do it. Can anybody help me? :<

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<!--

THEME BY STELLARANGELS

-edit as much as you like
-keep the credit intact (don't move it to a second page)
-don't copy and claim as your own

-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://static.tumblr.com/ofgq56z/KuXmourur/jquery.style-my-tooltips.js" type="text/javascript"></script>
<script>
     (function($){
         $(document).ready(function(){
             $("[title],a[title]").style_my_tooltips({
    tip_follows_cursor:"true",
    tip_delay_time:20,
    tip_fade_speed:100,
    attribute:"title"
});
});
})(jQuery);
</script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script><script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>

<script>
$(function(){
var $container = $("#all");
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: ".posts",
});
});
$container.infinitescroll({
itemSelector : ".posts",
navSelector : "div.pagination",
nextSelector : ".pagination a#next",
loadingImg : "",
loadingText : "<em></em>",
bufferPx : 10000,
extraScrollPx: 12000,
},
// trigger Masonry as a callback
function( newElements ) {
  var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
</script>

<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}

<meta name="color:background" content="#efede0"/>
<meta name="color:text" content="#000000"/>
<meta name="color:links" content="#000000"/>
<meta name="color:colorblock" content="#f6cac9"/>
<meta name="color:hoverhint" content="#d1a2a1"/>
<meta name="color:desc" content="#ffffff"/>
<meta name="color:sidelinks" content="#ffffff"/>
<meta name="color:postbg" content="#ffffff"/>
<meta name="color:details" content="#000000"/>
<meta name="color:scrollbar" content="#ffffff"/>

<meta name="text:title2" content="13-1520"/>
<meta name="text:link1" content="link 1"/>
<meta name="text:link1url" content="/"/>
<meta name="text:link2" content="link 2"/>
<meta name="text:link2url" content="/"/>
<meta name="text:link3" content="link 3"/>
<meta name="text:link3url" content="/"/>
<meta name="text:link4" content="link 4"/>
<meta name="text:link4url" content="/"/>

<meta name="if:singlecolumn" content="1"/>
<meta name="if:doublecolumn" content="0"/>
<meta name="if:infinitescroll" content="0"/>
<meta name="if:pagination" content="1"/>
<meta name="if:shadows" content="1"/>
<meta name="if:showhoverhint" content="1"/>
<meta name="if:showcaption" content="0"/>
<meta name="if:showtags" content="0"/>

<style type="text/css">

#s-m-t-tooltip{position:absolute;width:auto;z-index:11111;margin-left:13px;margin-top:15px;padding:4px;background:#fff;font-family:helvetica;font-size:8px;line-height:120%;color:#000;text-transform:uppercase;letter-spacing:1px;line-height:105%;border:1px solid black;}
::-webkit-scrollbar {width:12px;background:{color:background};}
::-webkit-scrollbar:horizontal {display:none;}
::-webkit-scrollbar-thumb:vertical {width:2px;height:100px;background:{color:scrollbar};border:solid 5px {color:background};}
#tumblr_controls {-webkit-filter: invert(100%);}
body {margin:0px;color:{color:text};font-family:helvetica;font-size:11px;font-weight:normal;line-height:100%;background:{color:background};}
img {border:none;max-width:400px;}
h1 {font-family:helvetica;text-align:center;font-size:12px;padding-top:10px;letter-spacing:1px;text-transform:uppercase;line-height:110%;}
blockquote {padding-left:5px;border-left:1px solid {color:text};}
blockquote blockquote {padding-left:5px;border-left:1px solid {color:text};}
p {margin:10px;font-weight:normal;}
li {font-weight:normal;}
a {color:{color:links};text-decoration:none;transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;}
a:hover {opacity:1;text-decoration:underline;}
#sidebar {position:fixed;width:200px;height:260px;bottom:141px;left:141px;background:{color:postbg};{block:ifshadows}box-shadow:#a1a1a1 3px 3px 3px 0px;{/block:ifshadows}}
.sug {cursor:default;position:fixed;width:200px;color:{color:hoverhint};font-size:11px;font-family:arial;font-style:italic;text-align:center;letter-spacing:1px;margin-top:165px;text-transform:uppercase;transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;}
#sidebar:hover  .sug {opacity:0;}
.clrblck {position:absolute;width:200px;height:180px;background:{color:colorblock};z-index:-1111;}
.title {position:fixed;cursor:default;font-family:helvetica;font-weight:bold;color:{color:text};margin-top:195px;margin-left:10px;font-size:20px;text-transform:uppercase;text-align:left;}
.title a:hover {text-decoration:none;}
.title2 {cursor:default;position:fixed;font-size:20px;font-family:helvetica;color:{color:text};font-weight:none;margin-top:220px;margin-left:10px;letter-spacing:1px;}
.links {position:absolute;margin-top:70px;margin-left:15px;line-height:140%;opacity:0;letter-spacing:1px;transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;}
#sidebar:hover .links {opacity:1;}
.links a {font-family:helvetica;color:{color:sidelinks};font-size:14px;}
.desc {width:170px;margin-top:15px;margin-left:15px;position:fixed;cursor:default;font-family:helvetica;line-height:120%;letter-spacing:1px;color:{color:desc};font-style:italic;opacity:0;transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;}
#sidebar:hover .desc {opacity:1;}
.pagination {display:none;}
.pagi {cursor:default;position:relative;display:block;bottom:50px;{block:ifsinglecolumn}width:390px;left:483px;word-spacing:20px;{/block:ifsinglecolumn}{block:ifdoublecolumn}width:840px;left:427px;word-spacing:55px;{/block:ifdoublecolumn}height:11px;padding:5px;font-family:helvetica;font-weight:normal;text-align:center;font-size:11px;background:{color:postbg};{block:ifshadows}box-shadow:#a1a1a1 3px 3px 3px 0px;{/block:ifshadows}}
.pagi a {color:{color:links};}
.pagi a:hover {text-decoration:none;}
#all {{block:ifsinglecolumn}width:400px;margin:50px 0px 50px 433px;{/block:ifsinglecolumn}{block:ifdoublecolumn}width:1000px;margin:50px 0px 50px 403px;{/block:ifdoublecolumn}}
.posts {width:400px;padding:0px 0px 15px 0px;{block:ifsinglecolumn}margin:50px;{/block:ifsinglecolumn}{block:ifdoublecolumn}margin:25px;float:left;{/block:ifdoublecolumn}word-wrap:break-word;background:{color:postbg};{block:ifshadows}box-shadow:#a1a1a1 3px 3px 3px 0px;{/block:ifshadows}}
.newplayerbutton {position:relative;width:28px;height:27px;overflow:hidden;}
.playerbuttonhug {position:absolute;top:-11px;left:-12px;}
.tumblr_audio_player {width:30px;height:30px;border:none;padding:10px 7px;}
.playerbuttonbg {width:20px; height:30px; margin:20px;overflow:hidden; position: absolute;background-color: #ffffff;padding:5px 10px;opacity: .7;transition: opacity .5s ease-in-out;-moz-transition: opacity .5s ease-in-out;-webkit-transition: opacity .5s ease-in-out;}
.playerbuttonbg:hover {opacity: 1;}
.audioimgwrapper {position: absolute;left: 0px;top: 0px;overflow: hidden;width: 80px;height: 80px;}
.audioimgwrapper img {width: 100%;height: auto;}
.trackdetails {cursor:default;line-height:105%;width:auto;font-family:helvetica;font-size:15px;font-weight:normal;display:inline-block;margin-left:90px;margin-top:10px;min-height:85px;}
.audiowrapper {position: relative;display:inline-block;}
#details {cursor:default;font-family:helvetica;font-size:18px;font-weight:normal;color:{color:details};letter-spacing:1px;margin-top:10px;margin-left:10px;line-height:110%;}
#details a {cursor:pointer;color:{color:details};text-decoration:none;}
#details a:hover {text-decoration:none;}
.tags {font-family:helvetica;font-size:15px;margin-top:-2px;letter-spacing:none;word-spacing:none;font-weight:normal;}
.tags:first-letter {text-transform:uppercase;}
.tags a:after {content:'\002C\00a0';}
.tags a:last-child:after {content:'';}
#question {cursor:default;font-family:helvetica;text-align:left;line-height:120%;padding:10px 10px 0px 10px;font-style:italic;color:{color:text};}
#quote {cursor:default;padding:10px;font-family:helvetica;font-weight:normal;font-size:20px;line-height:110%;}
#source {padding:8px;text-align:right;line-height:110%;font-size:10px;}
#cred {position:fixed;bottom:5px;right:5px;font-size:15px;}
#cred a {color:#000;}
#cred a {text-decoration:none;}
ol.notes {position:fixed;width:350px;top:90px;right:100px;max-height:60%;overflow-y:scroll;padding: 0px;list-style-type: none;background:{color:postbg};{block:ifshadows}box-shadow:#a1a1a1 3px 3px 3px 0px;{/block:ifshadows}}
ol.notes li.note {padding:10px;}
ol.notes li.note img.avatar {vertical-align: -4px;margin-right: 10px;width: 16px;height: 16px;}
ol.notes li.note span.action {font-weight:normal;}
ol.notes li.note .answer_content {font-weight: normal;}
ol.notes li.note blockquote {border-color: #eee;padding: 4px 10px;margin: 10px 0px 0px 25px;}
ol.notes li.note blockquote a {text-decoration: none;}

{CustomCSS}</style></head><body>

<div id="sidebar">
<div class="clrblck"></div>
<div class="desc">{Description}</div>
<div class="links">
<a href="/ask">message</a>
<br /><a href="/archive">history</a>
{block:iflink1}<br /><a href="{text:link1url}">{text:link1}</a>{/block:iflink1}
{block:iflink2}<br /><a href="{text:link2url}">{text:link2}</a>{/block:iflink2}
{block:iflink3}<br /><a href="{text:link3url}">{text:link3}</a>{/block:iflink3}
{block:iflink4}<br /><a href="{text:link4url}">{text:link4}</a>{/block:iflink4}
</div>
{block:ifshowhoverhint}<div class="sug">(hover)</div>{/block:ifshowhoverhint}
<div class="title"><a href="/">{Title}</a></div>
<div class="title2">{text:title2}</div>
</div>

<div id="all">{block:Posts}<div class="posts">

{block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}

{block:Photo}{LinkOpenTag}<img src="{PhotoURL-400}">{LinkCloseTag}{block:ifshowcaption}{block:Caption}{Caption}{/block:Caption}{/block:ifshowcaption}{/block:Photo}

{block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}

{block:Photoset}{Photoset-400}{block:ifshowcaption}{block:Caption}{Caption}{/block:Caption}{/block:ifshowcaption}{/block:Photoset}

{block:Quote}<div id="quote">{Quote}</div>
<div id="source">{Source}</div>{/block:Quote}

{block:Audio}{block:AudioPlayer}<div class="audiowrapper">{block:AlbumArt}<div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}      <div class="playerbuttonbg"><div class="newplayerbutton"><div class="playerbuttonhug">{AudioPlayerWhite}</div></div></div>
<div class="trackdetails">
{block:TrackName}<strong>{TrackName}</strong>{/block:TrackName}{block:Artist} by <strong>{Artist}</strong>{/block:Artist}
{block:Album}<br /><em>{Album}</em>{/block:Album}
</div>
</div>
{/block:AudioPlayer}
{block:Caption}{Caption}{/block:Caption}
{/block:Audio}

{block:Video}{Video-400}{block:ifshowcaption}{block:Caption}{Caption}{/block:Caption}{/block:ifshowcaption}{/block:Video}

{block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}{block:Lines}<span style="line-height:110%;padding:10px;">{block:Label}<b>{Label}</b>{/block:Label} {Line}<br /></span>{/block:Lines}{/block:Chat}

{block:Answer}<div id="question"><span style="font-family:helvetica;font-size:15px;font-weight:bold;letter-spacing:1px;color:{color:link};text-decoration:none;text-transform:uppercase;">{Asker}</span>
<br>{Question}</div>
<p>{Answer}</p>{/block:Answer}

{block:ContentSource}
<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ContentSource}

<div id="details">
{block:Date}<strong>{Month} {DayOfMonthWithZero}{/block:Date}{block:RebloggedFrom}<a title="{ReblogRootName}" href="{ReblogRootURL}"><span style="font-size:13.5px;"><sup>®</sup></span></a></strong>{/block:RebloggedFrom}<br />{block:NoteCount}<a title="notes" href="{Permalink}">{NoteCount}</a>{/block:NoteCount}</span> {block:Reblog}<a title="reblog" href="{ReblogURL}" target="_blank" class="details">R</a>{/block:Reblog}
{block:ifshowtags}{block:HasTags}<div class="tags">{block:Tags}<a href="{TagURL}">{Tag}</a> {/block:Tags}</div>{/block:HasTags}{/block:ifshowtags}
</div>
</div>
{/block:Posts}

{block:PostNotes}{PostNotes}{/block:PostNotes}
{/block:Posts}</div></div></div>

{block:Pagination}
{block:ifinfinitescroll}
<div class="pagination">{block:PreviousPage}<a href="{PreviousPage}">previous</a> ·{/block:PreviousPage} {block:NextPage}<a href="{NextPage}" id="next">next</a>{/block:NextPage}</div>
{/block:ifinfinitescroll}
{block:ifpagination}
<div class="pagi">
{block:PreviousPage}<a href="{PreviousPage}">❬</a>{/block:PreviousPage}
{block:JumpPagination length="10"}
{block:CurrentPage}<span style="text-decoration:underline;" class="current_page">{PageNumber}</span>{/block:CurrentPage}
{block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}
{/block:JumpPagination}
{block:NextPage}<a href="{NextPage}">❭</a>{/block:NextPage}
</div>
{/block:ifpagination}
{/block:Pagination}

<div id="cred"><a href="http://stellarangels.tumblr.com/">©</a></div>

</body></html>
pandy
Hi noob! happy.gif

That looks like a tumblr template. I'm afraid it's hard for us to help since none of the regulars here uses tumblr and we aren't familiar with its proprietary language. I guess this is the section for the sidebar.

CODE
<div id="sidebar">
<div class="clrblck"></div>
<div class="desc">{Description}</div>
<div class="links">
<a href="/ask">message</a>
<br /><a href="/archive">history</a>
{block:iflink1}<br /><a href="{text:link1url}">{text:link1}</a>{/block:iflink1}
{block:iflink2}<br /><a href="{text:link2url}">{text:link2}</a>{/block:iflink2}
{block:iflink3}<br /><a href="{text:link3url}">{text:link3}</a>{/block:iflink3}
{block:iflink4}<br /><a href="{text:link4url}">{text:link4}</a>{/block:iflink4}
</div>
{block:ifshowhoverhint}<div class="sug">(hover)</div>{/block:ifshowhoverhint}
<div class="title"><a href="/">{Title}</a></div>
<div class="title2">{text:title2}</div>
</div>


As you can see most of that isn't HTML but tumblr lingo - everything in curly braces is. The server program take that and turns it into something else before it serves the page to the browser. I suppose if you want the image at the top or bottom of the sidebar you could try just putting it there and see what happens. If you want it somewhere in the middle you would need to take care it's outside the curly braces.

CODE
<div id="sidebar">

<!-- Maybe here -->

<div class="clrblck"></div>
<div class="desc">{Description}</div>
<div class="links">
<a href="/ask">message</a>
<br /><a href="/archive">history</a>

<!-- Maybe here -->


{block:iflink1}<br /><a href="{text:link1url}">{text:link1}</a>{/block:iflink1}
{block:iflink2}<br /><a href="{text:link2url}">{text:link2}</a>{/block:iflink2}
{block:iflink3}<br /><a href="{text:link3url}">{text:link3}</a>{/block:iflink3}
{block:iflink4}<br /><a href="{text:link4url}">{text:link4}</a>{/block:iflink4}
</div>
{block:ifshowhoverhint}<div class="sug">(hover)</div>{/block:ifshowhoverhint}
<div class="title"><a href="/">{Title}</a></div>
<div class="title2">{text:title2}</div>

<!-- Or maybe here -->

</div>
Frederiek
Yes, it's Tumblr lingo. We'd need to see the rendered page, meaning the URL to your page.

Usually, Tumblr users can edit pages in a Tumblr editor and at that point the code looks more like HTML. The downside of that is that you need to copy&paste your changes (HTML/CSS) in every page you want to use that code.

Maybe a search for "how to add sidebar image tumblr" will point to a more global solution.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2017 Invision Power Services, Inc.