CharlieMC (charliemc) wrote,
CharlieMC
charliemc

  • 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
Subscribe

  • The First Day of Autumn -- Lots of Errands!

    Yesterday Marilyn vacuumed my bedroom (this included using a brush on my rug to pull up Johnnie's fur). She's been asking if she could do it for…

  • Filthy Weather! Fitbits Still Rule.

    Senator Elizabeth Warren was impressive tonight, too. I'm trying not to be political (as I've said before), but these two women have touched me. I…

  • Barry Carlson's Memorial

    Marilyn and I attended the memorial of Barry Carlson today. It was very important for us to be there, not only on a personal level, but because we…

  • Post a new comment

    Error

    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.
  • 3 comments