For a block of text enclosed in a colored background (like the example below), you can use this code (in the html post or page editor, or in text widgets):
<div style="padding:12px;background-color:#HEX HERE;line-height:1.4;">
TEXT HERE
</div>
TEXT HERE
</div>
For palettes and hex color codes see the Hex Hub.
Padding = space around text; “line-height” may or may not be needed (to correct line spacing, in case it gets disrupted in the theme you’re using). Both numbers are just examples – you can change them.
Padding = space around text; “line-height” may or may not be needed (to correct line spacing, in case it gets disrupted in the theme you’re using). Both numbers are just examples – you can change them.
To highlight a word or a phrase within a paragraph, like this, you can use this variant:
<span style="background-color:#HEX HERE;">TEXT HERE</span>
For a bordered background see this post.
https://wpbtips.wordpress.com/
Please don’t paste code in comments – see comment guidelines.
Advertisements
Just wanted to stop in and say hi! You’ve got a wealth of information here. I’ll be bookmaking the site for future reference. Thanks!
Posted by vjp | September 26, 2009, 19:00Oooh, welcome here and nice to see you again!
(And thanks for the compliment! Well, by now I’ve learned some things and given a few useful replies in the forum, so I thought I’d better organize them, expand them, and make them available here…)
Posted by Panos | September 26, 2009, 20:17Jup, me to Vivian. Thought i knew a lot of .css, realized i know just a bit …
Posted by spletne strani | November 9, 2009, 21:12thanks for the info on the color change. i spent 30 minutes on wordpress yesterday trying to find this answer and here it is…so simply!
Posted by debbie | March 30, 2010, 23:42@debbie: You’re welcome. (WP Support docs don’t have much on such stuff, and when they do they tend to be a bit slapdash.)
Posted by Panos | March 31, 2010, 02:14Hei Bro,
How You have added clock in widget? would you plz tell that?
Posted by Rony Parvej | June 24, 2010, 19:38@Rony Parvej,
Here is what Panos said to me about the clock code:
(Begging pardon of Panos, but it’s got to be the middle of the night for you, so I’m answering this question by quoting you.
You really should do an article on using the gigya shortcode—if and when you have time.)
Posted by Tess | June 25, 2010, 01:55@Tess: Thanks! (Middle of the night is a fine time for me, but I was writing the post I just published. And we’ve got a new surprise – working shortcode in a comment!)
@Rony Parvej: See here for some widgets:
http://www.al-habib.info/islamic-calendar/
And here for instructions:
http://blog.al-habib.info/insert-flash-widget-wordpress-sidebar/
Most widgets you can find provide an embed code only, which isn’t allowed in wp.com blogs, but I was able to transform it into an allowed gigya shortcode. The shortcode for this particular clock is this:
[gigya src="http://www.widgipedia.com/widgets/martinkorner/Time–Date-Widget-776-8192_134217728.widget" width="72" height="18" flashvars="digitalTime=1&colourScheme=1&UTCtime=local& autoChange=user" quality="high" allowScriptAccess="always" wmode="transparent" ]
Posted by Panos | June 25, 2010, 02:14Changing the height number changes the size of the clock; changing the width number changes the white space to its left and right. Make sure you put it against a white background, because of the IE problem Tess quoted.
Posted by Panos | June 25, 2010, 02:18@Panos:
That shortcode working in a comment surprised me—perhaps it is along the lines of youtube & other videos working in comments.
I was interrupted as I tried to figure out how to post it so it wouldn’t work!
Posted by Tess | June 25, 2010, 02:49Yeah – yet another thing to test grrrr!
To make the shortcode show up, you need to write the html for the opening bracket instead of the bracket itself ( & # 9 1 ; minus the spaces).
Posted by Panos | June 25, 2010, 03:00hmm. As I said, I got interrupted. But, I think you like having more things to test? Clean and clear, yes/no puzzles to solve? No artistic ambiguity…
Yes “To make the shortcode show up, you need to write the html for the opening bracket instead of the bracket itself ( & # 9 1 ; minus the spaces).” I ‘think’ that is what I did.
thank you: good discussion.
Posted by Tess | June 25, 2010, 04:30You ‘think’ that is what you did; Thunderbird has a different opinion!
(Yes I like solving puzzles. But I like artistic ambiguity too – just not in this blog!)
Posted by Panos | June 25, 2010, 05:32Had to Google Thunderbird! I seem to have acquired several email accounts lately; will give it a try.
(I only meant that your grrrrowl didn’t sound sincere.
Ambiguity “Have patience with everything that remains unsolved in your heart. Try to love the questions themselves, like locked rooms and like books written in a foreign language. …”
~Rainer Maria Rilke)
Posted by Tess | June 25, 2010, 15:18Thanks for the tip, friends! :-)
Posted by Galois | June 25, 2010, 20:28@Tess: Thunderbird is a very good e-mail client (Firefox’s sister application). Matt recommends it too!
@Galois: You’re welcome. (Which tip?)
Posted by Panos | June 26, 2010, 07:11The clock-tip.
There is a nice clock in my blog, now. ;-)
Posted by Galois | June 26, 2010, 12:38Ah! Care for a couple of analog ones maybe?
[gigya src="http://www.widgipedia.com/widgets/Flash2nd/Deep-Blue-Clock-5414-8192_134217728.widget" width="80" height="80" quality="high" allowScriptAccess="always" wmode="transparent" ]
[gigya src="http://www.widgipedia.com/widgets/Flash2nd/Portal-Analog-Clock-5412-8192_134217728.widget" width="80" height="80" quality="high" allowScriptAccess="always" wmode="transparent" ]
Posted by Panos | June 26, 2010, 14:23Yes, the analog (the 2º) is really beautiful!
Thanks again, Panos. :-D
Posted by Galois | June 26, 2010, 16:03tHanKs to Tess & Panos a lot….
You are really Helpful.
Posted by Rony Parvej | June 26, 2010, 21:36@Galois: Yeah, I thought the 2nd one might fit your blog.
@Rony Parvej: You’re welcome!
Posted by Panos | June 27, 2010, 01:06thank you for mentioning my analog clocks :) you can get them on my blog, without widgipedia link
Posted by flash2nd | August 17, 2010, 03:29@flash2nd: Thank you! I had visited your site, and I would have linked to it here, but unfortunately in most posts you only give a download option, which is no good for wp.com blogs.
Posted by Panos | August 17, 2010, 08:45Thanks a lot for a help. You saved my day and I learned new thing today.
:)
Posted by Justme | August 30, 2010, 14:24@ Justme: You’re welcome!
Posted by Panos | September 1, 2010, 00:15hi panos , i installed the clock above but as you say there is a white box around it , can it be removed or the color changed to the same as my theme , harry
Posted by harrythehandyman | October 16, 2010, 17:45Hi Harry,
No, that’s a problem with the wretched Explorer. Better try some other digital clock (especially since now I know that the designer of that one doesn’t allow its distribution for free). A few here:
https://wpbtips.wordpress.com/2010/08/06/widgets-for-wpcom-2-digital-clocks/
Links to sites with many clocks here:
https://wpbtips.wordpress.com/2010/08/16/widgets-for-wpcom-3-analog-clocks/5/
Posted by Panos | October 16, 2010, 18:04Hi,
Thanks for all that you post. I was wondering if you have the answer to this:
I chose one of my previous blogpost as a sticky one, and the background shows in light blue. (only for the sticky one). Could you possibly direct me to where I can change the background to look like the rest which is white?
Thanks. :-)
Posted by Sigal | February 14, 2011, 06:37Hi, but check point 1 here:
https://wpbtips.wordpress.com/comment-guidelines/
Posted by Panos | February 14, 2011, 09:05Excellent. THANK YOU. I have been struggling for two months to try and change the background colour of my posts. I got it right immediately using your html code.
Posted by gobetweenflames | June 16, 2011, 15:14You’re welcome! It’s not explicitly mentioned in the post, but of course “block of text” applies to a whole post too.
Posted by Panos | June 17, 2011, 04:01