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

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

Have a nice day/weekend

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.



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

Just putting ny 2cents worth in LOL


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,


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.

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

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




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)





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.



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

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.



oh ok, gotcha.  thanks.



© 2020   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

VIP Ning Tips