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.

2 column width


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;}
<!-- Analytics Box Code-->
<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.

Views: 1036

Replies to This Discussion

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 {...}
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
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.
Hi Mike,
Only place I could reply. That's GREAT news! Congratulations that you got it working.
;-)
Best,
Jen
thanks! =] here check it out for yourself

http://mikesdesigns.ning.com/
Can I use this code with a skin/template???? Newby at this but I like the look!?
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
I try it in my network, but I cannot hide the two header boxes.

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

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

Thank you for the codes.

GBU ♥

Pat

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

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

RSS

Members

© 2020   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips