The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Tumblr layout HTML help.
bpatty
post Jan 19 2011, 06:00 PM
Post #1





Group: Members
Posts: 2
Joined: 19-January 11
Member No.: 13,637



Heyy, so i tried to combine two different layouts on tumblr to get it to my liking but there is one step that i am stuck at.

This is what i want my tumblr to look like:
I cant figure out how to put the box only around the posts so that the date and time show up on the other background

IPB Image

heres what it looks like now:
IPB Image
im good with the sidebar on the right and everything on this layout, i just need help to figure out how to put the box only up to the end of the post, to where it looks like the picture has some sort of border.

the link to the page: http://glitterrintheair.tumblr.com/
if any one can help it would be greatly appreciated! Thanks!!!!

so trying to combine two layouts i got a confusion of codes.
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">

<!--XOXO THEME BY HEARTGRENADE.TUMBLR.COM-->

<head>
<script type="text/javascript" src="http://proto.jp/js/tumblrAutoPager.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://www.youlovethispage.com/scrolltopcontrol.js"></script>

<center><title>{TITLE}</title></center>

<!-- DEFAULT VARIABLES -->

<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="#EFA798"/>
<meta name="color:Posts" content="#FFFFFF"/>
<meta name="color:Heart" content="#E7A097"/>
<meta name="color:Title" content="#B3B1B1"/>
<meta name="color:Name" content="#B3B1B1"/>
<meta name="color:Text" content="#949191"/>
<meta name="font:Body" content="arial"/>

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

<meta name="if:Enable Image Opacity" content="1"/>
<meta name="image:Background" content=""/>
<meta name="image:Background" content=""/>
<meta name="text:Background Image Position" content="none"/>
<meta name="if:Background Image Not Repeat" content="0"/>
<meta name="if:Background Image Fixed" content="1"/>

<meta name="text:Link 1 Name" content=""/>
<meta name="text:Link 1 URL" content=""/>

<meta name="text:Link 2 Name" content=""/>
<meta name="text:Link 2 URL" content=""/>

<meta name="text:Link 3 Name" content=""/>
<meta name="text:Link 3 URL" content=""/>

<meta name="text:Link 4 Name" content=""/>
<meta name="text:Link 4 URL" content=""/>

<meta name="text:Link 5 Name" content=""/>
<meta name="text:Link 5 URL" content=""/>

<style type="text/css">

body {
background-color:{color:Background};
background-image:url({image:Background});
background-position:{text:Background Image Position};
{block:IfBackgroundImageNotRepeat}background-repeat:no-repeat;{/block:IfBackgroundImageNotRepeat}
{block:IfBackgroundImageFixed}background-attachment: fixed;{/block:IfBackgroundImageFixed}
color:{color:Text};
font-size:11px;

line-height:15px;
font-family:{font:body};
}

a, a:visited, a:active {
color:{color:Link};
text-decoration: none;
-webkit-transition-duration: 0.4s;
}
#navigation {
margin: 0;
padding: 0;
list-style-type: none;
line-height: 14px;

text-transform: uppercase;
font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
letter-spacing: 2px;
}

#navigation li {
margin-bottom: -9px;
}

#navigation a {
background: #E7D2C2;
color: #8A7B6A;
display: block;
width: 250px;
}

#navigation a:hover {
background: #FAEFE4;
color: #E7D2C2;
text-decoration: none;
}

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

blockquote{padding:0px; padding-left:5px; margin:5px; border-left:1px solid {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{
background-color:{color:Posts};
position:absolute;
top:0px;
width:520px;
left:272px;
margin:auto;
border: 1px solid #FFFFFF;
padding:10px;
}
#box{
overflow:hidden;
background-color:#FAEFE4;
padding:3px;
padding-left:5px;
padding-right:5px;
padding-top:5px;
padding-bottom:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
#sidebar{
background-color:{color:Posts};
top:0px;
width:200px;
height:100%;
position:fixed;
font-color:{color:text};
right:250px;
margin-left:auto;
padding-top:10px;
padding-right:10px;
padding-left:10px;
overflow:hidden;
border: 1px solid #ffffff;
border-left: 1px solid #ffffff;
text-align:right;
{block:ifNotHeaderImage}top: 25px;{/block:ifNotHeaderImage}
{block:ifHeaderImage}top: 110px;{/block:ifHeaderImage}
}
img, a img {
max-width:500px !important;
border: 0px !important;
}
#post{
margin-bottom:5px;
}

h1 {
font-size:24px;
font-weight:normal;
font:{font:title};
color:#A3A3A3;
text-transform:lowercase;
line-height:20px;
letter-spacing:-2px;
}


.h2 {
font:{Font:Text} 8pt;
color:{color:Text};
text-transform:uppercase;
background-color: transparent;
text-align: right;
padding:1px;
border-bottom:1px solid #ffffff;
}


h3 {
font-size:28px;
font-weight:normal;
font:{font:title};
color:{color:Title};
text-transform:lowercase;
line-height:20px;
letter-spacing:-2px;
}

h4 {
font-size:30px;
font:{font:title};
color:{color:Title};
text-transform:lowercase;
line-height:20px;
letter-spacing:-2px;
font-weight:normal;
}

.name {
color:{color:Name};
font-size:28px;
font:{font:title};
text-transform:lowercase;
line-height:25px;
letter-spacing:-2px;
font-weight:normal;
}


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


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

img {
{block:IfEnableImageOpacity}
opacity: 0.8; filter:alpha(opacity=85);
{/block:IfEnableImageOpacity}
-webkit-transition-duration: 0.8s;
}

img:hover {
{block:IfEnableImageOpacity}
opacity:1; filter:alpha(opacity=99);
{/block:IfEnableImageOpacity}
}

img, a img {
max-width:580px !important;
border: 0px !important;
}

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

<div id="sidebar">
<center><div class="name">
<font color="{color:Heart}">♥</font> {Title}
</div></center>

<br>


{block:Description}{Description}{/block:Description}
<br><br>
<div class="name">

</div>

<h1>
{block:IfLink1Name}<a href="{text:link 1 url}">{text:link 1 name}</A>{/block:IfLink1Name}<br>
{block:IfLink2Name}<a href="{text:link 2 url}">{text:link 2 name}</A>{/block:IfLink2Name}<br>
{block:IfLink3Name}<a href="{text:link 3 url}">{text:link 3 name}</A>{/block:IfLink3Name}<br>
{block:IfLink4Name}<a href="{text:link 4 url}">{text:link 4 name}</A>{/block:IfLink4Name}<br>
{block:IfLink5Name}<a href="{text:link 5 url}">{text:link 5 name}</A>{/block:IfLink5Name}
</h1>
</div>



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

<div id="box">


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

{block:Photo}
{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}
{block:Caption}
{Caption}
{/block:Caption}
{/block:Photo}

{block:Photoset}
<center>{Photoset-500}</center>
{block:Caption}
{Caption}
{/block:Caption}
{/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}
<center>{Video-500}</center>
{block:Caption}
{Caption}
{/block:Caption}
{/block:Video}


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

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

<div class="h2">
<center><a href="{Permalink}">
{MonthNumber}/{DayOfMonth}/{Year}at {12Hour}:{Minutes} {CapitalAmPm}</a>
─ <img src="http://i52.tinypic.com/1zeeheb.jpg">{NoteCountWithLabel}
<a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" target="_blank">                     Reblog this post</a></center></div>

{block:PermalinkPage}

<center>{block:NoteCount}{NoteCountWithLabel}<br>{/block:NoteCount}
{Month} {DayOfMonth}{DayOfMonthSuffix} at {12Hour}:{Minutes} {CapitalAmPm}<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>
{/block:Posts}



</div>
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 22nd December 2014 - 09:15 AM