"Update 3" "Tip" Convert your three column profile to a two column profile and back again easily. It's now more compatible with the different networks on Ning + Groups and video Module fixes

[George H. Compton IV]

Completely removed the third column to make more room
for columns 1 and 2
adjust the size of column 1 and 2 to your liking
and Adjust the sizes of these two lines of code to match.

.xg_widget_profiles_profile_show .xg_2col iframe

.xg_widget_profiles_profile_show .xg_2col embed  

They are about halfway down in the code.
Just add this code to your advanced CSS in your design studio
and remove it to have your three columns back.
Simple as that :)

On some networks .xg_span-7 is .xg_span-5 so if the code doesn't work on your network you'll need to change the first line on this code to this.

.xg_widget_profiles_profile .xg_span-5
{display:none!important;}

you can also switch Sides that your profile picture is on just Switch the word  left to the word right on this line div#xg_layout_column_1{width:250px;float:left!important}

and switch this one from right to left on this one.
div#xg_layout_column_2{width:710px;float:right!important;}

Max width is specified  :) Embed and iframe .. now the videos will fill your comment box and your textbox

Created and tested on a single user profile
but If you'd like to use it on your whole network see my discussion "Remove the right Column from your Main page and all profiles on your entire network." or "Remove the right column from Just the profiles on your entire network"

if you would like to use this type of code on other networks such as meet me formally known as myyearbook just ask I've already written that code.

click this link to see a live preview

http://wellkunnected.com/profile/GeorgeCompton

click here Main page and all profiles

just the profiles on your entire network

For inbox notifications and such See Jen's discussion on adding those to your Ning bar

click here for Jen's discussion

<style>


.xg_widget_profiles_profile .xg_span-7
{display:none!important;}
div.xg_span-16, div.xg_3col {width: 975px!important;}
div#xg_layout_column_1{width:250px;float:left!important}
div#xg_layout_column_2{width:710px;float:right!important;}
div#xg_layout_column_3{width:0px!important;}

.xg_widget_profiles_profile_show .xg_span-14 #xg_canvas .xg_3col .xg_2col img,
.xg_widget_profiles_profile_apps .xg_span-14 #xg_canvas .xg_3col .xg_2col img{
    max-width:645px!important;}
.xg_widget_profiles_profile_show .xg_2col embed {
    min-width: 680px!important;
}
.xg_widget_profiles_profile_show .xg_2col iframe {
    min-width: 640px!important;
    min-height: 375px!important;}
.xg_widget_profiles_profile_show .xg_module.module_photo .xj_embed_container embed {
    min-width: 700px!important;
    min-height: 515px!important;}

dl.comment{
border:none!important;
min-width:660px!important;
}
.xg_widget_profiles_profile_show .xg_module_comment_wall embed {
    min-width: 525px!important;
    min-height: 315px!important;
    float:left!important;

}

.xg_widget_profiles_profile_show .xg_module_comment_wall img {
    max-width: 458px!important;
}

DIV.xg_module.module_video DIV.xg_module_body.body_large UL.clist LII  {
     min-width: 190px!important;
     min-height: 75px!important;}

DIV.xg_module.module_groups LI.xg_lightborder  {
     min-width: 120px!important;
     min-height: 75px!important;}

DIV.xg_module.html_module.module_text.xg_reset embed{   
     min-width: 700px!important;
     min-height: 395px!important;}

</style>


<style>

.xg_widget_profiles_profile_show .xg_span-14 #xg_canvas .xg_3col .xg_2col img,
.xg_widget_profiles_profile_apps .xg_span-14 #xg_canvas .xg_3col .xg_2col img{
    max-width:645px!important;
}

</style>

 

video Preview Of how simple it is to go from three columns two using my code
From this

To this

 

 

 

 

[Thiago Santos de Moraes]

Great tip!

[George H. Compton IV]

thank you! I spent about two hours today writing that tiny bit of code lol

[Marcus Morais]

Great! 

I tried this several times without success! I always thought three columns very confusing. Thank you!

[George H. Compton IV]

For an individual  profile! on your profile or your members..  did you try to add the <style>To the code.. it should look like this

<style>

.xg_widget_profiles_profile .xg_span-7.xg_last
{display:none!important;}
.xg_widget_profiles_members .xg_span-7.xg_last
{display:none!important;}
div.xg_span-16, div.xg_3col {width: 975px!important;}
div#xg_layout_column_1{width:250px;}
div#xg_layout_column_2{width:720px;float:Rite!important;}
div#xg_layout_column_3{width:0px!important;}


</style>

[George H. Compton IV]

I'm sorry for my last reply I misread what you said you're welcome for the code :D

[SweetPotato]

Nice tip with good demos. Cheers George
SP

[George H. Compton IV]

thank you sweetpotato I added a fix for the text box  to allow pictures to use the full area lol :)

[ismail shah]

My Profile Link. Urgent Assistance needed 

[ismail shah]

through this tip we will lose our Inbox,alerts etc. as well any moderator will lose his Approval List Links

[George H. Compton IV]

yes but many people have asked for this so if they want to it should be alright it's only for an individual profile..

[ismail shah]

For now please tell me whats wrong with my profile. i added the code but 3rd column still their at the bottom of the page

[George H. Compton IV]

 did you add the <style> before the code and </style> after the code?  And are you using the new design studio? and for the inbox concern use this script that Jen wrote it will add Inbox and such to the Ning bar On the top of your profile.  This script needs to go in the NC Custom code box.

<!-- NingBar Navigation Links for Member Account Box -->
<style>
.lsep { margin:10px 2px 0;float:left;color:#ccc;font-size:110%; }
.account-links { display:none!important; }
.ningbarlink a { text-decoration:underline!important; }
</style>

<script type="text/javascript">
if (ning.CurrentProfile != null ) {
var NingBarLinks = '<li class="ningbarlink"><a href="/profiles/message/listInbox">Inbox</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/profiles/message/listAlerts">Alerts</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/profiles/friend/list?my=1">Friends</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/main/invitation/new">Invite</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/profiles/settings/editProfileInfo">Settings</a></li>';
x$('#xn_bar #xn_bar_menu #xn_bar_menu_tabs').prepend(NingBarLinks);
};
</script>
<!-- End NingBar Navigation Links -->


Add Member Account Box Links/Notifications to NingBar (Collaborative Efforts: Jen and Elson)

    Posted by Jen on March 30, 2012 at 3:33pm