Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Tumblr help.

B

bluap84

macrumors 6502
Original poster
Feb 12, 2011
324
0
UK
Hi guys.

wondering if you could lend a hand with a tumblr page of mine....it has this code

PHP: 
<!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">

<!-- THEME BY NICK LOUI -->

<head>

<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}


<!-- DEFAULT VARIABLES (CAN BE EDITED IN THE 'APPEARANCE' TAB) -->

<meta name="color:Background" content="#F5F5F5"/>
<meta name="color:Title" content="#607890"/>
<meta name="color:Text" content="#505050"/>
<meta name="text:Text Size" content="11"/>
<meta name="font:Body" content="arial"/>

<meta name="color:Link" content="#666666"/>
<meta name="color:Link Hover" content="#ADADAD"/>


<style type="text/css">

body {
background-color:{color:Background};
background-image:url();
background-attachment: fixed;
color:{color:Text};
font-size:{text:Text Size}px;
line-height:15px;
font-family:{font:body};
}

a, a:visited, a:active {
color:{color:Link};
text-decoration: none;
}

a:hover {
color:{color:link hover};
text-decoration:none;
}

ol.notes {
padding: 0px;
margin: 25px 0px;
list-style-type: none;
border-bottom: dotted 1px {color:text};
}

ol.notes li.note {
border-top: dotted 1px {color:text};
padding: 10px;
}

ol.notes li.note img.avatar {
margin-right: 10px;
width: 20px;
height: 20px;
}

blockquote{padding:0px; padding-left:5px; margin:5px; border-left:1px dotted {color:text};}
blockquote img{display:block;}
blockquote p{padding:0px; margin:0px;}
blockquote blockquote{position:relative; left:-5px; margin-top:0px; margin-right:0px; padding-right:0px;}
a img{border:none;}

#content{
width:800px; 
padding:10px;
left:220px;
margin:auto;
}

#header{
height:150px;
width:800px;
left:200px;
padding:15px; 
font-color:{color:text};
background-color:#000;
margin:auto;
overflow:hidden;
color: #000;
background-image: url('http://static.tumblr.com/y3xb5n9/7iylo918p/skyline.jpg');
background-repeat: no-repeat;
}

#header a {color: #333;}
#header a:hover {color: #c0c0c0 !important; }


#post{
margin-bottom:15px;
padding:0;
background-color:#fafafa;
}

h1 {
font-size:16px;
font:{font:title};
color:{color:Title};
text-transform:none;
line-height:20px;
}



.h2 {
font-weight:normal;
font-size:11px;
font:{Font:Text};
color:{color:Text};
text-transform:uppercase;
background-color: transparent;
text-align: right;
padding:1px;
}


h3 {
margin-top:10px;
margin-bottom:10px;
font-size:28px;
font-weight:normal;
font:{font:title};
color:{color:Title};
text-transform:none;
line-height:28px;
}

h4 {
font-size:20px;
font:{font:title};
color:{color:Title};
text-transform:none;
line-height:20px;
}

.name {
font-size:40px;
font:{font:title};
text-transform:none;
line-height:25px;
text-align:left;
}


#credit{
padding-top:5px; 
text-align:center; 
width:500px;
margin-bottom: 10px;
}


img, a img, object, embed {
max-width:100% !important;
height: auto !important;
border: 0px !important;
margin: 0 auto;
}

.video {text-align: center; }
.video object, .video embed {width: 100% !important;min-height: 400px !important; }

.album-art {
float: left;
width: 100px;
height: 100px;
overflow: hidden;
margin-right: 10px;
}

.postinfo {opacity: 0;     -webkit-transition: opacity 300ms ease-in 200ms; 
    -moz-transition: opacity 300ms ease-in 200ms;
    -o-transition: opacity 300ms ease-in 200ms;
    transition: opacity 300ms ease-in 200ms;
}
#post:hover .postinfo {opacity: 1;
    -webkit-transition: opacity 300ms ease-in 200ms; 
    -moz-transition: opacity 300ms ease-in 200ms;
    -o-transition: opacity 300ms ease-in 200ms;
    transition: opacity 300ms ease-in 200ms;

}
#fancybox-title-main a {color: #fff !important; } 
{CustomCSS}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<!-- Start fancybox Javascript -->
<script type="text/javascript" src="http://static.tumblr.com/wsxi7t8/HP7l6pp2x/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/wsxi7t8/6H5l6pp22/jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/wsxi7t8/WTel6pp1n/jquery.fancybox-1.3.1.css" media="screen" />
<script type="text/javascript">
		$(document).ready(function() {
			/*
			*   image.
			*/

			$(".lightbox").fancybox({

			});

		});
</script>
<!-- End fancybox Javascript -->

</head>
<body>

<div id="header">
<div class="name">
<a href="/">{Title}</a>
</div><p>
<a href="/ask">ASK</a> |  {block:HasPages}{block:Pages} <a href="{URL}">{Label}</a> | {/block:Pages} {/block:HasPages}       {block:Description}<b>{Description}</b>{/block:Description}


</div>
</div>


<div id="content">
{block:Posts}


<div id="post">


{block:Text}
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
{Body}
{/block:Text}

{block:Photo}
<a href="{PhotoURL-HighRes}?.jpg" class="lightbox" title="<a href='{LinkURL}'>{PhotoAlt}</a>"><center><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/></center></a>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
{/block:Photo}

{block:Photoset}
    
    <!-- Each of the Photoset photos -->
    {block:Photos}
        
        {block:HighRes}
        <a href="{PhotoURL-HighRes}?.jpg" class="lightbox" title="<a href='{LinkURL}'>{PhotoAlt}</a>"><center><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/></center></a>
        {/block:HighRes}
        
        {Caption}
        
    {/block:Photos}
{/block:Photoset}

{block:Quote}
<h3>"{Quote}"</h3>
{block:Source}
-{Source}
{/block:Source}
{/block:Quote}

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

{block:Chat}
{block:Title}<h3><a href="{Permalink}">{Title}</a></h3>{/block:Title}
{block:Lines}
{block:Label}<b>{Label}</b>{/block:Label}
{Line}<br>
{/block:Lines}
{/block:Chat}

{block:Video}
<div class="video">{Video-500}</div>
{block:Caption}<div class="caption">
{Caption}</div>
{/block:Caption}
{/block:Video}


{block:Audio}<br/>
{block:AlbumArt}<div class="album-art"><img src="{AlbumArtURL}" height="90px"></div>{/block:AlbumArt}
{AudioPlayerGrey}
{block:Caption}<div class="caption">
{Caption}</div>
{/block:Caption}
{PlayCountWithLabel}<br><br>
{/block:Audio}

{block:Answer}
<b>{Asker} said:
{Question}</b><br><br>
{answer}
{/block:answer}

<div class="postinfo">
<div class="h2">
{block:NoteCount}{NoteCountWithLabel}</a> | <a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" target="_blank">Reblog</a>{/block:NoteCount}<br>
<a href="{Permalink}"> 
{TimeAgo}{/Block:NoteCount}</a>
</div>

{block:PermalinkPage}
<center>{Block:NoteCount}Posted on {Month} {DayOfMonth}{DayOfMonthSuffix} at {12Hour}:{Minutes} {CapitalAmPm}{/Block:NoteCount}
<br>
{block:HasTags} Tagged as: {block:Tags}<a href="{TagURL}">{Tag}. </a>{/block:Tags}<br> {/block:HasTags}
{block:RebloggedFrom}
Reblogged from: <a href="{ReblogParentURL}">{ReblogParentName}</a><br>
Originally posted by: <a href="{ReblogRootURL}">{ReblogRootName}</a> {/block:RebloggedFrom}
</center>
{block:PostNotes}{PostNotes}{/block:PostNotes}
{/block:PermalinkPage}

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



</div>

<div id="credit">
<font size="+1">
{block:PreviousPage}
<a href="{PreviousPage}">«</a>
{/block:PreviousPage}

{block:JumpPagination length="5"}
{block:CurrentPage}
{PageNumber}
{/block:CurrentPage}

{block:JumpPage}
<a href="{URL}">{PageNumber}</a>
{/block:JumpPage}
{/block:JumpPagination}

{block:NextPage}
<a href="{NextPage}">»</a>
{/block:NextPage}
{/block:Pagination}</center></font><br>


</div>


</body>
</html>
[/COLOR]


but when embedding Vimeo videos it doesnt embed them to the correct size. the code for the video is:

[COLOR="DeepSkyBlue"]<iframe src="http://player.vimeo.com/video/27098692?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>

you got any ideas? As the theme its self i can mod, but if i cant embed 800px wide videos id rather not bother
 
Last edited by a moderator:
BTW, wrong doctype.

Code: 
<!DOCTYPE html>

Replace line 1 with that.

and remove the xmlns attr from the html tag.

The actual page has a width of 500px set in css. It's not in the template you posted. If you view the source and look at line 34 you can see what I mean. If you can't edit that css (never messed with tumblr, don't know where something like that would be) then you can probably manipulate with js.

Inside your document.ready put:

Code: 
$('body').css({'width':'800px'});

*note that's slower than using CSS, but if you can't edit the original css then it's the next best thing.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back