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.

Views: 663

Attachments:

Replies to This Discussion

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
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
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
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.
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
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
Thanks! I'm amazed it's working without that line of code.
Thank you Jen! There was 0% problem at all with the codes! It just 100% worked very well!
Excellent! Happy to hear it.
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
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
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

RSS

Members

© 2019   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips