Note 1: All the following are used in the so-called Text (=code) post or page editor (as well as in text widgets).
Note 2: In all the following cases, “span” is for characters, words or phrases inside a paragraph; for a complete paragraph, you write “p” instead of “span”; for sections comprising more than one paragraph, including complete posts, you write “div”.
Note 3: To apply more than one of the following (or any other elements of “style”) to the same text, you combine them in the same tag, e.g.:
TEXT HERE
</div>
Changing color
Hex color codes can be found in this or other similar webpages. For basic colors you can write a plain word instead of a hex number, without the sharp sign – e.g. “color:red”.
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.
Changing size
You may need to correct line-spacing, in which case you add this before the closing quote (the number is just an example):
Changing the font size is best used for individual effects, not for altering the overall appearance of your blog because you think the type is too small; what a visitor sees depends on his/her screen resolution (which may not be the same as yours), and all browsers have a zoom-in function.
Changing font
Where I’ve put SPECIFY, you write the name(s) of a specific font. In theory you can specify any font you like, but a visitor won’t see it if s/he doesn’t have it installed; so you’d better confine yourself to “browser-safe” fonts (see here). Also, font names may differ between Macs and Windows, so you’d better write the full stack of equivalents and substitutes, e.g. “font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;”.
https://wpbtips.wordpress.com/
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
Thanks! But it’s no big thing – or haven’t you noticed what number your blog is approaching?
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)
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…)
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.
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.
Thank you so much for the useful information, I was looking for it ^^.
You’re welcome.
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?
@Kai: Please paste here the exact code you’re trying to use; also link to the post in question.
@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)
solved – I forgot the hash in the color definition *blush*
That’s what i suspected: a simple typo in the code. Glad you got it solved!
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!
@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.
Can anyone tell me how to change the default color of the post title in the Vigilance theme?
Thanks so much
@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!
ˆ∞,ˆ 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 ♥
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!)
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?
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
thanx a lot!
@txe: you’re welcome!
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.
@Dave: You’re welcome. But see Note 2 near the beginning of the post.
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
Sorry, you didn’t use the shortcode correctly – refer to older comment:
https://wpbtips.wordpress.com/2010/10/04/divider-lines/#comment-4747
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.
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.
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.
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
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.
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
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?)
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
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.
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!
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; }
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.
THANK YOU! You made this so simple – I really appreciate it!
You’re welcome (but I’m not seeing anything related to this post in your blog).
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.
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.
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.
Yes, yes, understood – after the bugs are corrected!
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
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/
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
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.
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
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?)
Whoops Completely Missed that.
Thank You very Much.
You’re welcome. Check this too, for better divider lines:
https://wpbtips.wordpress.com/2010/10/04/divider-lines/
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
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
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.
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.
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
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.
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.]
Here’s the whole code so far, not working as I would like it to:
[Code relic removed – P.]
See point 4 here:
https://wpbtips.wordpress.com/comment-guidelines/
je ne comprend rien je ne parle pas en anglais et il n’y a pas de traducteur sur cette page,
ma question est la suivante :
je veux changer ma police de caractère dans ma page billet pour ecrire des articles mais gratuitement
Comment dois je faire ?
Merci beaucoup pour votre réponse,
bien cordialement
Malhereusement je parle pas bien français. Vous pouvez demander ici:
http://fr.forums.wordpress.com