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 the witches Den on January 11, 2010 at 5:07pm

i cant seem to get it to work do i put it above this or below or do i remove this ( /*---------------------
End Code
----------------------*/ then place the code below, please help, thanks blessed be, snow wolf

Permalink Reply by JenSocial on January 11, 2010 at 5:31pm

Below that. And yeah, you can remove that code, it's just comment lines.

Also, are you adding to bottom of a typical Advanced CSS theme? If you're adding to a super pimped up theme, I can see that you may possibly experience issues. Although, so far I've not had any issues with this code.

Let me know.
Best,
Jen

Permalink Reply by JenSocial on January 11, 2010 at 5:43pm

Hi the witches lair,
I added to one of my test sites, and it didn't appear to be working at first, even after refreshing cache. I've added this code to several networks, and this is the first time this happened to me. And then it worked. So, I guess Ning is working on the platform in some quiet capacity? Give it a few minutes and it should work.
Please let me know for sure.

UPDATE: You may want to grab the code from the new text file I uploaded to main discussion. We could be getting invisible characters in my code above.
Best,
Jen

Permalink Reply by Administrator☼JenSocial on January 12, 2010 at 4:45am

This code didn't work the first time for me.
So I deleted Code to move wide column to left: at the beginning of the code and it worked I try it on 2 sites and they worked after taking the first line out.

Permalink Reply by JenSocial on January 12, 2010 at 11:30am

Thanks Deborah - - Taking first line out? Do you mean this one?
/* Move the Wide Column (center) to Left */

That's just a comment line, and shouldn't hurt anything.

I'm just curious.
Thanks,
Jen

Permalink Reply by Administrator☼JenSocial on January 12, 2010 at 4:20pm

Hi Jen
I removed the comment line

Code to move wide column to left:
/* Move the Wide Column (center) to Left */
.xg_widget_main_index_index .xg_3col .xg_1col {

This what I deleted

Permalink Reply by JenSocial on January 13, 2010 at 12:10pm

Thanks! I'm amazed it's working without that line of code.

Permalink Reply by Kiribati My Homeland on January 29, 2010 at 2:40pm

Thank you Jen! There was 0% problem at all with the codes! It just 100% worked very well!

Permalink Reply by JenSocial on January 29, 2010 at 2:42pm

Excellent! Happy to hear it.

Permalink Reply by VidiNOW on March 4, 2010 at 5:15am

Hi, thanks for this code - I wondered if you could help. On my site http://www.vidinow.net I have a special image and video spanning 2 columns, and when I add the code to move the wide column to the left, it messes up the positioning for my 2 text boxes that span 2 columns (if that makes any sense?)

Hope you can help. Thanks!

Al

Permalink Reply by JenSocial on March 4, 2010 at 11:29am

You probably need to switch/move your top 2 text boxes via Manage/Features. The one in left column, move to center column. The one in center column, move to left column.
Let me know if that helps,
Jen

Permalink Reply by VidiNOW on March 4, 2010 at 3:21pm

Hi Jen. Yeah I tried that and it shifted it over behind the sign in box! I am out of ideas. Do you have any other suggestions?

Many thanks,
Al