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 Mujer de vanguardia on May 25, 2011 at 10:14am

Yes, I'd read it.

Thank you again

Best,

Pat

Permalink Reply by Mujer de vanguardia on May 23, 2011 at 12:34pm

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

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

Regards,

Pat

Permalink Reply by Yehweh Not Yahweh on February 18, 2012 at 5:32pm

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).

Permalink Reply by JenSocial on February 21, 2012 at 5:30pm

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

Permalink Reply by Emily on March 8, 2012 at 4:25pm

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!

Permalink Reply by JenSocial on March 9, 2012 at 1:02pm

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