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

FORUM

Updated 04-11-2018

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://bit.ly/2JAtFvA" 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://bit.ly/2mczvMa" type="text/javascript"></script>
<!-- START Ning 2.0 Video enhancements -->
<script src="https://bit.ly/2zrD86v" 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 */

 

 

 

 

 

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

Join Ning Creators Social Network

Email me when people reply –

Replies

                • Hi George,

                  I haven't seen any tasks related to such functionality in the system, and so far as it could be done with the custom code I don't think that it could be expected soon, as mostly we concentrate the efforts on something that require the changes on the server side, not only the front end.

                  Best regards,

                  Ning Team.

              • Thanks Kyryl, It worked for me.

                I was wondering is there anyway to use an icon font on ning 2.0 or is there any other way to add drop down icon in maintab for submenu or any other place where we can't change the HTML.

                Can we use Gzip compression in ning 2.0?

                Thanks again.

                • Hi there!

                  Unfortunately, Gzip compression cannot be used on Ning.

                  Yep, you can use unicodes which are supported by the browser and they would be displayed properly. And of course, you are able to add them to the places where you are not able to modify HTML, for example, you can use pseudo classes to add unicode character or place them in the correct places with the javascript. That is how it could be done for 2.0 network with CSS:

                  [dojotype=SubTabHover] > a:before { content: '∨'; float: right; margin-left:5px; margin-top: 1px; font-size: 80%;}}

                  Should be placed in custom CSS section.

                  Best regards,

                  Ning Team.

                  P.S. That's a bit modified tip posted by John related to the 3.0 platform 

                   

                  • Hi Kyryl!

                    Thanks for the code. But there is a problem when I use this code it display text like this

                    14402119?profile=originalI also import font-icon file in aboveheader-adbox above Ning 2.0 header. When I open design studio it diplay mission icon like this

                    14402121?profile=originalWhen I import the font-icon file in custom code box... It still display the text like the first image but in this case when I open design studio then it displays the actual (dropdown) icon. What's the issue?

                    • Hi there!

                      On chrome that symbol is working perfectly for me, I do suppose that it could be an issue with the font family. I have found the list of the fonts that do support that character, it might be helpful, you can find it here.

                      Best regards,

                      Ning team.

                      LOGICAL OR (U+2228) Font Support
                    • Hi Kyryl! Sorry I forgot to mention this, I am using ning-icon-font and using your code with like this in Advanced css box

                      [dojotype=SubTabHover] > a:before {font-family: 'ning-icon-fonts'; content: '\e60d'; float: right; margin-top: 1px; font-size: 90%;width: 10px;padding-left: 5px;}

                      I insert this css font file in above head ad box

                      <link href="https://static.ning.com/bedazzlewrapper/widgets/shared/less/unversioned/base/iconFont.css?xn_version=1553423905" rel="stylesheet">

                      Here is the video for better understanding

                      [img]https://monosnap.com/image/hDeSbRNX1NC4wPuws9V9kLOpAuGQ99.png[/img]

                      https://static.ning.com/bedazzlewrapper/widgets/shared/less/unversioned/base/iconFont.css?xn_versio…
                    • Hi there!

                      It works really strange, actually, I don't have an idea why it going on so, in such situation I can offer just to use the other font family and the other character to show that the menu has a drop down.

                      Best regards,

                      Ning Team.

              • Hi Kyryl, 

                How would I be able to use this code to make the navigation be screen wide? 
                I have this now on my site and looks good but as you scroll down a tad then you can see the nav bar doesn't go all the way to the right. See here: Surf Community

                Surf Community
                Surfing network for surfers who like all things surf.
                • Hello Scott!

                  Kyryl no longer works with us, but I will ask my tech-savvy colleagues to take a look, maybe they will be able to help. 

                  Bets regards,

                  The NING Team

                  • Hey Anastasia, 

                    I believe I have this corrected already with some additional css. 

                    Thanks for your help! 

This reply was deleted.

Announcements

 

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

Rodney Redman updated their profile
3 hours ago
Rachella Sinclair replied to Brandyn Shepherd's discussion
NING - Mobile App!
"I seriously need this!!! Will most likely leave Ning if they don't get their act together on this f…"
yesterday
Rachella Sinclair replied to Anastasia_Ning_Support's discussion
What’s new on NING?
"Any chance of getting a mobile app anytime soon? I've got heavy competition and they're all app-bas…"
yesterday
Fernando Bisbal posted discussions
yesterday
Anam replied to George H. Compton IV's discussion
(TIP N3.0 & N2.0) let's hang some Christmas lights..CSS.. Happy holidays :-) updated 12-04-14
"Don't forget Mr. George H. Compton IV's fabulous Christmas lights....thank you again, and blessings…"
yesterday
Dr Husky (Emalejandro) posted a discussion
Help.I need upload my file ads.txt file to the root of my website. If I don't do it, my adsense inc…
yesterday
Anam replied to Anam's discussion
Comments on Profile Pages Do Not Appear in Latest Activity
"The main problem is Moderation.
If a site owner does not check members pages, then the site owner c…"
yesterday
Anam posted a discussion
This has been so for a long time. It used to not be that way on Ning 2 sites. I have brought it to…
yesterday
This Is bully replied to Anastasia_Ning_Support's discussion
What’s new on NING?
"I hope it's available for the activity feed.."
Friday
Scott Bishop replied to Scott Bishop's discussion
Mobile Upload to Branded Video Player
"A few major issues with the Branded player. 

I no longer have the secure SSL because of it. I gues…"
Friday
kostasgr replied to kostasgr's discussion
facebook
"  Hi Ambrosie ! yes I have SSL on my site .."
Thursday
⚡JFarrow⌁ replied to Anastasia_Ning_Support's discussion
What’s new on NING?
"Will the search features appear next week as well? "
Thursday
More…

Meanwhile, you can check our social media channels