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 Administrator☼JenSocial on June 17, 2011 at 5:24pm

@Alex If you are using the Design Studio these codes may not work for you,

Have a nice day/weekend

Permalink Reply by JenSocial on June 17, 2011 at 6:34pm

Good point, and will take me a while and probably by request to make all work for both. I think it'll still work on the 3 column layout for new Design Studio.

Best,

Jen

Permalink Reply by Administrator☼JenSocial on June 17, 2011 at 6:40pm

I love to have the wide column on the left in the new Design Studio

Just putting ny 2cents worth in LOL

Permalink Reply by JenSocial on June 17, 2011 at 6:46pm

Deb,

There are 2 layouts built-in with wide column to left, but only for the 2 column site. Which 3 column site are you using? Is it on your main site? Soon as I can, I'll take a look.

Best Regards,

Jen

Permalink Reply by Administrator☼JenSocial on June 17, 2011 at 7:06pm

I'm in my sandbox and I have found out to create themes is more tricky than I though and then to leave an explanation for the members so they can use the themes is I feel to confusing for most members

This all about the Design Studio that I have been fiddling with.

Never know we may have no choice but to use the new one.

Permalink Reply by Administrator☼JenSocial on June 17, 2011 at 6:47pm

IT worked in Layout A! (one) Main Page don't know about the others

Permalink Reply by JenSocial on June 17, 2011 at 6:49pm

Great, just let me know if you have another one from the A's that you need.

Best,

Jen

Permalink Reply by GirlRiders on October 12, 2011 at 11:39am

Jen,

Should Nings Hero Banner work with this? Its not working on my test network, so far. Do I need to modify anything?

So far, I tried with no success:

Switching the text box code from one to the other.

Moving up the CSS code in the advanced appearance box (I think I found the error you suggested I may have, but tried moving this just in case)

Permalink Reply by JenSocial on October 12, 2011 at 12:03pm

Hi Katie,

I really don't know if it will work with this code, sorry. I'm guessing there would be a series of issues. They were written at different times in the platform history.

Best,

Jen

Permalink Reply by GirlRiders on October 12, 2011 at 12:10pm

Looks like you have it setup that way on this site, do you have that tip posted somewhere?

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

I don't use the hero box on JenSocial. I would help if I could. I'm thinking this isn't the best idea. I just widen my latest activity with some hacks.

Best,

Jen

Permalink Reply by GirlRiders on October 12, 2011 at 12:18pm

oh ok, gotcha. thanks.