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

This stylesheet will add styles and animation fx throughout your whole network blogs, forums, groups, latest activity, comments and a whole lot more:-)

I put it into a stylesheet because of the amount of code it takes to do this.  So it's really easy to add and remove from your NC custom code box

If you'd like to view the Codes in The stylesheet just click here

click here to see it live on cross roads Fellowship

just add this code to the top of your NC custom code box.

<link rel="stylesheet" type="text/css" href="https://storage.ning.com/topology/rest/1.0/file/get/552832?profile=original" />

 

Remember everyone results may vary because of the differences in Ning networks. But I did spend week's working on compatibility for The different ning networks, layouts and themes..

This was design on a Ning pro account and tested on many Ning Networks

If you would like me to change anything in this code or remove anything for you just ask I'll be more than happy to help

 

Editing the colors in the stylesheet. in these codes just change the word transparent to any color you want.

this code will change the group's mouse hover color

    DIV.xg_module.module_groups LI.xg_lightborder:hover{
       background-color:transparent!important;}

    These three codes will change the activity feed colors

    .xg_module_activity .feed-story-status .status-update:hover{
       background-color:Transparent !important; }


    .xg_module_activity .feed-story-status .status-update{
       background-color:Transparent !important; }

    .xg_module_activity SPAN.comments-number {
       background-color:transparent !important; }

    This code will change The forum Mouse hover color

    .module_forum div.vcard div.topic:hover{
       background-color: transparent!important;}

    and this one will change the color of the blogpost mouse hover Color

     .module_blog .blogpost:hover{
       background-color:transparent !important; }

    And this code will change the red continue button

     A.xj_expandable {
       background:transparent !important;}

This code will change the color of the text in the continue button.

A.xj_expandable {
       color:#15c708;}


All module shadows in this code you can change the ( shadow colors #ccc ) for the shadow colors change all three ( Border colors #aaa ) and (  Border thickness 2px )

.xg_module {
   border:2px solid #aaa!important; -webkit-box-shadow:6px 6px 10px
   #ccc!important;-moz-box-shadow:6px 6px 10px
   #ccc!important;box-shadow:6px 6px 10px
   #ccc!important;-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
   filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#000000');}


    I believe that's all the major colors there are in the stylesheet

Here's two pic's of the main page here on creators with this stylesheet virtually added

Here's a couple more snapshots of the Main page and groups page.. right click and open them in a new tab to get a better view

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

  • NC for Hire

    An appreciable job done by George. Keep it up dude,

    • thank you Bernard coming from you that's a real compliment :-)

      you have a great day!!

  • WOW, ummm, I honestly don't even know where to begin! Lol. This is like 3 times the code you had before, and since I'm just learning CSS, I have no clue what each of those codes do! :) This will take a while to figure out which parts I have and which I should use, I fear having it too "busy?" Is that possible? Lol.

    Hmmm, perhaps a run on my test network...

    George, you're amazing sir! I bow to thee!

    For those curious to see how I've used George's codings, view them HERE

    • I'm sure you'll figure it all out Damion :-) these are all css codes they load instantly so it will not Slow down your webpage Loading time.

      this will Center your tabs :)

      DIV#xg_navigation{ width:975px!important;
        margin-left:auto;margin-right:auto; z-index: 9999!important;}

      3228574?profile=RESIZE_1024x1024

      • ***Edit***
        This code injection seems to have no effect... I wonder if I have deleted a container or something when I stopped the tabs from scrolling with the page. Therefore the code you've given me just now would work, if the container was proper? Is this a safe assumption?

        Also this code seems to conflict with the code I'm using to put the um.. vcard I think... (inbox, alerts, friends, etc.) in the top menu bar, instead of in a bubble in the left sidebar.

        ***End Edit***

        Awesome! Thank you very much George! :) Seems a lot of networks are down right now due to a GoDaddy attack from Anonymous. I'm supposed to be down too I think, as I am on GoDaddy hosting, but I don't appear to be having any problems.

        I tried the "Landing page," and didn't like it. I chose to put the main slideshow on the right so it is larger, but now it can't appear in the sidebar on other pages... is there a way to put the slideshow on the right as seen above on the main page, and the sidebar for every other page? Or a fix of any kind?

        Once again, thanks for all of your help!

        PS, still working on the animated header banner. :) Hoping to finish it tonight.

        LOVE THE CODE!
        GEORGE = CODE GOD!!

        Enter "GCG" on your next post if you agree!

        • I guess I would have to be logged in to see exactly what you're talking about with the inbox and such if you would like to create a dummy account so I can login send it to me in a message.

          • I finally got the navigation bar to center using your code. :) Thank you George!

  • me gusta

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

Kathleen (SunKat) updated their profile
Feb 20
Scott Bishop posted a discussion
OMG! AI does it all. Anything you want to light up your Ning site, just ask Google AI. That's what…
Feb 5
Scott Bishop replied to Alex - Rosas † Negras's discussion
HTML Browser Popup Window Generator,possible with a click to have the window open for ning or other pages, this is my example
"Where at in a 3.0 website do you paste the code to? "
Feb 3
Scott Bishop replied to George H. Compton IV's discussion
(Ning 2 and 3) welcome / sign-in and sign-up pop-up module. Updated Aug 24, 2017
"Hi George, I'm not sure if this tip has been outdated or for some reason it's not working on my…"
Feb 3
Eva updated their profile
Jan 28
Scott Bishop replied to Scott Bishop's discussion
Please Help! Members Have No Way of Posting Anything
"https://community.surfoutlook.com/
However, it's been solved. Ning helped me out with it. "
Jan 27
Alex - Rosas † Negras replied to Scott Bishop's discussion
Please Help! Members Have No Way of Posting Anything
"I don't remember your site, I'll check for you, can I have the link?"
Jan 26
Scott Bishop replied to ⚡JFarrow⌁'s discussion
🖼️ Improve Accessibility & SEO on Your Ning Photo Pages by Automatically Adding ALT Text from Photo Titles
"On your step 3 where you say "Paste in the script below", I'm not finding that. Did you forget to…"
Jan 25
Scott Bishop replied to Scott Bishop's discussion
Please Help! Members Have No Way of Posting Anything
"I think that setting was switched over to Admin as a default when I converted from 2.0 to 3.0…"
Jan 25
Alex - Rosas † Negras replied to Scott Bishop's discussion
Please Help! Members Have No Way of Posting Anything
"settings members must post, if you put ADMIN it is FORBIDDEN TO PEOPLE"
Jan 25
Scott Bishop replied to Scott Bishop's discussion
Please Help! Members Have No Way of Posting Anything
"I got an answer back from Ning Support within an day. It was a setting that somehow slipped out of…"
Jan 22
Scott Bishop posted a discussion
I just realized that my members can no longer post pictures, videos, blogs, events, or anything…
Jan 21
More…

Meanwhile, you can check our social media channels