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

    • Good morning lorianne. :-)

      If you'd like some help setting this up on your network, I'd be more than happy to help. :-)
      Hope you're having a wonderful day.

  • you are very kind George. i would love to do this, but right now I am up to my eyeballs launching  radio station for my network.  I am going to take a look at it at a later date because i do love the way it looks.

    thanks for offering, as always, you are the best!

  • Working great on Cross Roads Fellowship, George. Love all the features that you have created and and implemented on both sites.

    May the Lord bless you,

    Jim

    • Thank you Jim. :-)  Sorry I missed your call today. Tomorrow's going to be very busy for me here at work but I should have time Saturday to talk.

      May the Lord keep blessing you as well Jim. :-)

  • Hi George -   OK, so i wanted this badly enough that I decided to just go for it.  I stripped out ALL of my custom code & ALL of my CSS before i implemented this.  Placed codes s directed and it all looks wonderful except for this:3238576?profile=RESIZE_480x480the 2 items that should be on the top of m right column are spanning above the 3 columns instead.  same in firefox & chrome & mobile

    As i said, all custom code & css is removed, i have deleted cookies & cleared cache. hell, i even rebooted.

    any clue?

    L

  • i tried also removing some modules from columns, thinking something was too large & was pushing the other column out.  sill no love.

  • yyyayy! nevermind. figured it out by trying some of the other codes you offered within comments for different themes.  found the one that worked & i LOVE this.

    TY george , i have wanted a full width since ay one here!

    • Good morning  lorianne, :)  I was just on your network and noticed a couple minor issues. I wrote some CSS to fix the two issues.

      First issue you have custom divide in a text box but it's not responsive with these codes it's fixed.

      Second issue on cell phones to menu buttons or showing up because you added the extra code you found in the comments on this discussion. These codes will also fix that issue.

      The codes go in your design studio CSS section

      /*! lorianne custom F.W.N. CSS */
      @media screen and (max-width:1144px)  {
      DIV#xg_head INPUT#hidenav{
           display:none!important;}
      DIV#xg_head DIV#xg_masthead INPUT#hidenav{
           display:block!important;} }
      DIV.xg_module_body.xg_user_generated TABLE,
      DIV.xg_module_body.xg_user_generated DIV tbody td,
      DIV.xg_module_body.xg_user_generated DIV tbody tr,
      DIV.xg_module_body.xg_user_generated DIV{
           max-width:100%!important;}

      You have a wonderful day. :-)

  • Hey George, Everything seems to be working great with this. I have one small issue going on with the "Share" icons. You'll see them just under the Video thumbnails. At least I think it a Share icon. It's really hard to tell what it is. Can you have a look? www.surfer-shot.com

    • Hello Scott. :-) I've added a code to the stylesheet in this discussion to fix that issue.  Replace part one that you're using with part one in this discussion.

      If you've customized the stylesheet you can either add this code to your design studio CSS section or add it to your customized stylesheet.

      BODY DIV#xg_themebody DIV#xg_body  DIV.xg_module.module_video UL.clist li SPAN.reactions A{
          padding-left: 20px!important; }
      BODY DIV#xg_themebody DIV#xg_body DIV.xg_module.module_video UL.clist li SPAN.reactions A.like-link-1 {
          padding-left: 24px!important;}

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

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. "
27 minutes ago
Aase Lillian and ⚡JFarrow⌁ are now friends
NC for Hire
34 minutes ago
⚡JFarrow⌁ updated their profile photo
8 hours ago
⚡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…"
9 hours ago
Aase Lillian updated their profile
9 hours ago
Aase Lillian posted a discussion
Hi all. Is it possible to add emojis to the community? I also wish the activity page to include…
9 hours ago
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
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
For Creators and Admins: Easy Way to Create a Community Status Report
"This is still one of the best posts for RSS feeds"
Jan 8
More…

Meanwhile, you can check our social media channels