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
To widen your network you can use my code from this tip.
"TIP" widen your network too 1202px
I did write a code to make a 2.0 network responsive. That was years ago I'll have to look to see if I still have it. It takes a ton of code to make a 2.0 network responsive. If I can't find it, I'm sorry I will not be able to rewrite that code. It just takes too long and if they're closing the 2.0 networks it just wouldn't be worth it to me to rewrite it.
Hello Innocent, I did end up writing some code to make Ning 2.0 networks responsive. Just go to this tip and have a look :-)
(TIP) Ning 2.0 responsive fullwidth network at any screen resolutio...
-
10
-
11
-
12
-
13
-
14
of 14 Next