…because good design helps sell your ideas.

BLOG DESIGN JOURNAL


.

Your Questions About Tumblr Codes Font Size

Posted on May 04, 2011 by Blog Design Journal

Mary asks…

How to change the font & size of a tumblr post.?

I want to change the font + size on my post titles. Because i dislike the font & the size of it. I can’t seem to find the css code for it ]: I need help ):
here is my css code ..
here is my tumblr page: http://chococrap.tumblr.com/

Blog Design Journal answers:

Go to http://computechit.blogspot.com/

Donna asks…

i want to change the size and colour of the font on my tumblr blog where it says (via…) under a post?

but i cant find the html code. does any one know how to change it?

Blog Design Journal answers:

Tumblr’s Help Center: http://www.tumblr.com/help

Creating a custom HTML theme (Very good example given): http://www.tumblr.com/docs/en/custom_themes
How To Create Your Own Custom Tumblr Theme?: http://thumlog.com/how-to-create-your-own-custom-tumblr-theme

Ron

Mandy asks…

how do you obtain css selectors from html coding? (tumblr)?

i have limited knowledge of html and find it easier to edit css. i am using an alexisondrugs theme on tumblr, and i understand how they use {block:post}, etc. in the html coding, but is there a possible why you can obtain css selectors from html coding? if not, it would be great if you could give me the tumblr css selectors, which i can’t find anywhere! if it helps, this is the html coding:

body { margin:0px; background-color: {color:Background}; background-image:url(); font-size: 10px; line-height:9px;}

p {margin:0px;margin-top:5px;}
.comments p {margin:0px;}
a:link, a:active, a:visited {color: {color:Link}; text-decoration: none;}
a:hover {color: {color:Hover};text-decoration: none;}
b, strong {color:;}
i, em {color:;}
u {color:;}
div#brains {margin:auto;position:relative;width:850px; background-color: {color:Box};
overflow:hidden; color:{color:title}; margin-top:0px; padding-left:10px;
padding-right:10px;}
div#center{margin:auto; position:relative; width:850px; background-color:none; overflow:auto; overflow-y:hidden;}
div#menu{width:240px;float:left;padding-top:10px;}
div#entry{background-color:;margin-top:px;padding-top:10px;}
div#entrytext {text-align: justify; text-transform: lowercase;}
.comments div#entry {margin-bottom:-9px;}
div#meta {padding:2px 1px 0px 1px;font: normal 7px terminal;text-transform:uppercase; font-weight:normal;}
body, div, p, textarea, submit, input {font-family: Arial, ‘Helvetica Neue’, Helvetica, sans-serif; color:{color:Text}; text-transform: lowercase;}
div#betalol a{color: {color:Link};}
div#content { width:520px; float:right; background-color: none;}
.title{text-align: center; font-family: {font:Title};font-weight: normal;font-size: 20px;line-height:18px;color: {color:Title}; letter-spacing:-1px; top:10px; text-transform: uppercase;}
.hah {font-family: Century Gothic; font-size: 30px; line-height:29px; letter-spacing: -2px; text-align: right; color: {color:Title}; text-transform: uppercase;}
.hah a, .hah a:link, .hah a:active, .hah a:visited {text-decoration: none; color: {color:Title};}
.hah a:hover {text-decoration: none; color: {color:Hover}; }
#navigation, #navigation a:link, #navigation a:visited{text-decoration:none;font-family: Arial, ‘Helvetica Neue’, Helvetica, sans-serif;font-size: 20px;line-height:19px;color:{color:Link};text-transform:lowercase;}
#navigation a:hover{ text-decoration:none;color:{color:Hover};}
blockquote{padding:0px 0px 2px 5px;margin:0px 0px 2px 1px;}
blockquote li {}
blockquote p, ul{margin:0px; padding:0px;}
textarea{height:50px;}
a img{border:none;}
ul, ol, li{list-style:none; margin:0px; padding:0px;}
.post img {display:none;}
.entrytext ul, .entrytext ol, .entrytext li{float:right;list-style:disc; margin-right:10px; padding:0px;}
.entrytext img {max-width: 100%;}
.user_1 .label, .user_4 .label, .user_7 .label {color: {color:Accents};}
.user_2 .label, .user_5 .label, .user_8 .label {color:{color:Link};}
.user_3 .label, .user_6 .label, .user_9 .label {color:{color:Title};}
.notes img{display:none;}
td{vertical-align:top;padding:0px;margin:0px;border-spacing:0px; border:0px; }
table{padding:0px;margin:0px;border-spacing:0px; border:0px; width:100%;}
{CustomCSS}

{Description}

{block:Posts}

{block:Text}{block:Title}{Title}{/block:Title}
{Body}
{/block:Text}
{block:Link}{Name}{block:Description}{Description}{/block:Description}{block:Link}
{block:Photo}{LinkOpenTag}{PhotoAlt}{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Photo}
{block:

Blog Design Journal answers:

The HTML will have the selectors where the CSS is to style them. You will see in the HTML selectors like these:

id=”content” where the CSS part, “div#content”, is styling the content div. Using an id selector only allows its use ONCE PER PAGE.

Class=”conments” where the CSS part, ” .comments div#entry {margin-bottom:-9px;}”, is styling ALL”comments” where it is used. A class can be used as many times per page as needed.

Tags that CSS style directly, like “p {margin:0px;margin-top:5px;}”, do not need selectors since you are styling ALL “p” tags on your site.

I see lots of errors in the code posted. I recommend that you validate your CSS and HTML before using it:

http://jigsaw.w3.org/css-validator/

http://validator.w3.org/

How to Do Templates:

How to Download and Edit a Template Video Tutorial: http://www.clantemplates.com/video/How_to_DL_and_Edit/How_to_DL_and_Edit.html
How to Make a New Page Video Tutorial: http://www.clantemplates.com/video/CT_How_to_Make_a_New_Page/CT_How_to_Make_a_New_Page.html
How to Upload Your Template Video Tutorial: http://www.clantemplates.com/video/CT_How_to_Upload/CT_How_to_Upload.html

Ron

Ruth asks…

How do I change my header on tumblr?

I’m familiar with html and css but only to an extent and this is really bugging me. I want to replace the top header portion(red square that says “D A N N Y”) with a picture.

Here’s what it looks like now helloimd4nny.tumblr.com and I want to replace it with something like his header jaaaaaas.tumblr.com/ (I do have photoshop CS4 for that).

Here’s my current html coding:

<!–
THEME BY ELLETRICITY
Theme Name: Polychromatic
Author: Gabrielle Wee
Credit: http://elletricity.tumblr.com
–>

<meta name="font:Text” content=”Lucida Grande, Lucida Sans Unicode, sans serif”/>

<meta name="font:Header” content=”Helvetica Neue, Arial, sans serif”/>
<meta name="color:Header Font” content=”#ffffff”/>

<meta name="color:Description Font” content=”#ffffff”/>

<meta name="color:Tag Font” content=”#ffffff”/>

@font-face {
font-family:Helvetica Neue;
src:local(“Helvetica Neue Ultra Light”),
local(“HelveticaNeue UltraLight”),
local(“Helvetica Neue UltraLight”),
url(‘http://static.tumblr.com/imovwvl/Fpeku3ogz/helveticaneueultralight.ttf’);
font-weight:100;
}

html * { margin:0;padding:0; }

body {
background-color:{color:Background};
background-image:url(‘http://static.tumblr.com/imovwvl/KzSku3hew/bg.png’);
background-position:center center;
background-repeat:repeat-y;
}

div, table, td, p, font, textarea, input, code {
font-family:{font:Text}, Lucida Sans Unicode, Arial, Helvetica, sans serif;
font-size:11px;
color:{color:Text};
}

a, a:link, a:visited, a:active { color:{color:Links};text-decoration:none; }
a:hover { color:{color:Links on Hover}; }

p { padding-bottom:7px; }

#container {
margin:auto;
padding:0px;
}

#content {
width:800px;height:auto;
margin:auto;
}

#header {
float:left;
margin-left:10px;margin-bottom:10px;
height:200px;width:780px;
background-color:{color:Header Background};
}

#headertext {
float:left;margin-top:100px;
width:100%;height:100px;
text-align:right;
}

#headertext a {
font-family:{font:Header};
font-size:100px;
font-weight:100;
color:{color:Header Font};
text-transform:uppercase;
}

#description {
float:left;
margin-left:10px;margin-bottom:10px;
padding:10px;
width:760px;
background-color:{color:Description Background};
color:{color:Description Font};
}

#description img.pf { max-width:50px;padding-right:10px; }

#blog {
float:left;
margin-left:10px;margin-bottom:10px;
padding:10px;
width:760px;
background-color:{color:Blog Background};
list-style-type:none;
}

.post { margin-bottom:10px; }

.postinfo {
float:left;
width:230px;
padding:10px;
background-color:{color:Post Info Background};
}

.postinfo ul { list-style-type:none; }

.tags a {
font-size:10px;
text-transform:lowercase;
text-decoration:none!important;
color:{color:Tag Font};
background-color:{color:Tag Background};
padding:2px;
-moz-b

Blog Design Journal answers:

1. Remove the div with id=”headertext” and replace with an img tag. Your div with id=”header” should look like the following:

2. In your css, remove “height: 200px” from the “#header” css selector.

3. In the img tag, I’m using jaaaaaas.tumblr.com’s image. To change it to your image, replace http://i45.tinypic.com/vdifs9.png with the location to your image.

Powered by Yahoo! Answers

Leave a Reply

You must be logged in to post a comment.


  • Advertise Here

  • Business Directory for Houston, Texas
  • Blogarama - The Blog Directory


↑ Top