(TIP) Ning3.0 thimes v1 full width network

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>

Replies

- - - - George H. Compton IV December 11, 2013 at 2:57pm
        
        Hello again Jamie, there's been a lot of creators with that very same problem, simple fix. :-)
        
        Just drop this code in your design studio CSS box. You have a great day. :)
        
        NAV.navbar LI{
        z-index:999999999999!important;}
        
        This reply was deleted.
        
        George H. Compton IV December 12, 2013 at 10:47am
        
        You're welcome Jamie :) lol A cape
George H. Compton IV January 21, 2014 at 5:55pm

Update version 3.1, 1\21\2014. This version goes in your "design studio CSS section".
George H. Compton IV March 7, 2014 at 5:52pm

I love the way you integrated my 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 :-)
Clinton Heusser June 9, 2014 at 2:00pm

Maybe you can help me. I'd just like my ning website to stay in the center of the page. I usually get this by using

class {

margin: auto;

}

But, I cant find a selector that works. I've tried using the .xg_theme on the commonly used CSS class selectors, but it doesn't work. I've also tried using firebug to find the selector but none of those have made a difference.

My website, gardentraders.ning.com

I've tried pasting in your code and it does nothing as well.

Anysuggestions.

Thanks,

Clint
- George H. Compton IV > Clinton Heusser June 9, 2014 at 4:41pm
  
  Hello Clinton
  
  I do have a couple codes that I wrote just for those themes. :-)
  
  /* Start Ning 3.0 center all */
  @media screen and (min-width:1127px) {
  DIV.central-content.cf .site-bodyFrame{
      width:100%;}
  HEADER.site-headerFrame,
  DIV.site-body.container{
      float:none!important;
      left:0%!important;
      right:0px!important;
      margin-left:auto!important;
      margin-right:auto!important;}
  HEADER.site-headerFrame{
      left:-900px!important;} }
  /* END Ning 3.0 center all */
  
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  
  /* Start Ning 3.0 center central content, not the vertical navigation */
  @media screen and (min-width:1333px) {
  DIV.central-content.cf .site-bodyFrame{
      padding-left:0px!important;
      padding-right:0px!important;} }
  DIV.central-content.cf .site-bodyFrame{
      width:100%;}
  DIV.site-body.container{
      float:none!important;
      left:0%!important;
      right:0px!important;
      margin-left:auto!important;
      margin-right:auto!important;}
  /* END Ning 3.0 center central content */
- soaringeagle > Clinton Heusser June 10, 2014 at 6:08am
  
  it already is centered and is cenrtered by default with no code at all
  
  what are u seeing if itsnot centered?
- soaringeagle > Clinton Heusser June 10, 2014 at 6:16am
  
  used ctrl - to zoom out as fare as possible to show the fullpage at once but u can see its as centered as it could possibly be
  - George H. Compton IV > soaringeagle June 10, 2014 at 7:06am
    
    Hello, se.
    The only reason it centered is because he's using my code. Virtually remove my code and you'll see it looks like this. All the content is on the left side of the screen. And that's on all networks that uses the themes with the vertical navigation.
    
    Here's a snapshot without my code added.
Hami August 20, 2014 at 7:25pm

Hello George! I am wondering how i can increase my ning 2.0 website layout width and make it responsive. Is there any way to do this? Can you give me the code. :)