New to Ning 3.0 Need help and suggestions

[Michael Manfredo]

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

[Kos]

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;
}

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

[Michael Manfredo]

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

[Kos]

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;
}

[Michael Manfredo]

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

[Michael Manfredo]

Still shifting left on sub pages..

[Kos]

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;
}

[Michael Manfredo]

Kos,

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

M

[soaringeagle]

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

[soaringeagle]

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

[soaringeagle]

whats that search u added/