JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

Move Wide Column to Left (home page of Ning Network)

I thought this tip had already been added. Since I can't locate it, I'm adding again. Sorry if this is a duplicate.

How to Move Wide Column to Left (like our home page):
In case we ever change our layout, I will attach an image of a screen shot.

Add this CSS to the bottom of your Manage/Appearance/Advanced CSS. Before adding any CSS code, it's always a good practice to copy/paste your existing CSS, to a text file for backup.

/* **** Code to move wide column to left: **** */
/* Move the Wide Column (center) to Left */
.xg_widget_main_index_index .xg_3col .xg_1col {
float:right;
margin-left:0;
}
.xg_widget_main_index_index .xg_3col .xg_2col {
margin-left:0;
}
#homelayout div.column {
float:right;
}
#homelayout div.col2 {
float:left;
}
#homelayout div.col1 {
margin-right:115px;
margin-left:-230px;
}
* html #homelayout div.col1 {
margin-right:0;
}
/* End Move Wide Column Center to Left */

NOTE: If for some reason this code does not work for you, please do the following:
1. Grab the code from the attached text file, instead of the Discussion.
2. Refresh your cache after you add to your CSS.

0 members favorited this

Attachments:

MoveWideColumntoLeft.txt, 1 KB

Replies to This Discussion

Permalink Reply by JenSocial on March 4, 2010 at 3:25pm

Unfortunately at the current moment, no. If I come up with any ideas, I'll sure let you know.

Permalink Reply by GirlRiders on May 24, 2011 at 6:08pm

Does this still work? I'm just now trying it, but it didn't work for me, even after refresh.

Permalink Reply by JenSocial on May 24, 2011 at 8:08pm

It worked for me on your site. Did you happened to add the text Code to move wide column to left: ? That would make it bomb. I ask, because I did this, LOL. I think I'll add comment marker to this text, just in case.

/* Code to move wide column to left: */

Best,

Jen

Permalink Reply by GirlRiders on May 25, 2011 at 7:44pm

IMADORK!

I was pasting it into custom code instead of appearance. So glad you said it worked for you, it made me read the instructions slower. doh. Works great!

Thanks Jen!

Permalink Reply by JenSocial on May 25, 2011 at 11:06pm

LOL, glad you figured it out!

Permalink Reply by Dave Norris on June 11, 2011 at 10:10am

Hi Jen!

This tip looks to be close to what I want to do. Can I modify this code to:

Swap the left and right columns while keeping the persistent element (green box that makes content inside it show on every page)
Widen the center column

I want the sign in box and all items in the green box to show on every page, but on the left side,

and have a wider center area to help shorten the distance needed to scroll from top to bottom.

Permalink Reply by JenSocial on June 11, 2011 at 11:46am

Hi Dave,

Swapping columns has a huge domino effect on Ning. So short answer, I don't think this can be done without a ton of code and testing.

Sorry, wish I had better news. I would go with using one of the layouts in the new design studio instead. I realize there isn't a layout exactly as you've described, but at least you would get closer.

Best Regards,

Jen

Permalink Reply by JenSocial on June 11, 2011 at 11:58am

I just tested this. I used the Layout A3 from Design Studio. Then I quickly installed the code above to Advanced CSS (Firebug for me), and it appears to work perfectly. You'll have to test and make sure all is well, but looking at my original code, it should work.

Best,

Jen

Permalink Reply by Dave Norris on June 11, 2011 at 12:00pm

oh, im on the old design editor, i can't implement this idea in it?

Permalink Reply by JenSocial on June 11, 2011 at 12:32pm

I don't think it can be done, no - - not easily if at all. The column that shows on all pages is the issue.

Best Regards,

Jen

Permalink Reply by Dave Norris on June 11, 2011 at 12:37pm

ah, ok, thought I'd try. I did play with this in my test network with the new DS and me likey! Thank you for the advice....

Permalink Reply by Jonathan Wheeler on June 17, 2011 at 5:20pm