Social Question

anon30's avatar

Coding A Theme For Tumblr Is The Same As Coding AnyOther Blog Right?

Asked by anon30 (334points) November 26th, 2009

I been stuck for the last 2 months, I google “How To Code Tumblr ” but nothing that comes up that will help me. I just got finish making the Design Layout for it, but after that i’m stuck.

the first thing i know where to start out is
.
.
.

<style type=“text/css” media=“screen”>
body {
background-color: {color:Background};
color: {color:Text};
font: 16px {font:Body};
margin: 0;
text-align: center;

But After that i’m just lost. I know That Tumblr Has

#content <- i think that is for the posts

.quote
.photo
.conversation
.link
.Audio
.Video

They’re Called Divs, Right?
But i would i completely Code them?

Observing members: 0 Composing members: 0

8 Answers

Response moderated
anon30's avatar

i didnt mispelled anything tho

sebastian_von_tulu's avatar

You do need to completely style the divs, yes.

Have you used CSS much before?

I would suggest playing with already available themes, if you’re not completely comfortable creating your own.

I assume you’ve already looked through the documentation?

anon30's avatar

@sebastian_von_tulu Yes I did. but can you explane to me how to style each div?

sebastian_von_tulu's avatar

Well, it’s quite a lot easier to show you. Here’s some code I just borrowed from jessieshungry.com for these educational purposes ;)

/* 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: #222;
}

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

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

/* Quote Post */

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

}

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

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

div.post div.quote div.source a {
color: #6DA856;
}

div.post div.quote div.source a:hover {
color: #F7C852;
}

/* 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: #fff;
padding: 5px;
background: #222;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

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

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

.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: bold;
}
div.post div.conversation ul li.odd {
background-color: #535748;
}

div.post div.conversation ul li.even {
background-color: #7A8558;
}

/* 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: #6DA856;
}

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

Fluther needs a way for fomatting code posts…

Looking at the source for a few Tumblr blogs would probably be very useful.

anon30's avatar

Yes, like have a way codes could go into a scroll box

anon30's avatar

and #content is the whole thing its self right? but how can i code that?

sebastian_von_tulu's avatar

@BlockStar22 If you review already available themes and the source code you’ll certainly figure it out.

Get a book on website design focusing on CSS I recommend Craig Grannell’s Web Designers Reference, although it’s a few years old now it’s the best one I’ve read (and you should be able to pick it up at a bargain price). There’s also a billion tutorials on the internet.

Good luck & have fun :)

Answer this question

Login

or

Join

to answer.
Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
or
Knowledge Networking @ Fluther