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

Eva updated their profile
4 hours ago
Vlada and Lady are now friends
Dec 3
Paul Hazelden posted a discussion
I have accidentally deleted a comment in an article.  Is there a way to undelete?  Thanks!
Nov 29
Sonam Sharma updated their profile
Nov 17
Mark Wood updated their profile
Nov 17
williamparker updated their profile
Nov 9
Pam Givens replied to Pam Givens's discussion
posting an article
"Thank you so much...I'll watch for you so we can chat."
Nov 3
Alex - Rosas † Negras replied to Pam Givens's discussion
posting an article
"I'll come and check later, let's see if we can resolve it"
Nov 3
Pam Givens posted a discussion
I'm having a difficult time posting an artist inverview with images.  They come out with to much…
Nov 2
Marly posted a discussion
Hello!  As the title states, I'm currently looking for a way to change the names of certain…
Oct 28
Inza Works updated their profile
Oct 19
APOSTLE TEYSHANA WILEY liked ⚡JFarrow⌁'s discussion I Wrote a Book about Ways to Monitize Your Community
Oct 18

Meanwhile, you can check our social media channels