Current status of the Ning Platform is always available on the Ning Status Blog.

FORUM

NC for Hire

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.
    Welcome Box
  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;}

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Replies

  • i have inserted the code and changed the color value but nothing happens it stay green :(
    • NC for Hire
      This line of code does not change the color of the box for you?
      #welcome.welcome-nc { background-color:#CC0000 !important; color:#FFFFFF !important; }

      The background-color is the color of the box. Add all of the code to the bottom of your Advanced CSS. This may help.
  • Any idea how I change the right-hand side of this ie. the invite friends and add a different icon?

    Much appreciated


    Nigel
    • NC for Hire
      No, sorry Nigel. I wouldn't know without investigating. If I find a way, I'll let you know.
      • Thanks Jen, appreciate the prompt response. I noticed on your example one pic had customize your page and the other had add photo - what's the difference?
        • NC for Hire
          Actually, I'm not sure. I'm not good at giving you answers today, am I? Sorry about that. :-)

          I'm not sure if the platform randomizes the icons, or if I happened to capture the screen on 2 different occasions and the platform was updated between the screen captures.
  • Hello Jen,
    I have followed all your instructions above, however, when I include a second paragraph to my welcome message, the space between the lines of the second paragraph increases. The curious thing is that when I paste the same text to a Forum/Discussion box, the message look fine! Therefore, I suppose the text and code are writen right... To illustrate the issue, I have attatched an image of how the Welcome box is looking like with the issue.
    I wonder if you have seen this issu before and knows how it can be solved?
    Thanks in advance!
    • NC for Hire
      Yeah, you really need to keep the message short, so it matches up with the height of the icon area. You could try adding the line-height attribute to your span style and see if it helps:
      <span style="font-size:11px; line-height:1.0em!important;">
      Best,
      Jen
  • This is just what I was looking for in the past day! Thanks to John for linking me to this tutorial! I am not good with CSS...I copied the following into my CSS box: #welcome-text a {color:#ffffff!important; text-decoration:underline;} But the link is still the SAME color as the background color and thus invisible. HELP! (though I did change the color to something else).
    • NC for Hire
      To confirm that I'm understanding, your background color is white too?

      Actually, I can help better if you paste all of the code you added to your CSS, in regards to this tutorial.
This reply was deleted.

Announcements

 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Tyler Durbin replied to ⚡JFarrow⌁'s discussion
Yet Another Time Saver: Code for Finding Members Anywhere in US
"Whoa!  Awesome!!"
4 hours ago
⚡JFarrow⌁ replied to Bernard Lama's discussion
Tip: (Ning 2.0 and 3.0) How to add multiple custom navigation menus in Ning?
"I was thinking about this just the other day... wondering if there might be a way to collapse the s…"
5 hours ago
Sir Gissachance replied to marie b's discussion
Landing page : won't save ... fragile, slow and buggy
"Hi marie b,
I had the same problem and the only way mine worked was to open the landing page from t…"
7 hours ago
9jabook Abi John replied to Anastasia_Ning_Support's discussion
Why should I migrate?
"ning 3.0 is probably the biggest mistake ning has made imo . i ahve been on ning 2.0 for 10yrs ! a…"
11 hours ago
Anastasia_Ning_Support replied to Ana Massien's discussion
Leaderboards and Points
"Hi there!
This feature was launched as a way of encouraging members to be active and generate conte…"
11 hours ago
Anastasia_Ning_Support replied to Ana Massien's discussion
Emoji, @mentions and tags?
"Hello Ana!
These updates have been requested for a long time now, but unfortunately, they will not…"
11 hours ago
Anastasia_Ning_Support replied to Anastasia_Ning_Support's discussion
Step-by-step migration guide
"Hello Fred!

You can check the list via the link - https://www.ning.com/ning3help/content-that-cann&hellip;"
12 hours ago
Anastasia_Ning_Support replied to Anastasia_Ning_Support's discussion
Step-by-step migration guide
"Hi there!

Here is the list of content that cannot be migrated to 3.0 platform - https://www.ning.c&hellip;"
12 hours ago
Anastasia_Ning_Support replied to Anastasia_Ning_Support's discussion
NING is now available on Zapier
"Hi Steve!
Yes, for now, it is on 3.0 platform only. 
Best regards,
The NING Team"
14 hours ago
Anastasia_Ning_Support liked ⚡JFarrow⌁'s discussion Yet Another Time Saver: Code for Finding Members Anywhere in US
14 hours ago
Catherine Grenfell, Jacques Dufresne, Gym Whym and 6 more joined Ning Creators Social Network
14 hours ago
kostasgr replied to Ana Massien's discussion
Other possible future modules?
"+1 JFarrow !"
yesterday
More…

Meanwhile, you can check our social media channels