How To Make Content in Profile Page "Text Box" Stand Out

[Jen]

Have you ever noticed when you add content to the main "Text Box", on your Ning Profile Pages, it tends to get lost in the other page content?

Typically, most people place important information like "About Me", in the main text box. So, we don't want it to get lost on the Profile Page. The best way to make your Profile Page "calling card" content stand out, is by adding one of the following:

1. Add a background image.
Note: This method is unique for each case, depending on the type of background image you use. I suggest using background color or border.
2. Add a background color.
3. Add a background border.

Check out my profile page on Creators, to see an example of a background border, and notice how the content stands out on the page.
Jen's Profile Page

Here are the steps for each method.

Summary:
For all three methods, the key is to wrap a DIV around all of your content. At the very top of your content add your start DIV tag, with the style attributes (see below). At the very bottom of your content, end the </DIV>.

Also, add some padding between your content text, and the border or outer edge of the text box, by using the padding attribute within the DIV style (see below).

For color I'm using #003366 - a dark blue. Please change to suit your needs.

Instructions:
1. DIV for "Add a background image"
<div style="background-image:URL('your-image-path.jpg'); padding:10px;
background-repeat:no-repeat">Your Content Goes Here.</div>
Note: To center your image, add background-position: center;

2. DIV for "Add a background color"
<div style="background-color: #003366; padding:10px;">Your Content Goes Here.</div>

3. DIV for "Add a background border"
<div style="border: 1px dashed #003366; padding:10px;">Your ContentGoes Here.</div>
Note: adjust the border width, type (solid, dotted, dashed), and color.


Enjoy,
Jen

[Jayne]

I can't get the picture to show... The others work fine though...

[Jen]

Yep, I believe I've made a mistake, fixing it soon...sorry about that.

[Jayne]

Thanks Jen

[Jen]

It worked for me in a text box. I went ahead and added single quotes around the image URL just to be safe. I also added background position and no-repeat.

Let me know.
Best,
Jen

P.S. I can't for the life of me, get this discussion to stop changing my background position code. Give me a minute to figure this out.

[Jen]

Something is going on with text and comment boxes on Ning, about to report this. I could not enter the background-position: center; within the DIV example. I believe you'll get the picture, though.
Best,
Jen

[Andy Blakely]

Hi Jen - works great for me in the profile page text box (visit my profie to see) - not tried it anywhere else yet ~ many thanks

[Jen]

Nice job! Really makes your special content "STAND OUT"!
:-)
Jen

[Gary]

Thanks Jen...;)

GaryR

[Jen]

LOL!

[Jen]

I wonder if I should create a discussion "This is Jen!" LOL!

Thanks!
:-)