Log In · Register

 
 
 Closed TopicStart new topic
help me build this blog.
shawtiegotem
post Nov 5 2009, 03:58 AM
Post #1


Senior Member
****

Group: Member
Posts: 214
Joined: Aug 2009
Member No: 742,635
So i want to make my own tumblr custom theme, based on this theme

http://simpletumblrtheme.tumblr.com/

but more: boarders, 2 tables on the side,
and the title on top/ or a banner,
also customizing the posts a little bit.
and aligned to the center, with smaller width

i know how to position, just not a whole lot of coding.
and since this isn't like myspace, i need help.

well, i know some people don't have a tumblr,
so i'll post the theme code here so you can reconize
it:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<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>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}

<link rel="shortcut icon" href="{Favicon}"/>
<link rel="alternate" type="application/rss+xml" href="{RSS}"/>

<meta name="color:Background" content="#fff"/>
<meta name="color:Link" content="#333">
<meta name="color:Link hover" content="#ff0000">
<meta name="color:Post info" content="#ccc">
<meta name="color:Post info link hover" content="#444">

<meta name="font:Body" content="Helvetica"/>
<meta name="font:Title" content="Georgia"/>

<meta name="image:Background" content=""/>


<style type="text/css">


/*----------------------
General Stylings
-----------------------*/

* { margin: 0; padding: 0; }

a { color: {color:Link}; }

a:hover { color: {color:Link hover}; }

p { padding-bottom: 10px; }

img { border: 1px solid; }

body {
background-color: {color:Background};
background: url({image:Background}) top left fixed;
font: 13px/140% {font:Body};
}

h4 {
font-size: 10px;
}

ul {
margin-left: 25px;
margin-bottom: 15px;
}

/*----------------------
Header and Description
----------------------*/

#header {
position: absolute;
width: 230px;
top: 0;
left: 0;
border-top: 1px solid #eee;
padding-left: 10px;
margin: 20px 10px;
font-size: 11px;
}

#portrait {
padding: 1px;
border: 1px solid #eee;
margin: 10px 0;
}


#header h1 {
font-family: {font:Title};
font-weight: bold;
font-size: 17px;
margin: 10px 0;
padding-right: 10px;
}

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

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

#description {
padding-right: 25px;
}

/*----------------------
Content
----------------------*/

#content {
width: 600px;
margin-left: 250px;
border-left: 1px solid #eee;
}

.post-header {
padding: 15px 0 5px 20px ;
margin: 10px 0 10px -20px;
border-top: 1px solid #eee;
text-transform: uppercase;
color: {color:PostInfo};
font-size: 10px;
}

.post-header a {
color: {color:PostInfo;};
}


.post-header a:hover { color: {color:PostInfoHover}; }


.post {
margin: 20px 0 40px;
padding-left: 20px;
}

.caption { padding: 10px 0; }


/* Reblogging */

blockquote {
color: #666;
border-left: 3px double #eee;
padding: 5px 10px;
margin-left: 15px;
margin-bottom: 10px;
}

.was-reblogged {
margin-top: 10px;
color: #ccc;
text-transform: uppercase;
font-size: 10px;
}

.was-reblogged a { color: #ccc; }

.was-reblogged a:hover { color: #eee; }

/* Chat */

.chat h3 { margin-bottom: 10px; }

.conversation {
list-style: none;
border: 1px solid #eee;
border-bottom: none;
}

.conversation li {
font-size: 11px;
font-style: italic;
padding: 6px 10px 6px 10px;
}

.odd {
background: #fff;
border-bottom: 1px solid #eee;
}

.even {
background: #fafafa;
border-bottom: 1px solid #eee;
}

.person {
font-weight: bold;
}

/* Link */

.link h3 {
font-size: 140%;
padding: 20px 0;
font-weight: normal;
line-height: 160%;
}

.link h3 a {
color: #333;
text-decoration: none;
border-bottom: 1px dotted;
}

.link h3 a:hover { color: red; }

/* Quote */

.quote blockquote {
font-size: 180%;
font-weight: normal;
padding: 20px 0;
color: #333;
line-height: 30px;
border: none;
margin: 0;
}

.quote .source {
font-size: 12px;
font-style: italic;
}

/* Quote */

.photo img {
padding: 2px;
max-width: 100%;
border: 1px solid #ccc;
}

/* Text */

.text h3 {
font-size: 15px;
margin-bottom: 5px;
}

.text img {
max-width: 100%;
}

.previous-next {
padding-left: 10px;
padding-top: 10px;
text-transform: uppercase;
font-size: 11px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}

.previous-next a {
color: #666;
text-decoration: none;
}


.previous-next a:hover { color: red; }

.previous { padding: 0 10px; }

.next { padding: 0 10px; }

#pages {
text-transform: uppercase;
color: #ccc;
}

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: bold;
}

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



/*----------------------
Footer
----------------------*/

body#permalink #footer { display: none; }

#footer {
width: 580px;
text-align: left;
margin: 30px 0 0 250px;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
padding: 0px 0 10px 20px;
font-size: 10px;
}

#footer h4 {
font-size: 13px;
color: #666;
font-weight: normal;
text-transform: uppercase;
padding: 20px 0 2px 0;
}

#links { list-style: none; }

#links a { color: #ccc; }

.followed { list-style: none; }

.followed li { display: inline; }

.followed img { border: 1px solid #ccc; padding: 1px;}

.please_dont_hide_this { color: #666; }

.please_dont_hide_this a { color: #666; }

/* that's all folks */

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

<!-- this will block the footer from showing up in permalink posts, via numblr -->

<body{block:Permalink} id="permalink"{/block:Permalink}>

<div id="contain">

<div id="header">
<h1><a href="/"><img id="portrait" src="{PortraitURL-64}" alt="User Portrait"/></a><br />
<a href="/">{Title}</a></h1>
<div id="description">{Description}</div>
</div>

<div id="content">
<!-- Loops for each post-type -->
{block:Posts}
<div class="post {TagsAsClasses}">
<div class="post-header">
{block:NewDayDate}
<h4 class="newdate">
<span class="day">{DayOfWeek}</span>
<span class="date">{Month} {DayOfMonthWithZero}, {Year}</span>
<span class="time">at {24Hour}:{Minutes}</span>
</h4>
{/block:NewDayDate}
{block:SameDayDate}
<h4 class="samedate">
<span class="day">{DayOfWeek}</span>
<span class="date">{Month} {DayOfMonthWithZero}, {Year}</span>
<span class="time">at {24Hour}:{Minutes}</span>
</h4>
{/block:SameDayDate}
{block:NoteCount} <a class="notes" href="{Permalink}">{NoteCountWithLabel}</a> {/block:NoteCount}
{block:Text}
<p class="post-metadata">
<span class="post-type">Text</span>
<a href="{Permalink}" class="permalink">Permalink ∞</a>
</p>
</div> <!-- end post-header -->

<div class="text">
{block:Title}<h3>{Title}</h3>{/block:Title}
{Body}
</div>
{/block:Text}

{block:Quote}
<p class="post-metadata">
<span class="post-type">Quote</span>
<a href="{Permalink}" class="permalink">Permalink ∞</a>
</p>
</div> <!-- end post-header -->

<div class="quote">
<blockquote class="words {Length}">“{Quote}”</blockquote>
{block:Source}<p class="source">&mdash; {Source}</p>{/block:Source}
</div>
{/block:Quote}

{block:Link}
<p class="post-metadata">
<span class="post-type">Link</span>
<a href="{Permalink}" class="permalink">Permalink ∞</a>
</p>
</div> <!-- end post-header -->

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

{block:Video}
<p class="post-metadata">
<span class="post-type">Video</span>
<a href="{Permalink}" class="permalink">Permalink ∞</a>
</p>
</div> <!-- end post-header -->

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

{block:Audio}
<p class="post-metadata">
<span class="post-type">Audio</span>
<a href="{Permalink}" class="permalink">Permalink ∞</a>
</p>
</div> <!-- end post-header -->

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

{block:Photo}
<p class="post-metadata">
<span class="post-type">Photo</span>
<a href="{Permalink}" class="permalink">Permalink ∞</a>
</p>
</div> <!-- end post-header -->

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

{block:Chat}
<p class="post-metadata">
<span class="post-type">Chat</span>
<a href="{Permalink}" class="permalink">Permalink ∞</a>
</p>
</div> <!-- end post-header -->

<div class="chat">
{block:Title}<h3>{Title}</h3>{/block:Title}
<ul class="conversation">
{block:Lines}
<li class="line {Alt}">
{block:Label}<span class="person">{Label}</span>{/block:Label}
<span class="person-said">{Line}</span>
</li>
{/block:Lines}
</ul>
</div>
{/block:Chat}

{block:RebloggedFrom}
<!-- Only rendered if the post was reblogged from someone else -->
<p class="was-reblogged">This post was reblogged from <a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentTitle}</a>.</p>
{/block:RebloggedFrom}


</div> <!-- end single post -->
{/block:Posts}

{block:PermalinkPagination}
{block:PostNotes} {PostNotes} {/block:PostNotes}
<!-- Pagination only rendered on permalink pages -->
<p class="previous-next">
{block:PreviousPost}<a href="{PreviousPost}" class="previous">← Previous Post</a>{/block:PreviousPost}
{block:NextPost}<a href="{NextPost}" class="next">Next Post →</a>{/block:NextPost}
</p> <!-- end previous/next (posts) -->
{/block:PermalinkPagination}

{block:Pagination}
<!-- Pagination only rendered on index pages -->
<p class="previous-next">
{block:NextPage}<a href="{NextPage}" class="previous">← Older Entries</a>{/block:NextPage}
<span id="pages">Page {CurrentPage} of {TotalPages}</span>
{block:PreviousPage}<a href="{PreviousPage}" class="next">Newer Entries →</a>{/block:PreviousPage}
</p> <!-- end previous/next (pages) -->
{/block:Pagination}

</div> <!-- end content -->

<div id="footer">
<h4 id="links-header">Want More?</h4>
<ul id="links">
<li><a href="{RSS}">Subscribe via RSS</a></li>
<li><a href="/archive">Browse the Archives</a></li>
</ul>

<!-- Remove the comments here to output a list of 30x30 pics of all the tumblelogs you follow

{block:Following}
<div id="following">
<h4 id="following-header">Tumbleroll</h4>
<ul class="followed">
{block:Followed}
<li><a href="{FollowedURL}"><img src="{FollowedPortraitURL-30}" alt="{FollowedName}" title="{FollowedTitle}"/></a></li>
{/block:Followed}
</ul>
</div>
{/block:Following}

-->

<h4 id="about-this-site">About This Site</h4>
<p class="please_dont_hide_this">Powered by <a href="http://tumblr.com/">Tumblr</a>. This <a href="http://simpletumblrtheme.tumblr.com/">Simple Theme</a> by <a href="http://www.ericstraussphoto.com">Eric Strauss</a> is based on the <a href="http://customcss.tumblr.com/">{CustomCSS} theme</a> by <a href="http://cubicle17.com/">Bill Israel</a> and <a href="http://numblr.nostrich.net">Richard Dunlop-Walters</a>.</p>

</div> <!-- end footer -->
</div> <!-- end containing div -->
</body>
</html>


can anyone help me point out how can i make 2 tables, for the sides. and customize my postS?

Okay, i'll wait patiantly if anyone can help me, please take your time if you need too.
hm, heres some more questions.

instead of just a box(for the posts) how can i create my own shape for it?

i understand that the "<meta name="color:" at the top, is used for all of the color fonts, abd etc on the blog. but is their anymore "meta" i can use to style?
and how can i use the "<meta name="image:Background" content=""/>" to add my own background?


please don't move this to tumblr support. i know it suppose to go
in thier, but it'll be hard to get help if its in that forum, and i have more
questions after this.
 
HeartOfPandora
post Nov 5 2009, 04:39 PM
Post #2


i like boobies, yes I do. I like boobies - how 'bout you?
*****

Group: Member
Posts: 620
Joined: Jun 2008
Member No: 662,457
I might have considered helping, but you typed this in Comic Sans.

Also, I've no idea what you're asking us to do.
 
creole
post Nov 5 2009, 05:01 PM
Post #3


Senior Member
*******

Group: Staff Alumni
Posts: 4,665
Joined: Aug 2008
Member No: 676,364
QUOTE(STshawtie @ Nov 5 2009, 01:58 AM) *
Well, my friend asked me, "how about we do a site, with music updates,downloads, and news) (hip-hop&rnb)
at first i said nah!! because hundreds of sites already do those kind of things.
and plus we don't even know how we can even build a site. my friend asked, lets start a blog, earn up the money. and then make the site, in between we'll learn how to make one, and we can do a site that no other site did before"
so i said okay!
we can do that, but with a nice layout, and design. it be even easier.
so of course we gonna use tumblr, but i really need help to understand the codes,
before i start. i'm asking is anybody willing to help?
i'll find a theme, that doesn't have much custom coding. and post it on here so
you can help me point out which part of the code is which, and im sure it'll be easy for
some of you. so can you help me out?

also please don't move this, ill get way more help on this if it stays in this forum, and i have other questions too.



Congrats on choosing a blog. I don't think it is that hard to learn the functions and basics of Tumblr...

BTW, If you post your theme, please put them in a codebox.
 
shawtiegotem
post Nov 5 2009, 05:25 PM
Post #4


Senior Member
****

Group: Member
Posts: 214
Joined: Aug 2009
Member No: 742,635
^ i kno:
and im updating the first post, i don't know how
the font just changed like that.
sorry :)

updated
 
« Next Oldest · Webmasters' Corner Resolved Topics · Next Newest »
 

Closed 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