General Question

x3m's avatar

[HTML] How can I remove default font style from only a certain text in my blog?

Asked by x3m (36points) May 14th, 2010

I have a Tumblr blog and I’ve totally customized the blog’s theme. That is done by modifying the theme’s html code. I know some html, enough to get myself around, let’s say…
Anyway, I have a “problem” I cannot solve:
Close to the header, I want to put a small text, formatted “plain and small”. But I guess the default font style for the header is a big title style. And after numerous tries, I can´t get it the way I want it! The best I can do is this: http://img198.yfrog.com/img198/8008/tumblrn.jpg [highlighted in red]. As you can see, there still is a shadow and some other effect added to the text on the left, and I want to make it like the text after it (which is in an iframe, and that’s why the font is “normal”).
So what can I do? Is there a way to just remove the default font style for a part of the page?

Thank you very much for any help!
-x3m

Observing members: 0 Composing members: 0

9 Answers

jrpowell's avatar

Can I get a link to the actual page? This is a hell of a lot easier if I can see and play with the code in Firebug.

silverfly's avatar

You might be able to manipulate the page with CSS, but we’ll need to see the page.

x3m's avatar

Thanks a lot for trying to help out guys:
http://toomas.tumblr.com/
This is the best I could do with it.

If you need any more info, please ask!

silverfly's avatar

This is the CSS styling for your text with shadow:

#wrapper {
color: #ffffff
font-family: ‘Lucida Sans’,‘Lucida Grande’,‘Lucida Sans Unicode’,sans-serf;
font-size: 50px;
font-weight: bold;
letter-spacing: -1px;
text-shadow: 1px 3px 5px @2F2F2F;
}

Here is the styling for the iFrame text:

#t1c, @t1 {
color: #FFFFFF;
font-family: arial, helvetica, sans-serif;
font-size: 14px
text-decoration: none;
white-space: nowrap;
}

As you can see ,these styles are quite different from each other. This will need to be handled in the CSS level. I’m not familiar with Tumblr, but I imagine you can edit the CSS somewhere. Try doing a Google search for “editing Tumblr CSS”. Then try to find the styling you want to change, and change it to match the other one.

Make sense?

x3m's avatar

@silverfly I understood part of what you said. I’m pretty sure I can edit the CSS (I can edit the full code). But if I edit the CSS won’t it alter everything else? I only want this different style once, in a specific line of text. Thank! :D

And I just found a problem: the code I used to try to make the text a little more like how I wanted it (found below) [since if I just left it unstyled not only would it be bold e w/ shadow, but huge also] altered everything. All the titles etc,
You can see that in my latest test post, the Title is small and white (so it doesn’t show in the white backround, but the text (“Test.123”) also. So it seems like the coding affected lots of other stuff.
Anyway, although I don’t know too much on the subject, I was thinking if it won’t just be easier to “make” the text “inside” some kind of container (frame etc.). Although I don’t how to exactly, if someone can please give me there opinion it that is the best option, and point me to the right direction (in others words: what tool I should use), I’ll learn it myself and do it ;D

CODE that I used for trying to style the text:

<fon t face=“Arial”><fon t color=“white”><fon t size=“2”><font weight:“normal”>Horário atual na NZ:</fon t>

Thanks a lot for any help!

silverfly's avatar

@x3m CSS stands for cascading style sheets so any change you make to a general HTML tag will be applied to all tags.

For example, if you have a simple rule:
h1 {color: #FFFFFF;}

This will make ALL H1 tags white.

If you want to edit ONLY one H1 tag, you have to give that tag a class or ID.

So, to make the main title of a page different from the other titles, you can do this in the HTML:

<h1 class=“main-title”>This is the main title</h1>

And then in your CSS, you can specify that class like so:

h1.main-title {color: #00ccff;}

This will make your main title a bright blue color instead of white. I’m not sure if this is what you’re looking for. Keep me posted!

x3m's avatar

@silverfly Thanks a lot for helping out! And sorry I took so long to answer! I just now had time to mess around with this project.

And I`m happy to say I got it almost perfect! Although I could leave it the way it is, I want to make it perfect! Just the way I want it!
As you can see here (http://toomas.tumblr.com/), I got the “Horário na NZ” the same size, color and weight as the time and date displayed next to it, now I just need to get both at the same “vertical height/distance” (you can see that they are not aligned). So, what would be the best way to do so? Any suggestions?

x3m's avatar

Well it seems like the code I tought worked didn’t work. So I came up with a simple, but not perfect, solution: I just created and image with the text in the correct size and correct backrounf color and posted it right next to the clock! Should have tought of it before!

Anyway, thanks for the help everyone!

pumpkineater's avatar

my c.p.. in a conditional manner.can you help ? also print way too small ty.

Answer this question

Login

or

Join

to answer.

This question is in the General Section. Responses must be helpful and on-topic.

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