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.
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!
Oooh, 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…)
Jup, me to Vivian. Thought i knew a lot of .css, realized i know just a bit …
thanks 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!
@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.)
Hei Bro,
How You have added clock in widget? would you plz tell that?
@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.)
@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" ]
Changing 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.
@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!
Yeah – 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).
hmm. 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.
You ‘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!)
Had 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)
Thanks for the tip, friends! :-)
@Tess: Thunderbird is a very good e-mail client (Firefox’s sister application). Matt recommends it too!
@Galois: You’re welcome. (Which tip?)
The clock-tip.
There is a nice clock in my blog, now. ;-)
Ah! 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" ]
Yes, the analog (the 2º) is really beautiful!
Thanks again, Panos. :-D
tHanKs to Tess & Panos a lot….
You are really Helpful.
@Galois: Yeah, I thought the 2nd one might fit your blog.
@Rony Parvej: You’re welcome!
thank you for mentioning my analog clocks :) you can get them on my blog, without widgipedia link
@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.
Thanks a lot for a help. You saved my day and I learned new thing today.
:)
@ Justme: You’re welcome!
hi 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
Hi 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/
Hi,
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. :-)
Hi, but check point 1 here:
https://wpbtips.wordpress.com/comment-guidelines/
Excellent. 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.
You’re welcome! It’s not explicitly mentioned in the post, but of course “block of text” applies to a whole post too.