Formatting text pt. 5: color, size, and font

Mr. Adam, my friend!

Congratulations! 10,000 + in stats!!!

“The creation of a thousand forests is in one acorn”

Perhaps not exactly the appropriate thing to say for the occasion but none the less well intended.

Tess

The Complete Prose Works of Ralph Waldo Emerson By Ralph Waldo Emerson
The creation of a thousand forests is in one acorn

Posted by Tess | July 15, 2009, 05:31

Thanks! But it’s no big thing – or haven’t you noticed what number your blog is approaching?

Posted by Panos | July 15, 2009, 15:57

Sort of. I used to look at my stats several times a day. Now it’s like once a week. When it hit 50K I thought of doing some special thing, but then forgot. Besides, I have not posted much lately and the daily stats are down.

Even so, it’s nice to know that even half of your hits are not due to me alone. (tongue in cheek)

Posted by Tess | July 15, 2009, 16:21

No, i guess most of my traffic is via Google search and via the forum. (But then again, you’re partly responsible for the latter…)

Posted by Panos | July 15, 2009, 16:43

Hi Panos,

Would by chance, happen to know how to centre align text in a text widget? I’ve been searching via Google etc. with no results. If you have any ideas, please leave a reply.

Thanks.

Posted by AmAziNgLY sIMpLE | July 18, 2009, 03:33

Hi. See here:

https://wpbtips.wordpress.com/2009/06/10/formatting-text-pt-1/

In a few themes the codes you’ll find in that post may not work. If that’s the case, let me know which theme you’re using so I can check things and give you a different solution.

By the way, you should correct your nick link: you’ve put your email address instead of the URL of your blog.

Posted by Panos | July 18, 2009, 03:56

Thank you so much for the useful information, I was looking for it ^^.

Posted by iruvienne | September 10, 2009, 07:27

You’re welcome.

Posted by Panos | September 10, 2009, 13:23

I’m trying the color thing with some of my text, and the tags appear nice in the html source code of my blog. but something (script?) erases the color information – in firebug the actual tag has only empty style. Is this a wordpress feature setting I have overlooked?

Posted by Kai | November 5, 2009, 04:36

@Kai: Please paste here the exact code you’re trying to use; also link to the post in question.

Posted by Panos | November 5, 2009, 11:28

@Panos
this is what I put into the html editor for the blog entry
some text

and it results in simple black paragraph when put out. Firebug shows me the paragraph as

some text

the blog entry is here:
http://blog.hackemesser.de/volkswirtschaft/interview-mit-dr-kurt-richebacher
(blog in preparation, just moving in)

Posted by Kai | November 5, 2009, 12:27

solved – I forgot the hash in the color definition *blush*

Posted by Kai | November 5, 2009, 12:31

That’s what i suspected: a simple typo in the code. Glad you got it solved!

Posted by Panos | November 5, 2009, 12:38

Hi!

This is really helpful and I managed to change my font type but I can’t seem to change the font size. Will you help me please?

I’m using theme Rounded by Ghyslain Armand.

Thanks a lot!

Posted by Gnogep | December 27, 2009, 01:48

@Gnogep:

1) “I managed to change my font type”. Not really, because you put a span tag as a paragraph of its own. Your post is still in Lucida Grande, the theme’s default font (Segoe is quite similar, but with a few differences, e.g. hooked instead of straight l). Please read my post more carefully – note 2 in particular.

2) I don’t see any traces of an attempt to change font size. Please let me know which part of the text you wanted to change and what exactly you tried to do.

Posted by Panos | December 27, 2009, 04:58

Can anyone tell me how to change the default color of the post title in the Vigilance theme?

Thanks so much

Posted by cherylmarieknits | July 31, 2010, 05:55

@cherylmarieknits: HTML codes such as the ones I’m giving in this post can only be used in an HTML editor, i.e. for the main text in posts, static pages, alert notices and text widgets. They cannot be used in title fields. So you cannot change the color of titles unless you buy the CSS upgrade.

PS This is a blog, not a forum: there are no “anyones” but me!

Posted by Panos | July 31, 2010, 09:33

ˆ∞,ˆ hum hum
On tiptoe, I came in, and without disturbing, here I’ve left for you, a little golden heart, to thank you ♥

((Hello, dear Panos! Many thanks for the friendly link onto the sidebar, and sorry again for my poor english :))

Sur la pointe des pieds, je suis entrée, et sans rien déranger, ici j’ai déposé, un joli coeur doré, pour te remercier ♥

Posted by lilmaouz | August 21, 2010, 16:50

You’re most welcome, lilmaouz, and you shouldn’t be thanking me: in my blogroll I add people who contribute a lot in the forums or people I like, and you just happen to be both!

(And I’m not seeing any poor English!)

Posted by Panos | August 21, 2010, 21:17

hi panos!
really nice work!
i’m trying to change the color of post-title in vigilance theme but i get nothing. i’m using this:

.post a.title {
color:#edit;
}

.post a.title:hover {
color:#edit;
}

is there sth wrong?

Posted by taxamenaepeisodia | October 3, 2010, 17:01

Hi!

Yes there’s something wrong: wrong selectors. (Did you get those from the CSS of another theme?) The Vigilance CSS is here:
http://svn.automattic.com/wpcom-themes/vigilance/stylesheets/master.css

So you need these:

.post-header h1 a:link,.post-header h1 a:visited,.post-header h2 a:link,.post-header h2 a:visited { color:#HEX HERE !important; }

.post-header h1 a:hover,.post-header h2 a:hover { color:#HEX HERE !important; }

If you want the same color when you view a single post, add these to the first array of selectors:

.post-header h1,.post-header h2

Posted by Panos | October 3, 2010, 18:03

thanx a lot!

Posted by taxamenaepeisodia | October 3, 2010, 23:41

@txe: you’re welcome!

Posted by Panos | October 4, 2010, 02:05

Thanks for the info. I was trying to figure out hoiw to make the text in a sidebar widget smaller. Great info and found via a big G search.

Posted by Dave | October 7, 2010, 04:54

@Dave: You’re welcome. But see Note 2 near the beginning of the post.

Posted by Panos | October 7, 2010, 05:40

Panos,

I prefer post headings to be in italic, so I have begun to go back to my over 100 posts and insert in the heading:

However, I notice that when I tweet one of these posts, this is how it looks on the tweet:

[sourcecoge language=”html”]
<em>Mango Green Tea</em>:
[sourecode]

All I want it to say is Mango Green Tea, not have the other stuff with it. Is this a case of a little knowledge being a dangerous thing?

Kathleen

Posted by Cooking in Mexico | October 8, 2010, 23:07

Sorry, you didn’t use the shortcode correctly – refer to older comment:
https://wpbtips.wordpress.com/2010/10/04/divider-lines/#comment-4747

Posted by Panos | October 9, 2010, 09:16

Whoops. Here it is again.

I’m trying to only italicize my topic heading.

<em> Topic </em>

But the code is appearing with the topic in tweets.

Thank you,
Kathleen

And Tess, thanks for showing me how to write fractions. I had wondered how to do this.

Posted by Cooking in Mexico | October 9, 2010, 15:01

Actually, it comes out like this on twitter:

<em>Mango Green Tea</em>:

I can remove it before I tweet, but I’m concerned it may appear like this in other applications, perhaps shares or FB.

Posted by Cooking in Mexico | October 9, 2010, 18:24

That’s the HTML entities for the actual symbols (what you would write to display the symbols instead of making them produce the result they’re meant to). There seems to be a problem with the RSS at the moment, so I can’t check things, but most likely you can’t do anything about it: post titles aren’t supposed to accept any html, so by adding the italics tags you’re violating the way titles are designed to work. You could sign up with Typekit and see if there’s any oblique font you might like for your titles.

Posted by Panos | October 10, 2010, 13:04

Thank you, Panos. I have removed all the ems from the post titles.

And thank you again for the correct code to insert blank space between paragraphs without it disappearing when I move from HTML to Visual. The code worked fine and now my paragraphs are properly spaced.

Kathleen

Posted by Cooking in Mexico | October 10, 2010, 19:31

You’re welcome, and I agree, no italics in the titles is less of a problem than that jumble in your tweets etc. But do check Typekit – you might find something more interesting than italics.

Posted by Panos | October 10, 2010, 19:37

Hi panos,

I am using the bueno theme…www.nikitasheth.wordpress.com
& cant seem to work out how to change the font color of ‘featured post’ widget….I cant seem to find the right part of the CSS to edit?

any ideas?

thanks for your help!
Nikita

Posted by nixsheth | October 11, 2010, 12:22

Hi from here too! If you mean the widget title, the selector is:

.widget h3 { color: #404040; }

(Or do you mean the post titles in the widget? Or the post excerpts?)

Posted by Panos | October 11, 2010, 13:27

Hi Panos,

yes, i mean the ‘featured post’ heading. will try that code out tonight!

Also- how can i change the ‘About Me’ category tag on the top of the page? i also spent over 1hr trying to identify the relating CSS code for that too?

I really do appreciate the time you are taking to answer my VERY SIMPLE questions!
nikita

Posted by nixsheth | October 12, 2010, 07:03

You’re welcome, and I don’t think these are simple questions: I think CSS editing is one of the least simple things, mostly because each theme names things its own way.

But! again I must ask you to be specific. What does “change” mean? Color, font, size, style, color of the line under the tab, color of the line when you hover over? Without that, I can only tell you that the main selector for the page tabs is this:
#pagenav a { }
And you may also need this:
#pagenav li a:hover { }
What you’ll put inside the brackets depends on what exactly you want to change.

Posted by Panos | October 12, 2010, 19:48

Thank you panos! worked out perfectly..once again. genius!

Also…I have 3 more questions!!! (sorry!):
– how do I ‘unbold’ the ‘Featured Posts’ headline in sidebar 3?
– how change the font color of the footer 1 (right down the bottom)?
– how do I change the font color of the ‘About Me’ heading on the actual about me page?

I have tried to find the relating CSS code but am having trouble!

Thanks again- much appreciated!

Posted by nixsheth | October 15, 2010, 02:49

Featured posts headline:

#container .widget-bueno-featured .right h4 a { font-weight:normal; }

Upper footer:

#extended-footer { background-color: #HEX HERE; }

Lower footer:

#footer { background-color: #HEX HERE; }

Page titles:

.post .title { color: #HEX HERE; }

Adding that, however, will change the title color of all pages and posts (when you view a single complete post, not on the main page). If you want to change the title of the About page only, you need to get the ID number of that page and add this:

.page-id-NUMBER HERE .post .title { color: #HEX HERE; }

Posted by Panos | October 15, 2010, 11:35

PS I’m no CSS genius, I just know more tools than you do at the moment. So, a suggestion: if you’re using Firefox, add the Firebug add-on; it won’t give you ready answers, but it will help you identify selectors.

Posted by Panos | October 15, 2010, 11:37

THANK YOU! You made this so simple – I really appreciate it!

Posted by colleen joyce pontes | November 11, 2010, 22:21

You’re welcome (but I’m not seeing anything related to this post in your blog).

Posted by Panos | November 12, 2010, 23:01

Changing color of links
…
If you use the visual editor, you must write the link text first, highlight it, change its color via the Color button, then turn it into a link via the Link button.

Even as we face much more serious changes, this one change to the way the Visual Editor (improvement of how links are inserted) works will be annoying: One can no longer change the color of links this way. It now puts the span color info outside of the a-tags.

Posted by Tess | November 21, 2010, 18:48

Truth is I haven’t even tried how linking works now (I do my links the HTML way anyway); and I won’t bother till the bugs are corrected.

Posted by Panos | November 21, 2010, 22:34

ok.
Yes. The HTML code works the same as ever.
I was only suggesting that a short dated note added to this post would be useful for your readers now.
But I don’t have any idea how many people look at this post over a week, or month…
I haven’t been much in the forums lately so perhaps it is no issue for anyone.

Posted by Tess | November 22, 2010, 04:57

Yes, yes, understood – after the bugs are corrected!

Posted by Panos | November 22, 2010, 10:39

Panos,

I was just editing a past post, and noticed that part of it was in a stronger type (not bold) than the rest of the text. Upon checking the HTML, I saw that the strong type is coded thusly: (open bracket) span style=”color:#000000;”(close bracket or whatever that little wedge symbol is called). I don’t know how that code got in there.

I know how to remove it, but now that I see it, I think I like the stronger type. I always wondered why the default type was so light. I know this is probably just a matter of preference, but I want to know what you think of this stronger type.

If you care to check out the post, it is here http://cookinginmexico.com/2010/08/29/molten-mexican-pineapple-pancakes/
The strong type is in the first paragraph and the list of ingredients.

If I were to use this strong type regularly, that would mean inserting this code for each section of text, an extra, time-consuming step, so that may be a count against it.

Thank you for your comments.

Kathleen

Posted by Cooking in Mexico | December 4, 2010, 18:35

Interesting question…

The facts:
#000000 is pure black.
Regular text in the theme you’re using is #555555 (grey).
Widget titles and widget lists are #888889 (lighter grey).
Post titles are #111111 (very close to, but not quite, pure black).
General background is #ffffff (pure white).

Now, moving from the objective to the not so objective:
The extreme contrast of pure black on pure white is too harsh – normally not considered good design. On the other hand, the particular shades of grey used in Fusion give a rather washed out overall appearance. So, if you want your posts to blend more with the sidebar content, stick to the designer’s choices; if you want them to stand out more, you can make the text darker, but not necessarily pure black: I would suggest no darker than #333333.

If you want to use that color for complete posts, you just need to add one tag at the beginning and one at the end of each post (after you’re done with all the content):

<div style="color:#333333;">
COMPLETE CONTENT HERE
</div>

No big deal really; you can save the code in a simple text file and copy it from there each time you need it.

If you want to make that change once for all, you need to buy the CSS upgrade.

As for how the span code got in there, you either messed with the color tool of the visual post editor, or you copy-pasted from Word or some other code-rich source to the visual post editor (which you should never do).

PS Your question had nothing to do with serif or sans serif fonts, so once you see this reply I’ll transfer your comment to this post:
https://wpbtips.wordpress.com/2009/07/11/formatting-text-pt-5/

Posted by Panos | December 4, 2010, 20:54

Thank you, Panos. You make a good point that pure black is too harsh against a white background. I will check out #333333. And thank you for instructions on how to easily implement this, if I so choose.

I apologize for commenting under Serif fonts. I think the appropriate post was near the Serif post on the page, and I went to the wrong comment area. Thank you for moving it.

Kathleen

Posted by Cooking in Mexico | December 4, 2010, 21:48

You’re welcome – and no need to apologize: I just thought that this discussion might be useful to others too if posted under the relevant post, and just wanted you to be aware of the relocation.

Posted by Panos | December 4, 2010, 22:13

Hey, I try what it has said but my post links stay the same. The color becomes this green no matter what I have done

Posted by jschnitzxboxstuff | September 16, 2011, 05:47

Please check my post more carefully: there’s a separate section on how to change the color of links in particular. What color would you like them to be? (Also, do you want to get rid of the dotted underline as well or not? And do you want them to open in a new window or not?)

Posted by Panos | September 16, 2011, 06:02

Whoops Completely Missed that.

Thank You very Much.

Posted by jschnitzxboxstuff | September 17, 2011, 10:44

You’re welcome. Check this too, for better divider lines:
https://wpbtips.wordpress.com/2010/10/04/divider-lines/

Posted by Panos | September 17, 2011, 16:58

Hi Panos..First of all thanks for this useful post. This let me to think that which fonts are allowed on wordpress.com when You don’t have a custom design upgrade. I was trying to use ‘Ubuntu’ font in my blog using HTML editor :) but as I guessed, it didn’t work.
Is there any list of web-fonts which are supported on WordPress.com?
—
wpgaurav

Posted by Gaurav Tiwari | October 1, 2011, 11:46

Hi Guarav,

It doesn’t have to do with WP in particular, it has to do with browsers and the web in general. Notice the last paragraph of my post, which links to this:
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Posted by Panos | October 1, 2011, 12:11

I read that link before posting comment. Windows (I use) is capable to support new fonts too, which are not listed there. The doubt is that if I can use decorative & modern fonts on blogger using inline css then why not on wordpress.com? I have assumed that Matt’s team has disabled modern/new fonts on WP.COM, such that people only with custom-design upgrade can use them. [I saw, some cool fonts under custom-design tab under appearance, ubuntu is probably also listed there.] BTW As you answered, from now I note that only these classical fonts are supported on WP.COM. $\heartsuit$

Posted by Gaurav Tiwari | October 1, 2011, 13:29

I’ve got more to tell you on this, but before I do I’d like to see the exact inline CSS you’ve tried to use in WP (and the exact inline CSS you have successfully used in BS, if it’s not the same). Don’t paste it directly here – use Textsnip.

For the moment, re “only these classical fonts are supported on WP.COM”, no that’s not correct: these are just the fonts you can be sure they’re installed in practically every user’s computer. You can specify lots of other fonts too, but if the user’s computer doesn’t have them, their browser will display the web-safe alternative you have specified (if you have done this) or the font you’ve set your browser to display in place of fonts not installed in your computer.

Posted by Panos | October 2, 2011, 05:52

Hey, thanks for the help with customizations. Using the twentyeleven theme, I would like to change the default leading between paragraphs on some pages. default is like a double space and I just want a single space in some instances. Any tips on how best to do that? Thanks.
Websites: digitaltouchproductions.wordpress.com and personalizedcreations.wordpress.com

Posted by Digital Touch Productions | November 12, 2011, 18:34

If you mean you want a line break instead of a paragraph break, you press shift-return in the Visual editor or return in the HTML editor.

If you mean you do want a paragraph break (blank line between paragraphs), just shorter than the regular one of the theme, you need to change the bottom margin of paragraphs (the default in 2011 is 1.625em). Use this code in the HTML editor:

<p style="margin-bottom:.8em;">PARAGRAPH TEXT HERE</p>

The .8 is just an example: change the number to increase or decrease the blank space.

Posted by Panos | November 13, 2011, 02:52

Hey Panos,
Many thanks for the detailed and clear tips. I have tried to cobble together several of them to add a crimson-colored text box in a text widget at the top of the right sidebar on a WP site at evkids.org. The text and the hyperlink work fine but I am not getting the crimson box with white lettering that I want. I would appreciate your advice about how to modify the code below. Thanks, merci, gracias, Danke, evcharisto! Brian

[Code relic removed – P.]

Posted by Brian Thompson | December 16, 2011, 19:39

Here’s the whole code so far, not working as I would like it to:

[Code relic removed – P.]

Posted by Brian Thompson | December 16, 2011, 19:42

See point 4 here:
https://wpbtips.wordpress.com/comment-guidelines/

Posted by Panos | December 16, 2011, 20:39