2 Column Main Page

[Gary Gannon]

Hi all,

Im trying to find some example CSS code to make my main page a 2 column layout. Im not very good with CSS...could someone please post some code here to get me going...

I would like to remove the left column and stretch the center column out to the left.

Thanks!

[Ernie H.]

Hi Gary - I've seen networks attempt to do something like what you're asking through some CSS similar to this:

#xg_layout_column_1 { display:none; }
#xg_layout_column_2 { width:740px; }

Note that the drag and drop features tool will still have 3 columns. You won't be needing to put any features in that left column, of course. Hope that helps!

[IRJP.NET]

Hello Gary,

Here is another way to do it.

http://livewired.ning.com/classifieds/index/view?id=1990958:Classif...

You will have to sign up to see the information.

If you do not want to sign up to the site then you can visit my site for the information.

"NingMaster"

www.skins4ning.com

@ Ernie H

I tried the code and was unable to get it to work. I put it in Style tags and placed in tracking code box and still could not get it to work.

Do I have to move all my boxes to the middle first or will it hide them auto?

[Ernie H.]

Skins4Ning: I put up a working example at the following page: http://cssdemo05.ning.com/

I put this code in the appearance tab in the Manage page.

[IRJP.NET]

Hello Ernie H,

I have a bit of css code that is blocking the css you gave me.

I have the other option offered to Gary running on my site right now.

It involves a new index.php file in the root directory and renaming the old index.php file.

Here is the code that I placed in the new index.php file. Let me know what you think?

?php
ob_start();
define('NF_APP_BASE',dirname(__FILE__));
require_once NF_APP_BASE . '/lib/index.php';
// Two Column Hack Begins
$page = $_SERVER['PHP_SELF'];
$plugin = ob_get_contents();
if (($page == "/index.php") || ($page == "/index.php/")) {
$plugin = str_replace(" class='xg_2col last-child'>"," class='xg_3col first-child'>", $plugin);
ob_end_clean();
echo $plugin;
}
ob_end_flush();

[Gary Gannon]

Thanks Ernie! That worked great...so now i am trying to put an image in a text box the full width of the new column(740px)...but it keeps resizing my image to the old center width...I can justify the image left, center, or right but I cannot get it to display the full 740...any ideas?

[Gary Gannon]

So im thinking this hack is not such a good idea...if you apply the site theme to your personal page you lose your avatar and whole left column...including the links to change the theme to something else...

[IRJP.NET]

That is true Gary. If you use the hack I offered from Livewired you will only affect your main page.

[Ernie H.]

Gary - okay, that means you will have to specialize your CSS a bit. I updated http://cssdemo05.ning.com/ to reflect this. Skins4Ning.com's LiveWired solution -- at a cursory glance -- looks to be totally acceptable in that it effects the PHP code instead of the CSS code. The only possible issue I can foresee is if you install another third party service that works directly with the index.php, that will create conflicts.

[IRJP.NET]

Hello Ernie,

I went to http://cssdemo05.ning.com/ and tried out your css.

Still some draw back to using it.

When you are in features you are unable to drag any type of box to the right hand side column area. It also stretches your box acroos the screen in the features section. I can't even drag a text box to the right side.

Let me know what you think?

[Zack]

change the size to 100%

[Sunfrog]

I used Ernie's trick to make my left column 300px and my center column 440px.
but when I add a 300 x 250 graphic to the left column it gets resized. How do I stop it from being resized?

[IRJP.NET]

Hello Sunfrog,

You will have to Fire Bug it with Fire Fox 3 and get the CSS that controls the images on your main page. I had that issue as well. I solved it by using Fire Bug.

Hope this helps.

JP

*AKA*-"NingMaster"

www.skins4ning.com