Modifying a Tumblr theme Options

[Garquille]

Right now I'm making a blog on Tumblr and I'm modifying one of the themes to suit my preference. I can't say I have much HTML experience; I worked with it in high school for a few months so I can read some parts and know what to change to make a difference, but I can't locate everything or create anything from scratch.

http://garquille.tumblr.com/
What I've done;
> Located the background location and changed it; aligned image to sit nicely with the layout; removed repeat and centered it
> Removed avatar HTML
> Altered text sizes
> Probably something else

What I want to do;
1) I want to change the font in the title and body. I located this section:

CODE

color:#fff;
            font-size:11px;
            font-family:  "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
            text-shadow: #000 0px 1px 0px;

I tried swapping out the fonts with something else, and it did change some of the fonts, but none affected the title, and I couldn't figure out any reasoning behind the changes because replacing some of them affected the same text.
1a) I'm also curious if the site will support any font, as the one I'm looking at for the title seems to be obscure (P22 Arts & Crafts I think it was). If not then I might be able to make the title text invisible and just put the text in the title background image.
1b) I also couldn't figure out how to change the font color.

2) Change the color on the balloons that pop up on the left side. All you can see on my page is the green one, but a blue one pops up too for "notes", and I'm not sure if there are any others. I'd also like to change the actual balloon image. I haven't been able to find anything for either because I'm not sure what to search for.

3) I want to be able to modify the transparency of the background of the layout and the gradient of the shading. I'm completely oblivious to this part.

Thanks for reading.

This post has been edited by Garquille: Oct 16 2010, 10:51 AM

[pandy]

What I want to do;
1) I want to change the font in the title and body. I located this section:

CODE

color:#fff;
            font-size:11px;
            font-family:  "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
            text-shadow: #000 0px 1px 0px;

I tried swapping out the fonts with something else, and it did change some of the fonts, but none affected the title, and I couldn't figure out any reasoning behind the changes because replacing some of them affected the same text

The snip you posted is missing an essential part, namely a selector. Maybe you know this but in case you don't, CSS rules match some stucture in the HTML and the selector is what tells what to match.

To set the font for the whole page you would write a rule for BODY.

CODE

body      { font:... }

Problem is that rule can be overridden by more specific rules that already exist in the style sheet. It isn't possible to say what you need to do without seeing the whole thing. Possibly deleting everything to do with fonts and start over is a feasible approach.

When you say title, I assume you mean some kind of heading and not the TITLE element, the text that shows in the browser's title bar? There's probably a specific rule for that already.

[Frederiek]

Please post the url of your page, so we can see the whole thing and understand what you are talking about.

[Garquille]

Gah, I copied the URL but forgot to paste it.
http://garquille.tumblr.com/

[pandy]

This is the rule for your title.

CODE

  66           #title h1{
  67               font-size:42px;
  68               font-weight:bold;
  69               text-shadow: #fff 0px 1px 0px;
  70               margin-top:15px;
  71               padding-left:5px;
  72               padding-right:5px;
  73  
  74           }

With line numbers.

[Garquille]

Ehh, I don't know what to do with that to change the title font. I keep inputting things, like font-family: Geneva into #title h1 but it hasn't done anything

It seems almost like the font of the title is being overridden. If I replace the "Lucida Grande" in

color:#fff;
font-size:11px;
font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
text-shadow: #000 0px 1px 0px;

with "Impact", the body text will change to Impact, and the title will quickly flash to Impact and then revert to what it was.

[Darin McGrew]

Here's an explanation of why different fonts are used in different places, based on examining the elements in Chrome:

"This is the Title" uses Impact, inherited from the rule for
body {...}

"Test" uses Helvetica Neue, based on the rule for
.post .posttitle h3 a {...}

"test2" uses Impact, inherited from the rule for
body {...}

"About me" and "People I follow" use Helvetica Neue, based on the rule for
#sidebar h2 {...}

"test" uses Impact, inherited from the rule for
body {...}

"Ask me anything" and "Submit" use Impact, inherited from the rule for
body {...}

"Load more posts..." uses Helvetica Neue, based on the rule for
#container-bottom #load-more-posts {...}