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
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;}
-
1
-
2
-
3
-
4
-
5
of 14 Next