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

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

Votes: 0
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.
 

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

LEO Mobile App Builder updated their profile
Tuesday
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. "
Mar 19
Aase Lillian and ⚡JFarrow⌁ are now friends
NC for Hire
Mar 19
⚡JFarrow⌁ updated their profile photo
Mar 18
⚡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…"
Mar 18
Aase Lillian updated their profile
Mar 18
Aase Lillian posted a discussion
Hi all. Is it possible to add emojis to the community? I also wish the activity page to include…
Mar 18
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
More…

Meanwhile, you can check our social media channels