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

Forum

Thanks dave for the idea and the snippets of codes and you're welcome for the tabs  :-)

You can change the color Of the text by changing the colors black and white in the code below. White is the the color of the mouse over affect.

you can change the width of the main tabs by Lowering the numbers in this line of code min-width:165.4px!important; its the very last line

Right click on the images and open it in a new tab to get a better view

Dark tabs

this code goes in your NC custom code box

<link rel="stylesheet" type="text/css" href="http://api.ning.com:80/files/DqaYw0w2aP9SPR31*jBnBGCANr8a4CW3TUXswkt2is50tFfUSIyhBxMYZBMhXfa4ygnTtjVqEs1UYlkhkDwDlavbAgJZZ9HY/1059731831.css" />

<style>
DIV#xg_navigation .xg_subtab SPAN{color:black!important;
  transition:all 1s ease-out;
  -webkit-transition:all 1s ease-out;
  -moz-transition:all 1s ease-out;}
DIV#xg_navigation .xg_subtab SPAN:hover{color:white!important;
  transition:all 1s ease-out;
  -webkit-transition:all 1s ease-out;
  -moz-transition:all 1s ease-out;}
DIV#xg_navigation  A{opacity: 0.86!important;
max-width:165.4px!important;
min-width:165.4px!important;}
</style>

light tabs

this code goes in your NC custom code box

<link rel="stylesheet" type="text/css" href="http://api.ning.com:80/files/DqaYw0w2aP-ekVNNeorzizphrCJVEtaEghwjpQax9nZjpFIET5ZnHQ7fxnF2-MaXd7GfQxphN-M7AeXcIFSA5WDfWfRWDxYT/1059731840.css" />

<style>
DIV#xg_navigation .xg_subtab SPAN{color:black!important;
  transition:all 1s ease-out;
  -webkit-transition:all 1s ease-out;
  -moz-transition:all 1s ease-out;}
DIV#xg_navigation .xg_subtab SPAN:hover{color:white!important;
  transition:all 1s ease-out;
  -webkit-transition:all 1s ease-out;
  -moz-transition:all 1s ease-out;}
DIV#xg_navigation  A{opacity: 0.86!important;
max-width:165.4px!important;
min-width:165.4px!important;}
</style>

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

Join Ning Creators Network

Email me when people reply –

Replies

  • Beautiful

    • thank you classic :-) you have a great day

      • nice job George! I was looking for some new tabs to replace the old default ones, these are great, good work!

      • Anyway to change the apple to something else?

        • yes there is just replaced the url in this line of code and add it to the code above

          DIV#xg_navigation UL.xg_subtab A:hover {
            background-image: url(http://api.ning.com:80/files/uKM9hq-hRI9e9FYHWmgH*rga3BVZtKOy1GP2njqm8Higc8GwwwC0KPiEvbbYR3Oc2lyjYZlBjhaibPEuDkfzvA__/Apple2_lvgmain.jpg)!important;
            background-size:100% 100%!important;}

          Thank you for the compliment and you're welcome Armani

          • And use this one for all tabs mouse over fx the one up above is only for the subtabs

            DIV#xg_navigation .xg_subtab A:hover {
              background-image: url(http://api.ning.com:80/files/uKM9hq-hRI9e9FYHWmgH*rga3BVZtKOy1GP2njqm8Higc8GwwwC0KPiEvbbYR3Oc2lyjYZlBjhaibPEuDkfzvA__/Apple2_lvgmain.jpg)!important;
              background-size:100% 100%!important;}


            • Hey George, I have access to my advanced css box again LOL now, I was looking to add the WK logo in replace for the apple, does any of this code go into the advanced css box or is this all going into custom code?

              • it all goes into your NC custom code box..

                make sure you put the image code above inside the <style> with the other codes

                example it should look like this in your custom code box.

                <link rel="stylesheet" type="text/css" href="http://api.ning.com:80/files/m9wY6nHswW7KYgA1Z9GMe5n-0r6lN70TXGvTdxNKiNG7dZLiaTKJkiqWdC*uAgRGD-up-1Mx17CT4b4ps0T395wTRaf2F2rr/1059818879.css" />

                <style>
                DIV#xg_navigation .xg_subtab A:hover {
                  background-image: url(http://api.ning.com:80/files/uKM9hq-hRI9e9FYHWmgH*rga3BVZtKOy1GP2njqm8Higc8GwwwC0KPiEvbbYR3Oc2lyjYZlBjhaibPEuDkfzvA__/Apple2_lvgmain.jpg)!important;
                  background-size:100% 100%!important;}
                DIV#xg_navigation .xg_subtab SPAN{color:black!important;
                  transition:all 1s ease-out;
                  -webkit-transition:all 1s ease-out;
                  -moz-transition:all 1s ease-out;}
                DIV#xg_navigation .xg_subtab SPAN:hover{color:white!important;
                  transition:all 1s ease-out;
                  -webkit-transition:all 1s ease-out;
                  -moz-transition:all 1s ease-out;}
                DIV#xg_navigation  A{opacity: 0.86!important;
                max-width:165.4px!important;
                min-width:165.4px!important;}
                </style>

                • gotcha! implementing now, what a great tip...it looks like the tabs are "getting kunnected" hahahaha! its what a member said and thats what prompted me to write you about it asking if I could change the image so lets see how this goes! *heads back to WK to try it our* LOL

                  • message me a list of things you want removed from the stylesheet or what you want to keep in the stylesheet since you were changing the tabs I'm going to remove the tab codes from your stylesheet.  That way you won't have your subtab Animation from the previous tabs

This reply was deleted.

Search the Creators Network

Latest Activity

Randy L. Vollett replied to Allison Leahy's discussion Changes to Ning 3.0 Based on Your Feedback
"The last I heard we would be forced to migrate to 3.0 this month. Is this true or did they extend i…"
9 minutes ago
Scott Bishop replied to George H. Compton IV's discussion (TIP) Ning 2.0 responsive fullwidth network at any screen resolution. :O Cellphones to TV's ;)
"Beautiful. You're awesome George!"
21 minutes ago
Randy L. Vollett replied to Allison Leahy's discussion Changes to Ning 3.0 Based on Your Feedback
"How about we do a ticket flood. Think they would get the message we are fed up?"
57 minutes ago
Strumelia replied to George H. Compton IV's discussion (TIP) Ning 2.0 responsive fullwidth network at any screen resolution. :O Cellphones to TV's ;)
"Interesting thought, Jim."
1 hour ago
Strumelia replied to Theresa Happe's discussion Looking for someone to switch my site for ning 3.0
"Theresa, once you move your site from 2.0 to 3.0, you will no longer have the ability to archive or…"
1 hour ago
Strumelia replied to John McDonald's discussion Upcoming Ning Releases and Roadmap
"Hi John!   Any new developments or updates since you wrote this last summer in 2013 ?  "
1 hour ago
Roy Simmons replied to John McDonald's discussion INTRODUCING NING 3.0: THE RE-IMAGINING OF OUR PRODUCT
"I know, they have us by the short and curlies!! No way to move to anything else, no sign of an upgr…"
1 hour ago
Strumelia replied to Allison Leahy's discussion Changes to Ning 3.0 Based on Your Feedback
"Hi,
Any more changes to Ning 3.0 coming?  Or is this ...it ?"
1 hour ago
Strumelia replied to Allison Leahy's discussion What are you most excited about?
"Exciting times, yes I'm excited ~!      =8-*"
1 hour ago
Strumelia replied to Allison Leahy's discussion Let's Talk About Ning 3.0
"we're pretty sure you're bubbling over with excitement and…more questions. 

That's a sure bet !…"
1 hour ago
Donna Mac replied to John McDonald's discussion INTRODUCING NING 3.0: THE RE-IMAGINING OF OUR PRODUCT
"It's called "imagine your community is somewhere else""
1 hour ago
Strumelia replied to John McDonald's discussion INTRODUCING NING 3.0: THE RE-IMAGINING OF OUR PRODUCT
"John says on March 11, 2013....


So… What happens to Ning 2.0?
We know this question is at the top…"
1 hour ago
Strumelia replied to Alex's discussion Ning 3.0: Our Progress So Far
"Hi Alex, any updates since you posted this...a year and a half ago?  .........

===================…"
1 hour ago
JFarrow replied to Traddie's discussion Member Map Not Working
"here are some instructions I wrote for making your own member map 
How to Map Your Members on a Nin…"
1 hour ago
Strumelia replied to Traddie's discussion Member Map Not Working
"Such apps are no longer supported by Ning.     Yet another great 'upgrade'."
2 hours ago
Strumelia replied to Jack Smith's discussion Paid Access
"Are you on Ning 3.0?  I didn't think 3.0 has Paid Access feature.
What do you mean when you say you…"
2 hours ago
George H. Compton IV replied to Vickie's discussion PLEASE HELP@!!
"Your network appears to be up and running again. Well it's loading in my browser anyway :-) you hav…"
3 hours ago
George H. Compton IV replied to George H. Compton IV's discussion (TIP) Ning 2.0 responsive fullwidth network at any screen resolution. :O Cellphones to TV's ;)
"Okay Scott the header is set to 100% width and 95% for the xg_body.. :) Just replace part one of th…"
3 hours ago
George H. Compton IV replied to George H. Compton IV's discussion (TIP) Ning 2.0 responsive fullwidth network at any screen resolution. :O Cellphones to TV's ;)
"Thank you Jim :-) you have a great day"
3 hours ago
Ning via Facebook

A Basic Online Community Wireframe http://ow.ly/BZqk4

A Basic…

More…