The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Help a noob
Miso
post Jun 24 2016, 11:48 AM
Post #1





Group: Members
Posts: 1
Joined: 24-June 16
Member No.: 24,360



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 24 2016, 12:41 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jun 25 2016, 07:41 AM
Post #3


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 08:36 PM