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

Forum

Updated 4-26-2016 v5

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="http://api.ning.com:80/files/N82BGgaL3u1CfQ8y-4gGxLyueSAZLceaNBVnNbG7bkWz4Yt4GNG7XFKjYS3R27uE5UUoah0J4BqOC7kmM9ZsbmzxDotY9yVc/GEOCOMs_N2.0_RFWN_v5.css" id="N2_R_F_W_N_v5_P1" ></link><script src="//tinymce.cachefly.net/4.2/tinymce.min.js" type="text/javascript"></script><script type="text/javascript">
if (screen.width < 1144 ){
tinymce.init({selector:'.vcard textarea'}); }
</script>

   

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  v5 part 2 -->
<script src="http://api.ning.com:80/files/Yh-B8VrdxHhnpMo2L4zwUwLg6GQsCNNu4kNqIByhLqccRNRFQT-82gxVF4pUxz0AzsbssHV**UxYnBiYb5rGonYJ5n*FdDcv/GEOCOMs_N2.0_R_FWN.js" type="text/javascript"></script>
<!-- START Ning 2.0 Video enhancements -->
<script src="http://bit.ly/1IuxOih" 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 */

 

Firefox_Restore_10th_Anniversary_Edition_GEO_v2.exe

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

Join Ning Creators Network

Email me when people reply –

Replies

    • You're welcome Alessandro. :-)

      Yes there is a difference between max-width and max-device-width.

      "max-width" will work on any device no matter what the screen resolution is of the device.
       "max-device-width" will only display on devices that have that screen resolution or less. So I'm using max-device-width to target cell phones and smaller portable devices not desktop computers or laptops.

      Hope this helps, you have a wonderful day. :-)

      • Thanks! Yes, max-device-width will be helpful in some cases.

  • Well I'm finally getting around to installing this update (yeah, I'm a slug) and of course nothing goes right for me.  I need to figure out how to get rid of that 'hidenav' altogether - I need my navigation showing.  Then it's taken the member box and moved it up to navigation.

    Probably have a code conflicting or something.  Why can't things go smoothly for me?   Yes, I'm whining.  Have been very sick lately so little things feel enormous to me.

    • I'm sorry you're having trouble Kos. Send me a link to one of the webpages and I'll write a code for you. :-) Just some simple CSS will change those back. :-)

    • Ok Kos, i sent you the new codes in a message.. Don't forget to remove the old widen your network to 1024px code!!

This reply was deleted.

Search the Creators Network

Latest Activity

Anam replied to Bizz ( John )'s discussion Controlling How Many Videos Display When Adding The Lists via Add Content Module
"Wow. You really know your stuff. I went back as a mature student to do a degree in media studies ov…"
18 minutes ago
Anam replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"HI John
You have cleared everything up for me, and I really appreciate it.
And I honestly don't kno…"
23 minutes ago
Bizz ( John ) replied to Poppili's discussion Urgently looking for a designer to improve my Ning website design
"Thanks Poppili, for now I create tips and post here to help others with their sites and can help on…"
7 hours ago
Bizz ( John ) replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Hi Anam
I know exactly what you mean for the videos. By default the add content modules for the vid…"
9 hours ago
Bizz ( John ) replied to CZG's discussion My Page Comment Box Posting Issue
"This might be because you are just adding a general comment wall, for the members pages you should…"
9 hours ago
Anam replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Back again :). I had abandoned the idea of using the Video feature but i'm trying it out again. Whe…"
14 hours ago
Kos replied to Anastasiia_NING support's discussion Ning 2Q 2017 plan!
"Douwe themes are no more than layout.  Navigation above, below the header or along side.  The desig…"
17 hours ago
Douwe Dronkert replied to Anastasiia_NING support's discussion Ning 2Q 2017 plan!
"Hi Kyryl,
Just to add to this. Great when you offer more themes! Just to make sure: if new themes b…"
19 hours ago
Poppili replied to Poppili's discussion Urgently looking for a designer to improve my Ning website design
"your website looks great..
I guess I'll have a deeper look at the design studio
do you do design fo…"
yesterday
Bizz ( John ) replied to Bizz ( John )'s discussion Videos Playing In Activity Feed, check it out on my site, Now shows photos to ( Updated: 27-04-17 )
"Well this is all working really nice now especially the photos, give it  a try. Click on a photo in…"
yesterday
Bizz ( John ) replied to Poppili's discussion Urgently looking for a designer to improve my Ning website design
"Just thought I would say that the new Ning Team are going to be updating the themes as mentioned in…"
yesterday
George Swann replied to Poppili's discussion Urgently looking for a designer to improve my Ning website design
"Looks relatively straightforward to me.  I have a couple of friends with current Wix sites that do…"
yesterday
Naveen Jain replied to Dan Lee's discussion I Will Design Your Ning Network To Make it Look More Professional
"Do you have example of ning site that you have designed?"
yesterday
Kos replied to Poppili's discussion Urgently looking for a designer to improve my Ning website design
"Good luck w/that.  Been there; done that.  Never again"
yesterday
Ning via Facebook

#createwithNING #plan Need publicity, fans and high life? Follow your dreams with really great…

George Swann replied to Poppili's discussion Urgently looking for a designer to improve my Ning website design
"Poppili, you're right about our sites needing to have a fresh modern look.  Need things to both loo…"
yesterday
George Swann replied to Dan Lee's discussion I Will Design Your Ning Network To Make it Look More Professional
"Deeday won't even let you see the source code...definitely not ning...lol
Bearcreek looks like a wi…"
yesterday
Kos replied to Poppili's discussion Urgently looking for a designer to improve my Ning website design
"Poppili You might want to post this over at the Hire a Creator group. "
yesterday
More…