JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

Best 2 Column Width CSS - top left of home page

Notice: Please do not try this, unless you feel comfortable tweaking CSS. It works very well, but you must follow each step, carefully. Advice: if you like and want this effect - - try it on a test site, then your Network.

TIP:
Ernie of Team Ning has shared the best 2 column width CSS I've seen, yet. This 2 column width text box only fills the area of the page, that you specify. The advantages of this particular method are:

Retains the normal module formats, below the 2 column width box.
Allows you to add via CSS, and a small block of script in Analytics Box.

You can see the perfect example here:
http://dreamers.marthastewart.com/
I will insert screen shot below.

Follow Ernie's instructions (link below) to Add your Text Boxes.

Update - - as of July 31, 2010 utilize Ernie's instructions to understand how and where to add your text boxes. Please come back here and use ALL of the code below for: Left/Right Text Boxes, Advanced CSS, and Analytics Box.
http://developer.ning.com/notes/Creating_a_Two-Column_Wide_Module_w...

I use the following HTML in the text boxes, instead of the HTML in example, above. Basically, I found that adding DIV height, produced more reliable results.

PLEASE USE ALL CODE BELOW. SOME OF THE CODE IS MISSING FROM ERNIE'S TUTORIAL.

Left Text Box Content

<div id="space" style="height:364px!important;"></div>

Center Text Box Content
<div id="spotlight" class="space" style="height:364px!important;">your image goes here.</div>

Manage/Appearance/Advanced CSS Code

.space {height:364px;} /*Height of the Hero Area */
.module_text .xg_module_body {overflow:visible;}
#spotlight {margin-left:-245px;width:741px;} 
#spotlight img, #spotlight embed, #spotlight object {padding:0;margin:0;max-width:741px;}


<script type="text/javascript">
if (typeof(x$) != 'undefined') {
x$("#xg_layout_column_2").attr({_maxembedwidth: "741"});
}
</script>

Summary:

Follow Ernie's Example to add your 2 text boxes, and understand a little more about what you are trying to accomplish.
Come back here, and use the HTML above, for your text boxes. Adjust the DIV height to fit your image height. And BE SURE TO ADD THE ANALYTICS CODE ABOVE. As of July 31, 2010, it appears that the Analytics Code is no longer visible in Ernie's Tutorial.

0 members favorited this

Replies to This Discussion

Permalink Reply by JenSocial on July 31, 2010 at 9:54pm

Mike,
You need to go over your code with a fine tooth comb. I see these 2 errors instantly.

At bottom of your CSS, this line is missing an ending semi-colon, after top center. It should be top center; But, this shouldn't break the code. See next error below.

#xg_masthead /*Top Image*/
...top center}

On the body code at bottom, you are missing an ending bracket. This will break the code. Also, be careful adding comment before ending code:

body {...}

Permalink Reply by JenSocial on July 31, 2010 at 10:15pm

Mike,
Sorry, didn't mean to sound like a Teacher. I see great potential, and want you to do well. So, to be "teachy", be sure to pay attention to all details.
;-)
Best to you,
Jen

Permalink Reply by Mikes Designs on August 2, 2010 at 1:15am

omg Jen i got it to work!!!

Im going to post some screen shots soon,

maybe a video tutorial to help others in my same or similar situation =]

talk to ya soon,

MIKE.

Permalink Reply by JenSocial on August 3, 2010 at 3:18am

Hi Mike,
Only place I could reply. That's GREAT news! Congratulations that you got it working.
;-)
Best,
Jen

Permalink Reply by Mikes Designs on August 3, 2010 at 3:28am

thanks! =] here check it out for yourself

http://mikesdesigns.ning.com/

Permalink Reply by Wayne & Char on August 7, 2010 at 8:37pm

Can I use this code with a skin/template???? Newby at this but I like the look!?

Permalink Reply by JenSocial on August 7, 2010 at 9:01pm

You should be able to, if you add the CSS part of this code to the bottom of your existing CSS code. However, if you're new at this, you may not want to try this one. There are several steps, and it can get pretty convoluted.

Good luck on your decision, and learning more and more about the Ning platform. We all learn everyday.
Best Regards,
Jen

Permalink Reply by Mujer de vanguardia on May 24, 2011 at 11:29am

I try it in my network, but I cannot hide the two header boxes.

Permalink Reply by JenSocial on May 24, 2011 at 11:59am

If you leave the headers empty, only Admin should see the headers. You can't hide specific headers, only all or none.

Remove all text box header text:

.xg_widget_main_index .module_text .xg_module_head h2 {display:none!important;}

Remove entire text box header - you will not see the header, and will not be able to edit any text box header title, without removing the CSS:

.xg_widget_main_index .module_text .xg_module_head h2 {display:none!important;}

Let me know,

Jen

Permalink Reply by Mujer de vanguardia on May 25, 2011 at 10:11am

Ok, thank you, Jen. I didn't know that only Admin should see empty headers! lol

Thank you for the codes.

GBU ♥

Pat

Permalink Reply by JenSocial on May 25, 2011 at 11:39am

Great! I have seen issues with the hero box causing space between the columns, and a bear if not impossible to fix. But thinking yours looks good if signed out?

Best,

Jen

Permalink Reply by JenSocial on May 24, 2011 at 12:08pm

If you read my original reply, it's been updated...