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

Scott Bishop and Bizz are now friends
10 hours ago
Suzie Nielsen is now friends with Bizz and Rosas † Negras
yesterday
snow wolf aka lisa adams updated their profile
yesterday
Katherine Virginia Johnston updated their profile
Friday
Rosas † Negras replied to Suzie Nielsen's discussion
Make me love Ning 3.0
"you are welcome ... any question, as you can see, we are all ready to help you"
Thursday
Scott Bishop replied to Scott Bishop's discussion
Photo Slideshow Embed for N2
"This is great but you lost me at <script>, lol. 
Are you for hire or can you recommend someone? 
Th…"
Thursday
Cindy Dean Mccoy posted a discussion
 Did anyone else do the "Thank you for your loyalty" survey and never hear back from the manager ab…
Thursday
Bizz replied to Suzie Nielsen's discussion
Make me love Ning 3.0
"Hi Suzie
First off I would say don't worry about all the SEO stuff as you have a good member base a…"
Thursday
Suzie Nielsen replied to Suzie Nielsen's discussion
Make me love Ning 3.0
"Thank you! Nice site!
 "
Thursday
Alex Ning Support replied to David Shaw's discussion
Unexpected $4.50 NING Application Fee
"Hello David,
It's true, we take a 5% fee of each transaction, plus Stripe or PayPal takes their fee…"
Thursday
Alex Ning Support replied to Anastasia_Ning_Support's discussion
Activity feed update
"Hello Kinga,
Would you mind specifying what you mean by 'The Discussion group changes'?
If you mean…"
Thursday
Florian Ehrlichmann, First Visit Of Ecom, Zacchary and 12 more joined Ning Creators Social Network
Thursday
More…

Meanwhile, you can check our social media channels