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: 1345

Replies to This Discussion

Yes, I'd read it. 

Thank you again

Best,

Pat

 

Hi Jen! is it possible to hide the text boxes header?

I try it with some text, and both headers were shown,

 

Regards, 

Pat

I've tweaked my site so that I have merged my left and centre columns. Do you know how I could add a rotating banner to the top of my home page. Knowing how to do one that spanned both the left column and both columns would be great (having two options).

Not without custom code - - here's the scoop:

1. Your first step is locating the rotating banner code that works. There's a nice suggestion in the VIP Club here:

http://jensocial.com/group/premiumningtipsbyjen/forum/topics/rotati...

2. Then, the code would need to be written to insert the banner script code to top left of your Ning site. I have not written a tip with this code yet. I only have the tip that inserts simple HTML code, and most rotating banner ads are executed with script code:

http://jensocial.com/group/premiumningtipsbyjen/forum/topics/insert...

It takes an entirely different insertion code to insert "script" versus simple HTML.

3. Now, here's the thing.  If this rotating banner ad code offers iframe tag, the simple HTML version may work.

4. Otherwise, I would try the rotating banner script ad suggestion, and add to an instant ad box, or text box.

Best Regards,

Jen

I tried this and it worked BUT I have a 1px border around all my modules which I want to keep, the problem is you can see the 2 boxes behind the image I now have and so it doesn't look so great.

You can view it on my test blog (still working on slider) Test blog here

Is there any code I can use to remove the border around ONLY those top 2 text boxes?

Thanks!

Hi Emily

I believe I remember what you're referring to, and that being a problem. I would need a link to the page where this is installed to take a look. The link I clicked on was private?, correction, a test network.  If you like, send me a signin username/password via private message. It can be any test member account for me to look.

Best Regards,

Jen

RSS

Members

© 2024   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips