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

Updated 06-25-2020

All the features of Ning 2.0 with  Ning 3.0 responsiveness.. ;) This code has been updated. It'll work on any layout but it works the best with the (A) layouts ( layout A1 - A4)

Tested and working in all newer browsers IE 9, 10, 11 - Firefox - Google Chrome - Safari. for cell phones, Laptops, PCs, Macintosh and yes TVs....

The fullwidth portion of this code also works in IE 7, 8. for Laptops, PCs and TVs...

It's compatible with all operating systems...

Compatible hardware - cell phones, Laptops, PCs, Macintosh and yes TVs....

Most pages will fit on the smallest of cell phones but I recommend a screen resolution of 480 pixels and wider. But like I said most of the network will fit on screen resolutions of 250 pixels and greater.

With this code your N2 will pass Google developers, mobile friendly test, without using Nings mobile app.



click here to see it live on "The Constitutional Conservatives".

 

If anyone would like help setting this up I'll be more than happy to give you a hand.

GEOCOMs Ning 2.0 Responsive Fullwidth Network v5 part 1

Part 1 goes in your (ad-box above the header) Make sure you press the HTML button before inserting the code.

<meta name="viewport" content="width=device-width, initial-scale=1" ></meta><link rel="stylesheet" type="text/css" href="https://storage.ning.com/topology/rest/1.0/file/get/14338574?profile=original" id="N2_R_F_W_N_v5_P1" ></link>

   

Part 2 goes in your (custom code box)

The video enhancements come with my "profile text box video mod". To turn the mod on change the ID name in the video enhancement script from this  id  " id='gframe' " to this id   id='MOD_FN' ..

<!-- Start GEOCOMs Ning 2.0 responsive fullwidth network v6 part 2 -->
<script src="https://storage.ning.com/topology/rest/1.0/file/get/6335680082?profile=original" type="text/javascript"></script>
<!-- START Ning 2.0 Video enhancements -->
<script src="https://storage.ning.com/topology/rest/1.0/file/get/6359602678?profile=original" type="text/javascript" id='gframe' class="gf_helper" ></script>

 

Part 3 goes in your (design studio CSS session)

/* Start GEOCOMs Ning 2.0 responsive fullwidth network Part 3 */
@media screen and (max-width:1144px)  {
DIV#xg.account.external-auth DIV#xg_body,        
DIV#xg.account.external-auth .xg_lightborder{
     width: 92%!important;
     min-width: 100px!important;
     max-width: 500px!important;
    left:0px!important;
    right:0px!important;
    margin-left:auto!important;
    margin-right:auto!important;     } }
@media screen and (max-device-width:1144px)  {
DIV#xg.account.external-auth DIV#xg_body,       
DIV#xg.account.external-auth .xg_lightborder{
     font-size: 34px!important;
    line-height: 35px!important;    } }
@media screen and (max-width: 760px)  {
table.categories p, table.categories ul {
    padding-left: 0px!important;
    padding: 3px!important;
    margin-top: 0px!important;}
  TD.xg_lightborder H3{
    margin-top: 70px!important;
    margin-left: 0px!important;
    padding-left: 0px!important; }
BODY TD.xg_lightborder {
    padding-right: 0px !important;
    padding: 2px !important;
    width:45%!important;}
BODY .xg_theme TD.xg_lightborder,
BODY .xg_theme th.xg_lightborder{
  width:45%!important;
  min-width:45%!important;
  max-width:45%!important;}    
BODY .body_events_main ul.clist div.tb {
    margin-left: 10px;
    margin-top: 110px;}
BODY .body_events_main ul.clist li a span.image {
    margin-right: 16px !important;  } }
/* End Ning 2.0 responsive fullwidth network Part 3 */

 

 

 

 

557925?profile=RESIZE_480x480

maB N_2.0_FWN_mobile_app_V3.0.js

 N2_GEO_mod_RT_v2.5.044_3x.js

N2_GEO_mod_RT_v2.6_3x.js

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

  • Hey George, dumb question probably: What and where is the "ad-box above the header"?

    • Hello Scott :-)   ---

      To enable the ad box above the header. Go to your "dashboard"  select the tab called "feature layout" at the bottom of the page you'll find the option to enable the above header add box. Check mark the box and select save. Then go back to your homepage you'll find the edit button for the ad box above the header on the upper right-hand corner of the webpage.

      3237861?profile=RESIZE_1024x1024

      3237913?profile=original

  • Turned it on! Wow!!! Check it out. Surf Community. Super easy too.

    George I have a few nick-picky items I hope I can get help from you with them.

    1. Is there any way you can make the sidebar thumbnail icons in bigger?
    2. My nav-bar is missing a big chunk over on the left side (viewing widescreen). Is there anyway to at least center the nav-bar?
    3. When the screen is narrowed the nav-bar turns to a nav-button but it does not work. Any way to fix this?
    4. I noticed on your beachcats site you have a nice button for the "+Add Videos", etc and the "View More" buttons. They were that way on my site too but the code somehow got lost in transition. Do you have the code for that?
    • Hello again Scott. :-)  
      I added the navigation centering to part one of this code so replace the one you're using in your ad box above the header with the new one in this discussion.  

      3237906?profile=RESIZE_1024x1024

      It's really strange that your navigation button is not working. Try adding this code to the top of your custom code box above everything else. If that doesn't make the button work try adding it to the very bottom of your custom code box underneath all the other codes.

      <!-- cell menu button JQ -->
      <!-- Custom Code box -->
      <script type="text/javascript">
      jQuery(document).ready(function(){
          jQuery('#hidenav').live('click', function(event) {       
              jQuery('#xg_navigation').toggle('show');
         });
      });
      </script>


      And this is some styling for the add buttons. The code goes in your design studio CSS section


      /* Add button style */
      /* design studio CSS session */
      a.xg_sprite.xg_sprite-add, li.right a {
          background-color: rgb(250, 250, 250) !important;
          color: #000;
          border-radius: 10px 0px;
          box-shadow: 0px 10px 5px rgba(0, 0, 0, 0.5) inset;
          outline: 0px none;
          padding: 0px 4px !important;
          border: 2px solid rgb(19, 225, 240) !important;
          text-align: center;
          width:auto;}
      /* END Add button style */



      To make the icons bigger in the right-hand column I'll need you to add something to that column that has the icons.

      • The nav button code worked but the centering of the nav-bar didn't. 

        Button styles worked like a charm. 

        As for the bigger icons I meant the left-hand column, you know my other right :) 

        Sorry I've been a little absent. I have a big activity weekend and I'm sneaking in some Ning time right now. 

        • That's great the navigation buttons working and the styles you wanted. The navigation is not centered because you didn't replace the stylesheet with the new stylesheet in part one of the code in this discussion. I did make some of the icons bigger for your G3 phone view..

          So just replace the code in your ad box above the header with this one. :-)

          <!-- Start GEOCOMs Ning 2.0 responsive fullwidth network part 1 v2  -->
          <!-- add box above the header -->
          <link rel="stylesheet" type="text/css" href="https://storage.ning.com/topology/rest/1.0/file/get/964749979?profile=original" />
          <!-- End Ning 2.0 responsive fullwidth network -->

          • Is there anyway to make the header and the nav-bar go all the way across the screen with this template?

            • hello Scott.. Sure that should be a simple thing I'll work on it Monday and get back to you as soon as possible. You have a great weekend Scott.

            • Okay Scott the header is set to 100% width and 95% for the xg_body.. :) Just replace part one of this code with the code in your above header add_box.  See image below..

              3237917?profile=RESIZE_480x480

              • Beautiful. You're awesome George!

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

LEO Mobile App Builder updated their profile
Tuesday
Aase Lillian replied to Aase Lillian's discussion
Community - activity page
"Ok, thank you. Please send me details as I have no idea on how to do it. "
Mar 19
Aase Lillian and ⚡JFarrow⌁ are now friends
NC for Hire
Mar 19
⚡JFarrow⌁ updated their profile photo
Mar 18
⚡JFarrow⌁ replied to Aase Lillian's discussion
Community - activity page
"Yes you can add emojis to your community pretty much anywhere you like.
If you need some help…"
Mar 18
Aase Lillian updated their profile
Mar 18
Aase Lillian posted a discussion
Hi all. Is it possible to add emojis to the community? I also wish the activity page to include…
Mar 18
Donna MacShoe updated their profile photo
Mar 6
Adul Rodri is now friends with ANGE.L LUAR and Margarida Maria Madruga
Feb 14
Shweta Sharma updated their profile
Jan 26
catherine martin updated their profile
Jan 16
Donna MacShoe updated their profile photo
Jan 15
More…

Meanwhile, you can check our social media channels