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) https://creators.ning.com/forum/topics/insert-social-icons-into-your-navigation-bar

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.

eValleyCenter

Regards,

MIke

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 –

Replies

  • 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 http://datbuttonfactory.com 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 > li.active {
      position: right;
      border: 0.1em solid black;
      font-weight: bold;
      margin: 0.1em;
      padding: 0.9em;
      text-transform: uppercase;
      background: url("https://storage.ning.com/topology/rest/1.0/file/get/11508574?profile=original") repeat scroll 0 0 transparent;
    }

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

    3220067?profile=original

    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?

      Mike

      • 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. 

          Mike

  • 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

        M

  • 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 http://ww3.dreadlockssite.com

    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

Fernando Bisbal posted a discussion
There are people whose profile does not show the group block and we do not know which groups they…
20 hours ago
Fernando Bisbal posted a discussion
There are people whose profile does not show the group block and we do not know which groups they…
20 hours ago
Michael Rua Franco replied to Michael Rua Franco's discussion
Problems with Polyfill.io in my site
"Thank you so much for your reply Vlada "
yesterday
Future Skills Academy updated their profile
Oct 1
Eva Libre liked Karen Hardy's blog post Terrified about 3.0 upgrade
Sep 29
JUSTIN GREGG updated their profile
Sep 27
Vlada replied to Eva Libre's discussion
Ning 3.0 is antisocial!
"Found this post with more complaints about the Ning3.0 malfuntioning for members in the comments…"
Sep 21
Vlada replied to Michael Rua Franco's discussion
Problems with Polyfill.io in my site
"I just read your post here,now I'm no IT expert but I just went to your site and my antivirus didnt…"
Sep 20
Vlada replied to Eva Libre's discussion
Ning 3.0 is antisocial!
"Oh Eva thanks for this post,... Yeah Ning 03 sucks big time alright!!, you get no notifications on…"
Sep 19
⚡JFarrow⌁ replied to Zoe Dune's discussion
NING's Landing Page Issues, Third Party Options, Suggestions?
"I just sent you my contact info in a message.  Call me and ill talk with you about some options.."
Sep 11
⚡JFarrow⌁ replied to Eva Libre's discussion
Ning 3.0 is antisocial!
" One way to get your activites in groups to show up in your feed is to combine the feeds from…"
Sep 11
Eva Libre replied to Mar's discussion
Comments appearing in activity feed
"Yes, this is one of several problems with the Activity Feed in Ning 3.0!"
Sep 1
More…

Meanwhile, you can check our social media channels