Forums > help me build this blog.

Forums > Resource Center > Webmasters' Corner

shawtiegotem

Nov 5 2009, 03:58 AM

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

Nov 5 2009, 04:39 PM

I might have considered helping, but you typed this in Comic Sans.

Also, I've no idea what you're asking us to do.

Beenly

Nov 5 2009, 05:01 PM

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

Nov 5 2009, 05:25 PM

^ i kno:
and im updating the first post, i don't know how
the font just changed like that.
sorry :)

updated

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.