The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> tumblr html help
oatmealonmyshoe
post Feb 14 2011, 09:06 PM
Post #1





Group: Members
Posts: 2
Joined: 14-February 11
Member No.: 13,872
hi everyone,

i know basic html and am trying to tweak the coding in a tumblr theme.

for some reason there's parts of the text (headings and body) that are bold, but i cant find anywhere in the code as to why that is.

i'm also struggling to find why the comments/notes link is orange and how i can change the date text to black.

and finally, how to change the date/comment/note header to a footer, so it appears at the bottom of a post as opposed to the top.

here's the code. any help would be great.
url is http://thegirlinblackblog.tumblr.com



<!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>
<title></title>


<meta name="color:Background" content="#FFFFFF"/>
<meta name="image:Background" content=""/>
<meta name="color:Title" content="#fff"/>
<meta name="color:Title Hover" content="#fff"/>
<meta name="color:Date" content="#000000"/>
<meta name="color:Date Hover" content="#fff"/>
<meta name="color:Date Background" content="#000"/>
<meta name="color:Description" content="#000"/>
<meta name="color:Sidebar Header" content="#000"/>
<meta name="color:Links" content="#C5C5C5"/>
<meta name="color:Links Hover" content="#000"/>
<meta name="color:Text Color" content="#222"/>
<meta name="color:Post Link Background" content="#222"/>
<meta name="color:Post Link" content="#fff"/>
<meta name="color:Post Link Hover" content="#F7C852"/>
<meta name="color:Conversation Background 1" content="#484857"/>
<meta name="color:Conversation Background 2" content="#2F2F3B"/>
<meta name="color:Comment" content="#FFFFFF"/>
<meta name="color:Comment Hover" content="#FFFFFF"/>





<!-- END DEFAULT COLORS -->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>{block:SearchPage}Search results for "{SearchQuery}" - {/block:SearchPage}{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" href="{RSS}" />


<style type="text/css">


body {
background: #FFFFFF;
margin: 30px 0px 0px 340px;
font: normal 9px/12px Georgia, serif;
color: #000000;
}

#container {
width: 650px;
height: 100%;
margin: 15px 0px 15px 0px;
padding: 10px;
background-color: #FFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

#header h1 {
font: normal 9px/12px Georgia, serif;
margin: 0px 0px -5px -230px;
}

#header h1 a:hover {
color: #FFFFFF;
}



#right {
position: absolute;
left: 895px;
font: normal 9px/12px Georgia, serif;
line-height: 15px;
width: 0px;
background-color: #fff;
padding: 0px;
color: #FFFFFF;
margin: 15px 0px 0px 0px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}



#left {
position: absolute;
left: 50px;
font: normal 9px/12px Georgia, serif;
line-height: 15px;
width: 250px;
background-color: #fff;
padding: 10px;
color: {color:Description};
margin: 15px 0px 0px 0px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

h1 {
color: #FFFFFF;
margin: 0px 0px 10px 0px;
font-weight: normal;
font-size: 40px;
letter-spacing: -1px;
}

h1 a {
color: #FFFFFF;
text-decoration: none;
}

#description {
color: #000000;
font-size: 9px;
line-height: 18px;
padding-right: 70px;
margin-bottom: 5px;
}

.date {
margin: 10px 0px 10px 0px;
padding: 5px 5px 5px 10px;
font: normal 9px/12px Georgia, serif;
color: #000000;
text-align: left;
letter-spacing: -0.1px;
text-transform: uppercase;
background: #FFFFFF};
}

.date a {
color: #000000;
text-decoration: none;
}

.date a:hover {
color: #AAAAAA;
text-decoration: none;
}

.sideheader {
margin: 20px 0px 15px 0px;
color: #000000;
font: normal 9px/12px Georgia, serif;
text-align: left;
letter-spacing: 0px;
text-transform: uppercase;
font-weight: none;
border-bottom: solid 1px #000000;
}


a {
text-decoration: none;
color: {color:Links};
}

a:hover {
color: {color:Links Hover};
text-decoration: none;
}


.post-footer p.reblogged {
font-size:10px;
color: {color:Text Color};
padding:5px 0;
}

.post-footer p.reblogged a {
text-decoration: none;
background-repeat: no-repeat;
background-position: center left;
padding: 2px 0 2px 18px;
}


div.post {
margin: 0px 10px 40px 10px;
position: relative;
}

div.post img.permalink {
border-width: 0px;
width: 23px;
height: 9px;
position: absolute;
top: 5px;
right: 5px;
display: none;
}

div.post:hover img.permalink {
display: block;
}


div.post h2 {
font: 18px {font:Body};
text-transform: uppercase;
letter-spacing: -1px;
margin: 0px 0px 10px 0px;
}

div.post h2 a {
color: "999";
text-decoration: none;
}

div.post h2 a:hover {
color: {color:Links Hover};
text-decoration: none;
}


/* Regular Post */

.post .regular {
font: normal 9px/12px Georgia, serif;
color: {color:Text Color};
line-height: 17px;
text-align: justify;
}

.post .regular img {
max-width: 100%;
}

.post .regular blockquote {
font-style: italic;
}

/* Photo Post */

div.post div.photo img {
border-width: 0px;
}

div.post div.photo div.caption {
font-size: 12px;
text-align: justify;
margin: 10px 0px 0px 0px;
color: {color:Text Color};
}

div.post div.photo div.caption a {
color: {color:Links};
}

div.post div.photo div.caption a:hover {
color: {color:Links Hover};
text-decoration: none;
}

/* Quote Post */

div.post div.quote {
padding: 0px 15px 0px 15px;

}

div.post div.quote span.quote {
font-size: 20px;
color: {color:Text Color};
line-height: 22px;
}

div.post div.quote div.source {
font-size: 13px;
text-align: right;
color: {color:Text Color};
}

div.post div.quote div.source a {
color: {color:Links};
}

div.post div.quote div.source a:hover {
color: {color:Links Hover};
}

/* Link Post */

div.post div.link {
color: #222;
margin-top: 15px;
font-size: 18px;
letter-spacing: -1px;
}

div.post div.link a.link {
margin-top: 10px;
color: {color:Post Link};
padding: 5px;
background: {color:Post Link Background};
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

div.post div.link a:hover.link {
color: {color:Post Link Hover};
}

div.post div.link div.description {
margin-top: 20px;
font-size: 12px;
letter-spacing: 0px;
line-height: 17px;
text-align: justify;
color: {color:Text Color};
}

.post .link span.description blockquote {
font-style: italic;
}

/* Conversation Post */

div.post div.conversation ul {
list-style-type: none;
margin: 0px;
padding: 0px 0px 0px 1px;
}

div.post div.conversation ul li {
font-size: 12px;
padding: 4px 0px 4px 8px;
color: #fff;
margin-bottom: 1px;
}

div.post div.conversation ul li span.label {
font-weight: none;
}
div.post div.conversation ul li.odd {
background-color: {color:Conversation Background 1};
}

div.post div.conversation ul li.even {
background-color: {color:Conversation Background 2};
}

/* Audio Post */

div.post div.audio div.caption {
margin: -60px 0px 0px 0px;
color: #222222;
font-size: 12px;
text-align: justify;
}

div.post div.audio div.caption a {
color: #6DA856;
}

div.post div.audio div.caption a:hover {
color: #F7C852;
}

#radio {
margin: auto;
padding: 86px 0px 0px 87px;
width: 310px;
height: 189px;
background: transparent url(http://static.tumblr.com/dbcxhwx/HhBke90up/3173070506_79130bdc2d_o.png) no-repeat;
}

/* Video Post */

div.post div.video div.caption {
margin: 10px 0px 0px 0px;
color: #222;
font-size: 12px;
text-align: justify;
}

div.post div.video div.caption a {
color: {color:Links};
}

div.post div.video div.caption a:hover {
color: {color:Links Hover};
}


#navigation {
font-size: 14px;
text-transform: uppercase;
color: {color:Text Color};
}

#navigation a {
color: {color:Links};
text-decoration: none;
}

#navigation a:hover {
color: {color:Links Hover};
text-decoration: none;
}

#credits {
margin-top: 11px;
font-size: 8px;
text-align: left;
letter-spacing: 1px;
color: {color:Text Color};
}

#credits a {
color: {color:Links};
}

#credits a:hover {
color: {color:Links Hover};
text-decoration: none;
}

#comment {
display: inline;
letter-spacing: normal;
font-size: 11px;
text-align: right;
margin: 0px 0px 0px 10px;
}

#comment a {
text-decoration: none;
color: {color:Comment};
}

#comment a:hover {
text-decoration: none;
color: {color:Comment Hover};
}

.following {
margin-top: 5px;
margin-bottom: 5px;

}

.following a img {
border: 1px solid {color:Flickr};
padding: 1px;
margin: 1px;
}

.following a img:hover {
border: 1px solid {color:Flickr Hover};
padding: 1px;
margin: 1px;
}

#twitter {
color: {color:Text Color};
font-family: 'Lucida Grande', Gill Sans MT, sans-serif;
font-size: 10px;
text-align: left;
width: 225px;
margin: 0px 0px 0px -35px;
padding: 0px 0px 0px 0px;
}

#twitter ul {
list-style-type:none;
}

#twitter li {
margin-bottom: 5px;
border-bottom: 1px dotted;
padding-bottom: 5px;
}

#twitter a {
color: {color:Links};
}

#flickr {
width:220px;
height:154px;
padding: 0px 0px 0px 0px;
margin: 10px 10px -40px 15px;
}

#flickr img {
float: left;
margin:0 5px 5px 0px;
background: white;
padding: 3px;
width: 50px;
height: 50px;
border: 1px solid {color:Flickr};
}

#flickr a img:hover {
border: 1px solid {color:Flickr Hover};
}

#tags {
float: right;
text-align: right;
color: {color:Text Color};
font-size: 10px;
margin: -25px 0px 30px 0px
}

ol.notes {
padding: 0px;
margin: 25px 0px;
list-style-type: none;
border-bottom: solid 1px #ccc;
}

ol.notes li.note {
border-top: solid 1px #ccc;
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: none;
}

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>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
</head>






<body>

<div id="header">
<h1><a href="/">{Title}</a></h1>
</div>


<!-- Left Sidebar -->

<div id="left">



<center>
<strong>
<a href="{RSS}">RSS</a> | <a href="/archive">Archive</a> | <a href="/random">Random</a>
</strong>
</center>



<!-- Description -->

<p class="sideheader"><strong>About</strong></p>

{block:Description}
{Description}
{/block:Description}



</div>






<!-- Right Sidebar -->


<div id="right">

<!-- Twitter -->

{block:IfTwitterUsername}
<p class="sideheader"><strong>Twittering</strong></p>

<div id="twitter">
<ul id="twitter_update_list"></ul>
</div>

{block:IfTwitterUsername}

<!-- Flickr -->
{block:IfFlickrUserID}

<p class="sideheader"><strong>
<font color="#0271ff">Flick</font><font color="#f30575">r</font>
</strong></p>



<div id="flickr">

<!-- Remove "FLICKR_USER_ID" and paste in your ID -->

<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=6&display=latest&size=s&layout=x&source=user&user={text:Flickr User ID}"></script>
</div>

{/block:IfFlickrUserID}



</div>





<!-- Permalink Dates -->


<div id="container">

{block:Posts}


{block:NewDayDate}
<div class="blogtitletwo">

</div>
<div class="date">
<a href="{Permalink}">{DayOfMonth} {Month}, {Year}</a>
<div id="comment">

<a href="{Permalink}#disqus_thread">Comments</a>
{block:NoteCount} | <a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}
</div>
</div>
{/block:NewDayDate}

{block:SameDayDate}
<div class="blogtitletwo">

</div>
<div class="date">
<a href="{Permalink}">posted: {12Hour}:{Minutes} {CapitalAmPm}</a>
<div id="comment">

<a href="{Permalink}#disqus_thread">Comments</a>
{block:NoteCount} | <a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}
</div>
</div>
{/block:SameDayDate}


<!-- Begin Tumblr Posts -->


<div class="post">

<!-- Text Posts -->


{block:Regular}
<div class="regular">
{block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
{Body}
</div>
{/block:Regular}


<!-- Photo Posts -->


{block:Photo}
<div class="photo">
<center>
{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}

</center>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Photo}


<!-- Quote Posts -->


{block:Quote}
<div class="quote">
<span class="quote">
<strong>“</strong> {Quote}
</span>
{block:Source}<div class="source">&mdash; {Source}</div>{/block:Source}
</div>
{/block:Quote}


<!-- Link Posts -->

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

<!-- Chat Posts -->

{block:Conversation}
<div class="conversation">
{block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
<ul>
{block:Lines}
<li class="{Alt}">
{block:Label}<span class="label">{Label}</span>{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
</div>
{/block:Conversation}


<!-- Audio Posts -->

{block:Audio}
<div class="audio">
<div id="radio">
{AudioPlayerBlack}
</div>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Audio}


<!-- Video Posts -->

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



<!-- Reblogging Information -->


<div class="post-footer">


{block:RebloggedFrom}

<p class="reblogged">
reblogged: <a href="{ReblogParentURL}" style="background-image: url({ReblogParentPortraitURL-16});">{ReblogParentName}</a></p>

{/block:RebloggedFrom}


<!-- Tagging Information -->

{block:HasTags}
<div id="tags">
Tags:
{block:Tags} <a href="{TagURL}">{Tag}</a> {/block:Tags}
</div>
{/block:HasTags}

</div>


{block:PostNotes}
{PostNotes}
{/block:PostNotes}


{/block:Posts}


{block:IfDisqusShortname}
{block:Permalink}
<div id="disqus">
<div id="disqus_thread"></div><script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"></script><noscript><a href="http://{text:Disqus Shortname}.disqus.com/?url=ref">View the discussion thread.</a></noscript>
</div>
{/block:Permalink}
<script type="text/javascript">
//<![CDATA[
(function() {
var links = document.getElementsByTagName('a');
var query = '?';
for(var i = 0; i < links.length; i++) {
if(links[i].href.indexOf('#disqus_thread') >= 0) {
query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
}
}
document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
})();
//]]>
</script>
{/block:IfDisqusShortname}




<!-- Page Navigation -->

<div id="navigation">
<p align="center">
{block:PreviousPage}
<a href="{PreviousPage}">&larr; previous</a>
{/block:PreviousPage}

{block:NextPage}
<a href="{NextPage}">next &rarr;</a>
{/block:NextPage}
</p>

</div>



{block:IfTwitterUsername}
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/{text:Twitter Username}.json?callback=twitterCallback2&count=3"></script>
{/block:IfTwitterUsername}

</body>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Feb 15 2011, 03:31 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
The page is mostly empty. There's hardly any heading or body text, which btw isn't bold. But the 9px font-size isn't suitable for body text. And I don't see any orange either.

As for the date, place the .date div after the .post div, or use the now empty .post-footer div.

The page has markup errors too, http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes , which, for as far as that's possible on tumblr, you should fix.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
monoclebunny
post Mar 1 2011, 06:05 PM
Post #3


Member
***

Group: Members
Posts: 35
Joined: 1-March 11
Member No.: 14,015
have a gander at the blocks tumblr use to layout its posts here

http://www.tumblr.com/docs/en/custom_themes#posts

The meta data at the top of your html are all the customisable elements. you should be able to change these via the appearance tab in customisation from the dashboard.

to have the date/comment/note appear at the bottom of the post the string of coding for those blocks needs to come just before the closing post block. {/block:Posts}

put a few fake posts up to test the text/ comments and dates a little better. You will be able to see more clearly where things will go.

This post has been edited by monoclebunny: Mar 1 2011, 06:06 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
oatmealonmyshoe
post Mar 1 2011, 06:31 PM
Post #4





Group: Members
Posts: 2
Joined: 14-February 11
Member No.: 13,872
thanks for that.

what about if i were to change the default width of a photo from 500 pixels to say 650?
i'vev trying changing it here -

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

but it does nothing. also adding in width="" does nothing either. it just turns the photo into a box with a question mark in it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
monoclebunny
post Mar 1 2011, 06:40 PM
Post #5


Member
***

Group: Members
Posts: 35
Joined: 1-March 11
Member No.: 14,015
Tumblr has set widths. You can only adjust it accordingly:

{PhotoURL-500}
{PhotoURL-400}
{PhotoURL-250}
{PhotoURL-100}
{PhotoURL-75sq}

You can provide links to show the photos in high-res if clicked on however

see 'ere > http://www.tumblr.com/docs/en/custom_themes#photo-posts

smile.gif

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · General Web Design · 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: 24th April 2024 - 06:27 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC