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 {
.xg_widget_main_index_index .xg_3col .xg_2col {
#homelayout div.column {
#homelayout div.col2 {
#homelayout div.col1 {
* html #homelayout div.col1 {
/* 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.

Views: 683


Replies to This Discussion

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

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

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: */




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!

LOL, glad you figured it out!


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.

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,


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.



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

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,


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....
Great tip jen, Thank you once again!



© 2020   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

VIP Ning Tips