you're reading:
Background color, Color changes, Highlighting, Html & inline css codes, Space betweeen lines

Background color to text

http://wpbtips.wordpress.com/

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>
 
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.
 

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.

-

http://wpbtips.wordpress.com/

Please don’t paste code in comments – see comment guidelines.

Discussion

33 thoughts on “Background color to text

  1. 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:00
  2. 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…)

    Posted by Panos | September 26, 2009, 20:17
  3. Jup, me to Vivian. Thought i knew a lot of .css, realized i know just a bit …

    Posted by spletne strani | November 9, 2009, 21:12
  4. 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!

    Posted by debbie | March 30, 2010, 23:42
  5. @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:14
  6. Hei Bro,
    How You have added clock in widget? would you plz tell that?

    Posted by Rony Parvej | June 24, 2010, 19:38
  7. @Rony Parvej,

    Here is what Panos said to me about the clock code:

    “Found the clock here:

    http://www.widgipedia.com/index.html

    Transformed the embed code into a working gigya shortcode:

    [gigya src="http://www.widgipedia.com/widgets/martinkorner/Time--Date-Widget-776-8192_134217728.widget" width="80" 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 width of the box it’s enclosed in.

    Four color schemes: 0, 1, 2, 3.

    Unfortunately Explorer doesn’t understand “transparent” and produces a white box around the clock: that’s why I had to put the clock in a box with white bg color.”

    (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
  8. @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&quot; width="72" height="18" flashvars="digitalTime=1&amp;colourScheme=1&amp;UTCtime=local&amp; autoChange=user" quality="high" allowScriptAccess="always" wmode="transparent" ]

    Posted by Panos | June 25, 2010, 02:14
  9. 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.

    Posted by Panos | June 25, 2010, 02:18
  10. @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:49
  11. 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).

    Posted by Panos | June 25, 2010, 03:00
  12. 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.

    Posted by Tess | June 25, 2010, 04:30
  13. 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!)

    Posted by Panos | June 25, 2010, 05:32
  14. 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)

    Posted by Tess | June 25, 2010, 15:18
  15. Thanks for the tip, friends! :-)

    Posted by Galois | June 25, 2010, 20:28
  16. @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:11
  17. Which tip?

    The clock-tip.

    There is a nice clock in my blog, now. ;-)

    Posted by Galois | June 26, 2010, 12:38
  18. Ah! Care for a couple of analog ones maybe?

    [gigya src="http://www.widgipedia.com/widgets/Flash2nd/Deep-Blue-Clock-5414-8192_134217728.widget&quot; 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&quot; width="80" height="80" quality="high" allowScriptAccess="always" wmode="transparent" ]

    Posted by Panos | June 26, 2010, 14:23
  19. Yes, the analog (the 2º) is really beautiful!
    Thanks again, Panos. :-D

    Posted by Galois | June 26, 2010, 16:03
  20. tHanKs to Tess & Panos a lot….
    You are really Helpful.

    Posted by Rony Parvej | June 26, 2010, 21:36
  21. @Galois: Yeah, I thought the 2nd one might fit your blog.

    @Rony Parvej: You’re welcome!

    Posted by Panos | June 27, 2010, 01:06
  22. thank you for mentioning my analog clocks :) you can get them on my blog, without widgipedia link

    Posted by flash2nd | August 17, 2010, 03:29
  23. @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:45
  24. Thanks a lot for a help. You saved my day and I learned new thing today.

    :)

    Posted by Justme | August 30, 2010, 14:24
  25. @ Justme: You’re welcome!

    Posted by Panos | September 1, 2010, 00:15
  26. 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

    Posted by harrythehandyman | October 16, 2010, 17:45
  27. 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:

    http://wpbtips.wordpress.com/2010/08/06/widgets-for-wpcom-2-digital-clocks/

    Links to sites with many clocks here:

    http://wpbtips.wordpress.com/2010/08/16/widgets-for-wpcom-3-analog-clocks/5/

    Posted by Panos | October 16, 2010, 18:04
  28. 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. :-)

    Posted by Sigal | February 14, 2011, 06:37
  29. 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.

    Posted by gobetweenflames | June 16, 2011, 15:14
  30. You’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

Trackbacks/Pingbacks

  1. Pingback: Microblogging-1 « Rony Parvej - June 26, 2010

  2. Pingback: Prueba de Introducción de Código en wordpress | elosasis - August 11, 2014

Author

author's avatar panos (justpi)

 Subject Index

Announcement 22/03/2012: After WP's latest move, this blog will no longer offer active support and assistance. The blog will remain online but commenting on older posts has been disabled.
✶ All theme-related posts are updated up to and including theme 189 in this list, but will not continue to be updated.

Stats

  • 2,600,369 views
  • Views per month:
Safari Icon Firefox - Never Internet Explorer
Note: if you see ads on this site, they are placed by WordPress, not me.
wpbtips.wordpress.com
Mostly on themes, formatting, coding, tweaks and workarounds.
Based on or springing from my contributing in the wp.com forum.
Theme-related posts constantly updated
Premium themes and Annotum not included
%d bloggers like this: