CharlieMC (charliemc) wrote,

  • Mood:

Making a Box in an Entry at LiveJournal

A member of l_j_for_dummies asked how to create a 'box' containing colored text. As it's not possible to use the proper coding in a comment (!!!) to explain, I'm posting the 'How To' here in my own blog, so I can link it as a Reply.

Creating colored text inside a 'box' can be done easily with a combination of HTML and CSS. I do this all the time in my own LJ blog. For example, take a look at THIS entry, where I've actually used a background image behind my text.

Two Very IMPORTANT Notes:

  1. If you're changing colors EVER in your blog, keep in mind that your LiveJournal Friends will be using their own 'Friends View' to read what you post. This means you need to ALWAYS set the background color (using background-color), so you can be sure the border and text will actually be visible in the colors you want to display.
  2. Having set a background color, you need to be sure to set a color for the text and the border [see the example below].
Here's the code to create a border around text -- and change the text color, as well:
<div style="background-color: #FFFFFF; color: #00FFFF; border: 1px solid #00FFFF; padding:4px 5px 4px 5px; text-align:left;">You can put your text here.</div>

Which makes a box around (colored) text that displays like this.

If you're not familiar with HTML Colors, then google and use a chart to get the proper codes (such as #000000, or #00FFFF).

background-color will be the background color of the 'box'

color will be the TEXT color of the 'box'

In the border code, 1px defines the size of the line - solid defines the type of line and #00FFFF defines that the color used is Aqua.

You can leave out the padding code if you want, by the way.

There are numerous additional things you can do to the code, like define the actual font used, the font size, the font weight (bolding, for example) and on and on.

If you'd like to learn HTML and CSS, there are many free tutorials available online. You can google to learn more.

Good luck!

==CharlieMC, assistant moderator
Tags: 2008, box-code, css, html, lj-for-dummies, september-2008

  • Reading! I Love It!

    A new favorite author — what a delight! Actually, coming BACK to reading after being away from it is sheer joy. I have spent my entire life reading…

  • Marilyn's Presentation -- the Murdock Talks

    Tonight Marilyn gave her presentation for the Murdock Talks at the Museum of the Oregon Territory on Tumwater Drive in Oregon City (run by the…

  • Marilyn is Sick

    Marilyn has been sick with a bug (flu?) since Wednesday. I mean really sick. I sat up with her all night (until 4:00) Wednesday night. (She on the…

  • Post a new comment


    default userpic

    Your reply will be screened

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.