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

Hello everyone,

I am new to the ning network and I am helping develop a site. I have been trolling the forums, google, and other sites to try and customize our site the way we want it, but I am having trouble understanding the css, scripts, and how to make certain changes to the site. 

I've tried inserting social icons in the nav bar using the following link (Not realizing it was for a 2.0)

I've tried changing the navbar to look different or be more button without success. I am very frustrated and confused with many of the different tutorials I have seen, even ones that are for the 3.0 system. Screenshots don't match up sometimes using scripts and custom css doesn't seem to function...

So basically, this is what I need to figure out and I hope all you wonderful coders out there can help!

  • Adjust spacing between "Below Header" and top of "Content Area"
  • Change menu to button style or even color changes to font
  • Add social icons to "Ningbar"
  • Add text next to "Add New Post" + sign.
  • Fix Facebook Sign in

Here is the site as it current stands. I had to use custom html for the ad placements, but I know there is another way to do this and I am so frustrated about it.




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

Join Ning Creators Social Network

Votes: 0
Email me when people reply –


  • Try this to adjust the margins on your "below the header" ad box.  Place in Design Studio/Custom CSS section.  Tweak the #s as needed but check your other pages and see if their appearance is affected.  fwiw many of us have asked for other layouts with less white space and padding.  If memory serves Ning said yes, that would be coming but who knows "when".   Hope this helps.

    .belowHeaderAdHtml {
       margin-bottom: -20px;
       margin-top: 10px;

    I changed my navigation buttons using this.  I created the button 24x20 on and uploaded to File Manager so you can create your own color and "swap" it out for my URL in the code.  Problem with navigation is it very often requires more tweaking on the settings to get it right.  At least for me.

    /*navigation buttons*/

    .navbar > ul > li, ul.xg_subtab li, .navbar > ul > {
      position: right;
      border: 0.1em solid black;
      font-weight: bold;
      margin: 0.1em;
      padding: 0.9em;
      text-transform: uppercase;
      background: url("") repeat scroll 0 0 transparent;

    /*change color of tab your are on*/
    .navbar > ul > > a {
        color: #149208;


    I'm running out the door right now so that's as far as I can go at the moment.  On the social icons tip in the nav. bar, I would try to ask SweetPotato on that discussion.  idk if anyone has adapted it yet for 3.0

    • Kos, 

      Can I hug you??? These 2 little things have helped me a lot.. I worked out a button menu, with only a few issues. The Home button for some reason has no padding on the left side but everything else is fine.  The below header looks so much better now. 

      I can't figure out how to change the mouseover color on the submenu's though.. any ideas?


      • Good morning Michael.  It looks like you adjusted the padding within the code and fixed that left nav. button.  Outstanding. 

        Now for the subtab hover, there's two approaches.  Do you merely wish to change the font color or change the color of the subtab itself?  Actually I'll just go ahead and include both here although you may only need the first.  Note:  You can copy and include the /* portion of the code - it just helps you keep track of what code affects what action inside your CSS box - it will not appear anywhere on your network.  Just change color as needed.  At least these are "according to Firebug".  Let me know if they work or not.  Don't want to have bad code lying around Creators. 

        /*change text color on subtab hover*/
        .subTab-item:hover > a {
           color: #ffffff;

        /*change subtab color when hovered*/
        .subTab-item:hover {
           background-color: #000066;

        • Kos, 

          That worked perfectly. I don't know how the padding changed for the Home button, but once I added the code you just sent it went back to the missing padding.  Now I am fighting with Facebook sign in and signup. lol pulling hair out, but thank you for your help so far. 

          Now I was going through pages and I noticed the button fix itself and then change again. Seems like it happens when you go to sub pages. I went to Contact/members and the menu (text) shifted left, but when I went Home, they shifted back. 


  • Still shifting left on sub pages..

    • Juggling way too many things today.  Can't wait for a vacation. *augh*  It's probably something staring me straight in the face.  Try

      li.xg_subtab  mainTab-item .mainTab-item:first-child {
         padding-left: 7px;

      • Kos,

        Tried the code.. Doesn't seem to work.. Tested it on Chrome and Safari.. Stumped


  • hi i did away with ningbar entirely and have floating fixed signin i have the social icons added to the ads at top box

    the spacings and everythings easy

    i got free time if you want to make me a temp admin and show me what u want i can do it

    i replaced the add + with an add image also same for edit and mobile menu

    heres what i did on mine

    let me know what ya want exactly and ill help u out

  • overall it looks good (for a rather plain layout but i think thats what u wanted for a more professional lokk)

    i think its coming along great

  • whats that search u added/

This reply was deleted.

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

Alina Langley replied to Suzie Nielsen's discussion
Ning 2.0 For Sale
"Do you atill have a NING 2.0 site? I am looking for one, please DM me :)"
Apr 12
Alina Langley updated their profile photo
Apr 12
Alina Langley updated their profile
Apr 12
LEO Mobile App Builder updated their profile
Mar 26
Aase Lillian replied to Aase Lillian's discussion
Community - activity page
"Ok, thank you. Please send me details as I have no idea on how to do it. "
Mar 19
Aase Lillian and ⚡JFarrow⌁ are now friends
NC for Hire
Mar 19
⚡JFarrow⌁ updated their profile photo
Mar 18
⚡JFarrow⌁ replied to Aase Lillian's discussion
Community - activity page
"Yes you can add emojis to your community pretty much anywhere you like.
If you need some help…"
Mar 18
Aase Lillian updated their profile
Mar 18
Aase Lillian posted a discussion
Hi all. Is it possible to add emojis to the community? I also wish the activity page to include…
Mar 18
Donna MacShoe updated their profile photo
Mar 6
Adul Rodri is now friends with ANGE.L LUAR and Margarida Maria Madruga
Feb 14

Meanwhile, you can check our social media channels