How To Customize the Welcome Box Rectangle

[Jen]

HOW TO CUSTOMIZE THE WELCOME BOX TEXT:

When a new member joins your Ning Network, they will see the new Ning Welcome Box. Note: Once your new member closes this box by clicking on the "X", it is no longer displayed.

You can customize the Welcome Box text, from your Language Editor.

Welcome Box Example with Custom Text

Let's get started.  Please be careful when changing code in the Language Editor. Fortunately, Ning has a "Reset Text to Original Version" button.

TIPS:

• You can add simple HTML and links. Be sure to keep your message short, or it will not fit in the box.
• Also, if you do not have premium service "Remove promotional links", you will have less space. The Ning Logo is displayed in top-left of Welcome Box. I have inserted that image, too.
• Use an external editor to write your welcome box text. You can use a Forum/Discussion box and take advantage of the WYSIWYG (what you see is what you get) text formatting features.
• And, it's always best to save your "source" code to a text or HTML file on your hard drive.

Instructions:

1. Click on your Manage Tab.
2. Click on Language Editor.
3. Select your language (if English, make sure you select US or British versions, appropriately), by clicking on Edit next to language.
   
4. In top-left search box under "Original Text – Your Language", search on "Here are a few things you can do right now…" - - without the quotes.
5. The Search will return 1 box (see above), that contains the previous search string.
6. Insert or start typing your message text, before "Here are a few things you can do right now…"  You can delete the original statement, altogether. You should still be able to search, and find this box in the Language Editor, with the original or new text.
   • Be sure to make your custom text short and sweet. You have a limited amount of space in this box.
   • You'll notice in the example, we're using the span tag to change the font-size. You can add your style within box, or Advanced CSS.
   • After you have completed your custom text, click on SAVE.
7. Be sure to create a test member account, and check your customized message.

HOW TO CHANGE THE WELCOME BOX COLORS:

The Ning platform automatically chooses the color, based on your theme. If you want to change the background color, add this code to Manage/Appearance/Advanced CSS. Change the hex color code, to the color you choose.

// The following line changes the background to deep red, and the text color to white.

#welcome.welcome-nc { background-color:#CC0000 !important; color:#FFFFFF !important; }

Be sure to click on SAVE.

 

EXTRA CSS code I use, to polish up the custom text:

/* Change background and font colors for Welcome Box */
#welcome.welcome-nc { background-color:#CC0000 !important; color:#FFFFFF !important; }

/* If you add links - - change color and underline links */
#welcome-text a {color:#ffffff!important; text-decoration:underline;}

 /* Remove some margin space below the Ning Logo in non-premium */
#welcome h2 { margin:0 0 .50em; }

 

HOW TO REMOVE THE WELCOME BOX:

If you don't want the new Welcome Message Box/Banner to be displayed, go to Manage/Appearance/Advanced and add this code:
 #welcome { display:none !important; } Be sure to click on SAVE.

Also, make sure your links on the right (under the icons) are an appropriate color:

/* Change link color below icons on right */
#welcome-icons a {color:#FFFFFF!important;}

[Adina]

No background is a dark blue. The above code is all I added.

[Jen]

Adina,
There are several attributes with code above. I can't help unless I can see the exact code that you've added to your site.
Best,
Jen

[Adina]

But I listed the code and only the code that I added. It was verbatim what you wrote above under 'if you add links' & only changed the color to 'ffcc00' -- The code started with # and ending with ; and } ... Is that wrong?

[Adina]

Jen, I still can't get it to work...I'm SURE it's my lack of coding knowledge/CSS...but I'm not sure where I messed up.
Here is what I see once I'm done:

Here is the code I added:
#welcome.welcome-nc { background-color:#C1c8e3 !important; color:#FFFFFF !important; }
#welcome-text a {color:#ffcc00!important; text-decoration:underline; }

So essentially the hyperlink area blends in with the background and the text AFTER the hyperlink area is underlined. Am I NOT supposed to have both of those codes? HELP!

[Richard Hellier]

Hi Jen, I don't know if I'm being stupid of if Ning have altered anything since you wrote this post but I've popped into the Advanced tab within Appearance to get at #welcome and it's not there.

 

Can you advise further please?

 

[Jen]

Hi Richard,

I cannot help out without more information. What are you trying to accomplish from this discussion? For example - - are you trying to remove the Welcome Box altogether, or format something?

Best,

Jen

[Richard Hellier]

Was simply following your instructions Jen anajd just couldn't see #window mentioned in the CSS

[Jen]

Sorry Richard. I truly do not know what you are asking.

Best Regards,

Jen

[Richard Hellier]

Errr, ok. One last try then Jen.

I was looking at trying to hide the welcome box newly registered members see and after a quick search here I am. Going back to your original post you mentioned this. However after trying to find '#welcome' div in Ning's CSS qirhin Appearance > Advanced, I couldnt see it.

Thats about it.

Fingers crossed that all of the abive makes sense

[Jen]

Richard,

You won't find the code. You need to add it, to hide the box:

HOW TO REMOVE THE WELCOME BOX:

If you don't want the new Welcome Message Box/Banner to be displayed, go to My Network/Appearance/Advanced and add this code:
 #welcome { display:none !important; } Be sure to click on SAVE.

 

Best Regards,

Jen

[Richard Hellier]

How stupid do I feel right now ;0( - thanks for re-pointing out the obvious Jen.

[yasir bukhari]

i add that code in advance css

#welcome.welcome-nc { background-color:#CC0000 !important; color:#FFFFFF !important; }

 

but back ground color not chang