(TIP) Ning 2.0 responsive fullwidth network at any screen resolution. :O Cellphones to TV's ;)

[George H. Compton IV]

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 */

 

 

 

 

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

[Jim Kinson]

George, this is awesome as usual. Why did we even have to do this 3.0 thing. They could have hired you to make this work and most all would have been happy. Great job, George.

Blessings,

Jim

[George H. Compton IV]

Thank you Jim :-) you have a great day

[Strumelia]

Interesting thought, Jim.

[Denis]

The whole big deal with Ning 3 was responsive responsive responsive responsive responsive when it could simply be done with Ning2 and save all the trouble. [sigh]

Well here comes my last bill with Ning

[Scott Bishop]

Hey George, I haven't seen anything missing on my site using your code. Am I missing anything? Surf Shot

[Scott Bishop]

Hey George, I haven't seen anything missing on my site using your code. Am I missing anything? Surf Shot

[George H. Compton IV]

Hello Scott, yes you are missing your alternate sign in and sign up buttons, it's a Ning glitch. Nothing to do with my codes. LOL :-)
they seem to be missing off a lot of Ning 2.0 networks. See images below.

[Scott Bishop]

Oooo, I see what you're talking about. Okay, earlier you had posted a fix but now it has been deleted. Did you delete it, or was there a fix to this? 

[George H. Compton IV]

Hello again Scott. :-) There is no fix :-( there was a ticket sent. They said it's appears to be some CSS in your design studio. Like usual. Blame it on the custom codes. LOL...

I removed all codes from my design studio. The icons were back. So I started placing codes back in one at a time until they disappeared again. There was only one code that made it disappear. So I left that code out. Lo and behold, the next day the icons are gone again. Like I said it's nothing to do with my codes. There are a lot of networks out there that are not using this code and they're still losing those alternate sign in and sign up icons. The buttons are still there but the icons for them or not.

For example this network is not using any of my codes, but the icons are still gone.

http://vudesk.com/profile/ismailshah

[Jim Kinson]

Your the man, George. I find it kind of fascinating how Ning blames everything on CSS codes that have been added. Like on the activity on 4himalone2.ning.com. I have it set so that comments on profile pages are not to be shown on activity , yet they are. When a ticket was sent to Ning, their comment was it is in CSS codes. George, if that is the case, why do they still appear after you took the coding out? Hopefully soon, they will be a product that we can be proud of again.

Blessings,

Jim

[George H. Compton IV]

Don't ask me why they came back temporarily when I remove that one snippet of code, but now I can remove all codes from the design studio and they still won't come back.

I still love the Ning networks just wish they would finish 3.0.

A lot of people were complaining about their next release "the archiver" but in all reality, that's the only way you own your content so it is a very important update. Please Ning give us events next LOL :-)

I'll give you a call later today. Jim

Blessings
George