The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> tumblr: html coding help.
jasssy
post Nov 2 2011, 02:21 AM
Post #1





Group: Members
Posts: 2
Joined: 2-November 11
Member No.: 15,757
alrighty, so.
i'm not exactly sure what to call it...but i'd like to have an image on the bottom right-hand corner of my blog, kind of like this:
http://infinitewinds.tumblr.com/

here's the coding.
<!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">

<!--
obscure theme by arreter
coding for masonry by aiurare (smpldesign)
do not remove credit
-->


<meta name="color:text" content="#000">
<meta name="color:links" content="#000">
<meta name="color:nav links" content="#000">
<meta name="color:hover" content="#f8f8f8">
<meta name="color:background" content="#fff">
<meta name="color:center" content="#f8f8f8">
<meta name="color:nav background" content="#f8f8f8">

<meta name="if:enable background image"0" />
<meta name="if:show archive" content="1"/>
<meta name="if:show ask" content="1" />
<meta name="if:two columns" content="0" />

<meta name="image:Background" content="http://static.tumblr.com/..."/>

<meta name="font:title" content="Baskerville" />
<meta name="font:body" content="Baskerville" />
<meta name="font:nav" content="Baskerville" />

<meta name="text:title font size" content="12px" />
<meta name="text:font size" content="9px" />

<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link rel="shortcut icon" href="{Favicon}">
<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}


<style type="text/css">
body {width:470px; text-align:justify; font-family:{font:body}; font-size:{text:font size}; color:{color:text}; background-color:{color:background}; line-height:9px;}

.top {position:fixed; width:194px; top:10px;}
.topnav {position:fixed; width:190px; top:50px; text-align:right;}
.bottomnav {position:fixed; width:50px; bottom:10px; margin-left:144px;}

.tumblrAutoPager_page_info, .tumblrAutoPager_page_separator {display:none;}

a {text-decoration:none; -moz-transition: 0.3s ease-in; -webkit-transition: 0.3s ease-in; -o-transition: 0.3s ease-in; transition: 0.3s ease-in; color:{color:links};}
a:hover {color:{color:hover}; -moz-transition: 0.3s ease-in; -webkit-transition: 0.3s ease-in; -o-transition: 0.3s ease-in; transition: 0.3s ease-in;}
a img {border:0px;}

#infscr-loading {display:none;}

.blogtitle {margin-bottom: -4px; font-family: {font:Title}; padding-bottom:px; text-align:right; font-size:{text:title font size}; letter-spacing:px; text-transform:lowercase; font-style:italic; font-weight:bold;}

.description {text-align:right; margin-top:6px; line-height:9px;}

div.navlinks a {opacity: 0.2; margin-bottom:4px; text-align:right; font-family: {font:Nav}; padding-left:4px; position:relative; color:{color:Nav Links};}
div.navlinks a:hover {opacity: 0.8; text-align:right; padding-left:4px; color:{color:Hover};}

div.navlinksbottom a {background-color:{color:nav background}; display:block; margin-bottom:4px; text-align:right; font-family: {font:Nav}; padding-top:2px; padding-bottom:2px; position:relative; color:{color:Nav Links};}
div.navlinksbottom a:hover {display: block; text-align:right; padding-top:2px; padding-bottom:2px; color:{color:Hover};}

{block:iftwocolumns}
.center {height:100%; background-image:url({image:Background}); background-attachment:fixed; background-repeat:repeat; background-color:{color:center}; width:270px; margin-left:400px; left:10px;}

.text, .quote, .answer, .chat, .link{{block:IndexPage}width:220px;{/block:IndexPage}{block:PermalinkPage}width:470px;{/block:PermalinkPage} background-color:{color:center};}

.body img {{block:IndexPage}max-width:220px;{/block:IndexPage}{block:PermalinkPage}max-width:470px;{/block:PermalinkPage}}

.wrap {width:470px; height:100%;}

.posts {height:100%; padding-bottom:200px; padding-top:100px; margin-top:-110px; float:right; width:470px; {block:ifenablebackgroundimage}background-image:url({image:Background}); background-attachment:fixed; background-repeat:repeat;{/block:ifenablebackgroundimage}background-color:{color:center};}
.post {{block:IndexPage}width:220px;{/block:IndexPage}{block:PermalinkPage} width:460px{/block:PermalinkPage} background:{color:posts}; float:left; {block:IndexPage}margin: 10px 0px 0px 10px;{/block:IndexPage} position: relative; {block:ifenablebackgroundimage}background:rgba(255,255,255, .70);{/block:ifenablebackgroundimage}}
.photo {background:{color:center};}
.photo img {{block:IndexPage}width:220px;{/block:IndexPage}{block:PermalinkPage}width:400px{/block:PermalinkPage} margin:auto; margin-bottom:-2px;}
.index_caption {padding:5px 20px; text-align:left;}
.index_caption img{width:220px;}
.caption img {width:460px;}

div.video embed,
div.post div.video object {{block:IndexPage}width:220px; height:200px;{/block:IndexPage}{block:PermalinkPage}width:580px; height:500px;{/block:PermalinkPage} margin-bottom:10px;}

.player {background:#000; margin:10px 0 10px 0; width:220px;}
{/block:iftwocolumns}

{block:ifnottwocolumns}
.center {height:100%; background-color:{color:center}; width:270px; margin-left:210px; left:10px;}

.text, .quote, .answer, .chat, .link{{block:IndexPage}width:252px;{/block:IndexPage}{block:PermalinkPage}width:272px;{/block:PermalinkPage} background-color:{color:center}; padding:4px;}

.body img {{block:IndexPage}max-width:260px;{/block:IndexPage}{block:PermalinkPage}max-width:280px;{/block:PermalinkPage}}

.wrap {width:280px; height:100%;}

.posts {height:100%; padding-top:100px; margin-top:-110px; float:right; width:280px; {block:ifenablebackgroundimage}background-image:url({image:Background}); background-attachment:fixed; background-repeat:repeat;{/block:ifenablebackgroundimage}background-color:{color:center};}
.post {{block:IndexPage}width:252px;{/block:IndexPage}{block:PermalinkPage} width:460px{/block:PermalinkPage} background:{color:posts}; float:left; {block:IndexPage}margin: 10px 0px 0px 10px;{/block:IndexPage} position: relative; {block:ifenablebackgroundimage}background:rgba(255,255,255, .70);{/block:ifenablebackgroundimage}}
.photo {background:{color:posts};}
.photo img {{block:IndexPage}width:260px;{/block:IndexPage}{block:PermalinkPage}width:400px{/block:PermalinkPage} margin:auto;}
.index_caption {padding:5px 20px; text-align:left;}
.index_caption img{width:260px;}
.caption img {width:260px;}

div.video embed,
div.post div.video object {{block:IndexPage}width:252px; height:200px;{/block:IndexPage}{block:PermalinkPage}width:580px; height:500px;{/block:PermalinkPage} margin-bottom:10px;}

.player {background:#000; margin:10px 0 10px 0; width:252px;}
{/block:ifnottwocolumns}

.navigation {display:none;}

.title {font-family:times new roman; font-style:italic; font-size:10px; line-height:9px; color:{color:Links};}

.perma {margin-top:10px; text-align:center; opacity:0.8;}
.perma a {opacity:0.5;}

.permalink {float: left;{block:IndexPage}margin-left:266px;{/block:IndexPage}{block:PermalinkPage}margin-left:276px;{/block:PermalinkPage} margin-top:0px; padding:4px; position: absolute; text-align: left; width: 23px; height:12px; font-size: 9px; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity:0; background-color:{color:center};}
.permalink a {color:{color:permalink}; }
.permalink a:hover {color:{color:permalink};}
.post:hover .permalink {opacity: 1; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}

div#pagination {position:absolute; bottom:20px; text-align:center; padding:10px; height:15px; font-size:13px;}

{CustomCSS}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".tags").hide();
//toggle the componenet with class msg_body
jQuery(".categories").click(function()
{
jQuery(this).next(".tags").slideToggle(500);
});});
</script>

<script type="text/javascript">
$(document).ready(function()
{
$( '.wrap' ).fadeIn("slow");
});
</script>



<script type='text/javascript' src='http://static.tumblr.com/d0qlne1/DiAl6ekb7/jquery-1.4.2.min.js'></script>

<!-- {block:IndexPage} -->
<script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>
<script src="http://static.tumblr.com/twte3d7/qNulm663d/infinite.js"></script>

<script type="text/javascript">
$(window).load(function () {
$('.posts').masonry(),
$('.masonryWrap').infinitescroll({
navSelector : "div.navigation",
// selector for the paged navigation (it will be hidden)
nextSelector : ".navigation a#next",
// selector for the NEXT link (to page 2)
itemSelector : ".post",
// selector for all items you'll retrieve
bufferPx : 10000,
extraScrollPx: 10000,
loadingImg : "http://static.tumblr.com/ry7nsix/S4Klhms7s/load.gif",
loadingText : "<em></em>",
},
// call masonry as a callback.
function() { $('.posts').masonry({ appendedContent: $(this) }); }
);
});
</script>
<!-- {/block:IndexPage} -->

</head>
<body>


<div class="wrap">
<div class="navigation">
<!--{block:Pagination}-->
<!--{block:NextPage}--><p id="page_nav"><a style="float:right" href="{NextPage}" id="next">Older ?</a><!--{/block:NextPage}-->
<!--{block:PreviousPage}--><a style="float:left" href="{PreviousPage}">? Newer</a></p><!--{/block:PreviousPage}-->
<!--{/block:Pagination}-->
</div>

<div class="top"><div class="blogtitle"><a href="/">{Title}</a></div><i>{block:Description}<div class="description">{Description}</div>{/block:Description}</i></div>

<div class="bottomnav"><div class="navlinksbottom"><i><div align="right"><a href="/">home</a>{block:ifshowask}<a href="/ask">message</a>{/block:ifshowask}{block:ifshowarchive}<a href="/archive">archive</a>{/block:ifshowarchive}{block:HasPages}{block:Pages}<a href="{URL}">{Label} </a>{/block:Pages}{/block:HasPages}</i></div></div>
</div></div>

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

{block:Text}
<div class="post text">
{block:ifnottwocolumns}<span class="permalink"><a href="{Permalink}"><i>{24Hour}:{Minutes}</i></a></span>{/block:ifnottwocolumns}
{block:iftwocolumns}<div style="padding:6px;">{block:Title}<div class="title"><b>{Title}</b></div>{/block:Title}
<div style="margin-top:-5px;"><i>{Body}</i></div></div>{/block:iftwocolumns}
{block:ifnottwocolumns}<div style="padding:px;">{block:Title}<div class="title"><b>{Title}</b></div>{/block:Title}
<div style="margin-top:-5px;"><i>{Body}</i></div></div>{/block:ifnottwocolumns}
{block:iftwocolumns}<a href="{Permalink}"><div align="right"><font color="#888"><i>Posted: {Month} {DayOfMonth}{DayOfMonthSuffix}</div></font></i></a>{/block:iftwocolumns}
{block:PermalinkPage}{block:Date}<div style=" color:#444; background:{color:center};">{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{block:NoteCount}<div style="float:right"><b>{NoteCountWithLabel}</b></div>{/block:NoteCount} {block:Date}<b>{DayOfMonth} {Month} {Year}</b>{/block:Date} {block:HasTags}<font color="#888">Filed under</font> {block:Tags}<a href="{TagURL}">{Tag}</a><font color="#888">,</font> {/block:Tags}{/block:HasTags}</div>{/block:Date}
{/block:PermalinkPage}
</div>
{/block:Text}

{block:Photo}<div class="post photo">
{block:IndexPage}<a href="{Permalink}">{/block:IndexPage}
{block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}
{block:iftwocolumns}<img src="{block:IndexPage}{PhotoURL-500}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}" alt="{PhotoAlt}"width="470"/>{/block:iftwocolumns}
{block:ifnottwocolumns}<img src="{block:IndexPage}{PhotoURL-500}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}" alt="{PhotoAlt}"width="280"/>{/block:ifnottwocolumns}
{block:IndexPage}</a>{/block:IndexPage}
{block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}
{block:PermalinkPage}{block:Date}<div style="padding:px; color:#444; background-color:{color:center};" width:460px;>
{block:NoteCount}<div style="float:right"><b>{NoteCountWithLabel}</b></div>{/block:NoteCount} {block:Date}<b>{DayOfMonth} {Month} {Year}</b>{/block:Date} {block:HasTags}<font color="#888">Filed under</font> {block:Tags}<a href="{TagURL}">{Tag}</a><font color="#888">,</font> {/block:Tags}{/block:HasTags}</div>{/block:Date}
{/block:PermalinkPage}
</div>
{/block:Photo}

{block:Photoset}
<div class="post">
{Photoset-500}</div>
{/block:Photoset}

{block:Quote}<div class="post quote">
{block:ifnottwocolumns}<span class="permalink"><a href="{Permalink}"><i>{24Hour}:{Minutes}</i></a></span>{/block:ifnottwocolumns}
{block:iftwocolumns}<a href="{Permalink}"><div id="entry">
<div style="padding:4px;">"<i>{Quote}</i>"
{block:Source}<i>written by</i> <b>{Source}</b>{/block:Source}</div>
</div></a>{/block:iftwocolumns}
{block:ifnottwocolumns}<div id="entry">
"<i>{Quote}</i>"
{block:Source}<i>written by</i> <b>{Source}</b>{/block:Source}
</div>{/block:ifnottwocolumns}
{block:PermalinkPage}{block:Date}<div style=" color:#444; background:{color:center};">{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{block:NoteCount}<div style="float:right"><b>{NoteCountWithLabel}</b></div>{/block:NoteCount} {block:Date}<b>{DayOfMonth} {Month} {Year}</b>{/block:Date} {block:HasTags}<font color="#888">Filed under</font> {block:Tags}<a href="{TagURL}">{Tag}</a><font color="#888">,</font> {/block:Tags}{/block:HasTags}</div>{/block:Date}
{/block:PermalinkPage}</div>
{/block:Quote}

{block:Link}<div class="post link">
{block:ifnottwocolumns}<span class="permalink"><a href="{Permalink}"><i>{24Hour}:{Minutes}</i></a></span>{/block:ifnottwocolumns}
{block:iftwocolumns}<div style="padding:4px;"><div class="title"><a href="{URL}">{Name}</a></div>{block:Description}<i>{Description}</i>
{/block:Description}</div>{/block:iftwocolumns}
{block:ifnottwocolumns}<div class="title"><a href="{URL}">{Name}</a></div>{block:Description}<i>{Description}</i>
{/block:Description}{/block:ifnottwocolumns}
{block:IndexPage}{block:iftwocolumns}<a href="{Permalink}"><div align="right"><font color="#888"><i>Posted: {Month} {DayOfMonth}{DayOfMonthSuffix}</div></font></i></a>{/block:iftwocolumns}{/block:IndexPage}
{block:PermalinkPage}{block:Date}<div style=" color:#444; background:{color:center};">{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{block:NoteCount}<div style="float:right"><b>{NoteCountWithLabel}</b></div>{/block:NoteCount} {block:Date}<b>{DayOfMonth} {Month} {Year}</b>{/block:Date} {block:HasTags}<font color="#888">Filed under</font> {block:Tags}<a href="{TagURL}">{Tag}</a><font color="#888">,</font> {/block:Tags}{/block:HasTags}</div>{/block:Date}
{/block:PermalinkPage}</div>
{/block:Link}

{block:Chat}<div class="post chat">
{block:ifnottwocolumns}<span class="permalink"><a href="{Permalink}"><i>{24Hour}:{Minutes}</i></a></span>{/block:ifnottwocolumns}
{block:iftwocolumns}<div style="padding:4px;">{block:Title}<h2>{Title}</h2>{/block:Title}
{block:Lines}{block:Label}<b>{Label}</b> {Line}<br>{/block:Label}{/block:Lines}</div>{/block:iftwocolumns}
{block:ifnottwocolumns}{block:Title}<h2>{Title}</h2>{/block:Title}
{block:Lines}{block:Label}<b>{Label}</b> {Line}<br>{/block:Label}{/block:Lines}{/block:ifnottwocolumns}
{block:IndexPage}{block:iftwocolumns}<a href="{Permalink}"><div align="right"><font color="#888"><i>Posted: {Month} {DayOfMonth}{DayOfMonthSuffix}</div></font></i></a>{/block:iftwocolumns}{/block:IndexPage}
{block:PermalinkPage}{block:Date}<div style=" color:#444; background:{color:center};">{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{block:NoteCount}<div style="float:right"><b>{NoteCountWithLabel}</b></div>{/block:NoteCount} {block:Date}<b>{DayOfMonth} {Month} {Year}</b>{/block:Date} {block:HasTags}<font color="#888">Filed under</font> {block:Tags}<a href="{TagURL}">{Tag}</a><font color="#888">,</font> {/block:Tags}{/block:HasTags}</div>{/block:Date}
{/block:PermalinkPage}</div>
{/block:Chat}

{block:Audio}
<div class="post text">
{block:ifnottwocolumns}<span class="permalink"><a href="{Permalink}"><i>{24Hour}:{Minutes}</i></a></span>{/block:ifnottwocolumns}
<div class="player">{AudioPlayerBlack}</div>
{block:IndexPage}{block:Caption}{Caption}{/block:Caption}{/block:IndexPage}
{block:IndexPage}{block:iftwocolumns}<a href="{Permalink}"><div align="right"><font color="#888"><i>Posted: {Month} {DayOfMonth}{DayOfMonthSuffix}</div></font></i></a>{/block:iftwocolumns}{/block:IndexPage}
{block:PermalinkPage}{block:Date}<div style=" color:#444; background:{color:center};">{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{block:NoteCount}<div style="float:right"><b>{NoteCountWithLabel}</b></div>{/block:NoteCount} {block:Date}<b>{DayOfMonth} {Month} {Year}</b>{/block:Date} {block:HasTags}<font color="#888">Filed under</font> {block:Tags}<a href="{TagURL}">{Tag}</a><font color="#888">,</font> {/block:Tags}{/block:HasTags}</div>{/block:Date}
{/block:PermalinkPage}</div>
{/block:Audio}

{block:Answer}<div class="post answer">
{block:ifnottwocolumns}<span class="permalink"><a href="{Permalink}"><i>{24Hour}:{Minutes}</i></a></span>{/block:ifnottwocolumns}
<i><b>{Question}</b></i> <i>asked by</i> <b>{Asker}</b>
<div class="body"><i>{Answer}</i></div>
{block:IndexPage}<div align="right">{block:iftwocolumns}<a href="{Permalink}"><div align="right"><font color="#888"><i>Posted: {Month} {DayOfMonth}{DayOfMonthSuffix}</div></font></i></a>{/block:iftwocolumns}</div>{/block:IndexPage}
{block:PermalinkPage}{block:Date}<div style=" color:#444; background:{color:center};">{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{block:NoteCount}<div style="float:right"><b>{NoteCountWithLabel}</b></div>{/block:NoteCount} {block:Date}<b>{DayOfMonth} {Month} {Year}</b>{/block:Date} {block:HasTags}<font color="#888">Filed under</font> {block:Tags}<a href="{TagURL}">{Tag}</a><font color="#888">,</font> {/block:Tags}{/block:HasTags}</div>{/block:Date}
{/block:PermalinkPage}</div>
{/block:answer}

{block:Video}<div class="post text">
<div class="video">
{Video-500}
</div>
{block:IndexPage}{block:iftwocolumns}<a href="{Permalink}"><div align="right"><font color="#888"><i>Posted: {Month} {DayOfMonth}{DayOfMonthSuffix}</div></font></i></a>{/block:iftwocolumns}{/block:IndexPage}
{block:PermalinkPage}{block:Date}<div style=" color:#444; background:{color:center};">{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{block:NoteCount}<div style="float:right"><b>{NoteCountWithLabel}</b></div>{/block:NoteCount} {block:Date}<b>{DayOfMonth} {Month} {Year}</b>{/block:Date} {block:HasTags}<font color="#888">Filed under</font> {block:Tags}<a href="{TagURL}">{Tag}</a><font color="#888">,</font> {/block:Tags}{/block:HasTags}</div>{/block:Date}
{/block:PermalinkPage}</div>
{/block:Video}
{/block:Posts}
</div>
</div>
</div>

<div style="font-color:#000; font-style:italic; opacity:0.5; right:3px; position:fixed; bottom:3px;"><a href="http://arreter.tumblr.com">theme</a></div>

</body>
</html>



if you could help, i'd really appreciate it! thanks smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Nov 2 2011, 11:55 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
There's already something similar (for a link) in the code you posted:
CODE
<div style="font-color:#000; font-style:italic; opacity:0.5; right:3px; position:fixed; bottom:3px;"><a href="http://arreter.tumblr.com">theme</a></div>

You can do that for an image too.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jasssy
post Nov 2 2011, 01:40 PM
Post #3





Group: Members
Posts: 2
Joined: 2-November 11
Member No.: 15,757
so where it says <a href="http://arreter.tumblr.com">, i'll put the image url?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Nov 2 2011, 02:45 PM
Post #4


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
Please see the FAQ entry How do I link an image to something?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Web Site Functionality · Next Newest »
 

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

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 23rd April 2024 - 08:22 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC