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

FORUM

I love the way Ning integrated this tip into themes 2.0. Awesome job.  
Changing everything to percentages with a 100% width and allowing max widths was an awesome idea of mine wasn't it. :-) lol 
Beautiful job I'm loving it thank you Ning. 

I no longer have to update this tip :-)

This code works with all layouts on Ning 3.0 themes v1..
Tested in Windows XP through win8, Linux and Macintosh..
Compatible with all newer browsers tested and working in Internet Explorer 9, 10 & 11, Firefox, Google Chrome, Opera and Safari.

Update v3.1 -- new placement of the code to make it easier to overwrite if necessary. It also loads faster using the design studio. Content in the "design studio CSS box" loads before the content in the "Custom Code - <Head> Code box" ...

If you'd like anything edited changed or removed just let me know I'll be more than happy to help. You guys have a great day and remember everyone keep your codes responsive... :)

You should see a Ning 3.0 network on a 36 inch plasma TV with the screen resolution set to 2500 in width omg beautiful. Instead of having a thin strip down the middle of my screen it fills the entire screen. :)

Update version 3.1, 1\21\2014. This version goes in your "design studio CSS section".

If you'd like to add a max width such as 1202px just replace the 100% in the code below with your desired width.

Example
before  max-width: 100%!important;

After   max-width: 1202px!important;

On some networks the design studio version will not work so use the lower code for individual pages the one with the style tags and place it in your custom code head code box. That way it will work on your whole network instead of individual pages.
Main code "whole network"
Place this code above all other codes in your "design studio CSS section"

/* Start Ning 3.0  GEOCOMs full width network any screen resolution v3.1 DS.v */
@import url("https://storage.ning.com/topology/rest/1.0/file/get/11491817?profile=original");
@media screen and (min-width:960px)  {
DIV.central-content DIV.container-inner.span-full {
   max-width: 100%!important;}   }
/* End GEOCOMs full width network */

 

Main code "individual pages"

Or use this code for an individual pages, Main page, individual group page or profiles pages. Any individual page with a "below header HTML box"
Place this code above all other codes in your "Below Header HTML Box"

<style>
/* Start Ning 3.0  GEOCOMs full width network any screen resolution v3.1 */
@import url("https://storage.ning.com/topology/rest/1.0/file/get/11491817?profile=original");
@media screen and (min-width:960px)  {
DIV.central-content DIV.container-inner.span-full {
   max-width: 100%!important;}   }
/* End GEOCOMs full width network */
</style>

 

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

  • Awesome, thanks and you are truly blessed with creatively and a sharing spirit.  It works great for me.

    • You're welcome doone and thank you for the compliment :-)

  • loving it but having to do alot of editing to make it work

    i wouldnt advise using the code in head as you describe for that reason instead click to see stylesheet copu all css and paste in youir css so you can edit it as needed

    • Hello SE I knew you would like it :)

      I wouldn't edit the stylesheet.. It's your custom codes that may need to be adjusted.
      It works perfectly for anyone that hasn't moved columns or customize them.

      But you're right if you want to move the columns around you should take the codes off the stylesheet and use your design studio to figure it out.

      • its the span full widths that overflowed slightly so had to rdeduce to 97.5% had to remove float right  on ningbar ..actaly all that code and the 10px header top padding

        now i must be sleep deprived (well alergies  making eyes blurry and burning) i cant find in your code  how to get the logo  on mobile off the top left corner i want it at bottom leftt of header cause it interferes with my fixed ningbar signin

        http://ww3.dreadlockssite.com

        only a few minor tweaks but can u show me in the code what i need to edit to move the mobile logo down

        • I don't see the logo did you remove it?

          • ofcourse not hmm i see it but partialy hidden by the signin links


            • I just needed to squish the page down to see it LOL
              there is no code on my stylesheet that would affects that but here's a code that will lower it for you :-)
              IMG.header-logoIMG{
                 margin-top:75px;}

              • o used position absolute bottom 0 and had to put it in the mobile section thats what i missed  didnt put it in the screen below whatever px section

                • you don't need to position absolute it at all is just a margin top

                  Place this code in your mobile section
                  IMG.header-logoIMG{
                     margin-top:75px;}

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

Anna_Ning_Support replied to Paul Corona's discussion
Mobile Version- Open to Desktop View
"Hello,
In order to have the site in the desktop view on the mobile device, you need to deactivate t…"
2 hours ago
Michelle Gilbert, CA, APAIA liked ⚡JFarrow⌁'s video in Ning Powered Events
yesterday
J.Ayvar replied to Paul Corona's discussion
Mobile Version- Open to Desktop View
"Hello @ Paul. Ning 2  should be responsible .i am wating for these feature too."
yesterday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Thank you Ning! SEO Improvement Features!
"Thank you Anastasia.. have a great weekend"
yesterday
Anastasia_Ning_Support posted a discussion
 
Hello everyone!
Are you ready to level up your marketing skills? Join our new webinar on August 2…
yesterday
Paul Corona posted a discussion
Ok- I'm a diehard desktop user but once in awhile I'll check our site on my phone.....Since most pe…
yesterday
Alessandro replied to SweetPotato's discussion
Ning 3.0 Tip: Infinite Scroll for Photos (Loading More Images ... )
"I found out for groups! Groups are loading automaticatlly on scroll!
In itemSelector you need to ch…"
yesterday
Anastasia_Ning_Support replied to ⚡JFarrow⌁'s discussion
Thank you Ning! SEO Improvement Features!
"Hi! 
Thank you for your feedback! We are preparing an announcement with several minor updates that…"
Friday
Oluwadamilola Taiwo Oyebanji, Donnie Belcher, Moses David and 3 more joined Ning Creators Social Network
Friday
Groudswell replied to Groudswell's discussion
Editing Sign-up Page - Adding a link and Paypal Button
"We have looked into this, but don't think it will work for us.  Will it support autorenew on either…"
Friday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Thank you Ning! SEO Improvement Features!
"It would be cool if there could be an option to specify a custom image for social media shares..."
Thursday
Rex updated their profile
Thursday
More…

Meanwhile, you can check our social media channels