"TIP" Widen your main page & profiles layout too 1202px or just your profile

For your main page and all profiles choose either the three column main page code or the two column main page code Then place the code in your NC custom code box. you can also place the code in your main design studio that will give your members a choice to be able to change it back to the default width. They just have to change themes in their design studio.

For an individual profile copy the bottom code and paste it in your profiles design studio for just your profile :-)

since a lot of Ning networks are different You may need to tweak the code or add some extra codes.. If so I'll be more than happy to adjust it or write new codes for your network.

Before my code

After

This code is for a three column main page and all profiles

This code is for your a two column main page and all profiles

this code is for just your profile the code goes in your design studio on your profile

Tags: CSS, Column, profile, width

Favorite

0 members favorited this

▶ Reply to This

Replies to This Discussion

Permalink Reply by Damien Hannah on January 20, 2013 at 2:18pm

Amazing examples and seemingly AWESOME tip George, however, I tried both CC and Advanced DS, this seemed to have no effect at all... ? Weird!

This will likely make it so that I have to adjust all those other codes too right?

I've wanted this ability since I built Addictapic, I hate that wasted space! Have you ever seen a Ning site (normal body, no CSS to stretch) on a 27" imac? It is HORRIBLE!! One thin line of body down the middle of the enormous screen, and two HUGE wasted spaces left and right. This TIP would save the day George!

Any idea why it won't work for me? Thank you my friend, hope all is well by the way! :)

▶ Reply

Permalink Reply by Damien Hannah on January 20, 2013 at 3:37pm

hmmm..

only effects the portfolio page as far as I can tell... That right column in your picture wasn't there before, it was being hidden...

I was thinking more of leaving everything as it currently is on my network, even with your other codes.. just literally stretching that yellow bordered area to the edge throughout the entire network, that way AP is basically full screen.. but nothing changed "layout" wise, as it sits now.

That probably means that if you had codes to stretch my canvas body on all pages, I could go through your other codes (hide column/stretch right column) codes and adjust each code's width for right column manually, to make it all fit again... right?

I don't mind doing a little work here George, :) you do a lot already! :)

If it will take "other" codes other than what is posted in this TIP, then I can totally wait till another time, when you get the chance to give AP the next round. :)

▶ Reply

Permalink Reply by George H. Compton IV on January 20, 2013 at 6:29pm

one reason it's not working for you You've already Customize your columns and layouts and removed the third column. you're already overwriting the width of the page twice. so with yours we have to add the word important.

▶ Reply

Permalink Reply by Kos on January 20, 2013 at 7:38pm

As usual George, you rock but wait, I'm confused. For profile page only or whole network as well? I uploaded it in my Custom Code area [Design Studio using Firefox] and it works beautifully on the profile page however I see no change on the home page. I haven't altered my column widths; in fact just switched over to DS yesterday. I'm probably doing something wrong [as usual]

▶ Reply

Permalink Reply by George H. Compton IV on January 20, 2013 at 8:35pm

I made it just for profiles Because there are two column main pages and a three column main pages. I would've had to write at least two separate codes... but just for you I wrote this one for all profiles and the main page it must be a three column main page for this code to work I've tested it on yours :-) I'll include a snapshot under the code :-) you have a great night and enjoy the code Kos :)

I'm going to eventually write the code for the Whole network..

this is the code for a three column main page & three column Profiles :-)

▶ Reply

Permalink Reply by Kos on January 20, 2013 at 9:13pm

Oh wow!!! I guess I was confused by the initial post when it referenced "whole network" but this, this.......you've left me speechless [a feat rarely achieved, let me tell you]. I cannot thank you more and know that others with 3-column will thank you as well. In fact I know a few Creators I'm going to go share the news with right now. *LOL* Just incredible; thank you once again George.

▶ Reply

Permalink Reply by George H. Compton IV on January 21, 2013 at 12:39pm

It's all your fault Kos lol :) I went ahead and wrote the codes for Three column & two column main pages.. thank you for the compliment :-)

If you want your navigation tabs centered here's the code for that :-)

DIV#xg_navigation UL {
     text-align: center;}
.xg_theme #xg_navigation ul li {
    display: inline-block;
    vertical-align: middle;
    float: none;}

you have a great week Kos :)

▶ Reply

Permalink Reply by Kos on January 21, 2013 at 12:57pm

Now come on George, you know It's always the chicks fault! *LOL* Yeah, I had a code to center the nav but somehow removed it along the way and never got around to reinserting. Thanks for the reminder. My memory is going in my old age. You have a great week as well.

▶ Reply

Permalink Reply by One Stop Social Network on January 21, 2013 at 1:23pm

Hello George

We have just started our new site One Stop Social Network www.onestopsocialnetwork.com. Please can you help ? Do you have a code to help make our main page wider?

We would be grateful for any help