DESIGN TRICKS #4: ADDING A TWO-COLUMN HERO BOX

[Kyle Ford]

Welcome to the fourth in a series of Ning Creators blog posts focusing on simple design tricks you can use on your network.

Trick #4: Adding a Two-Column Hero Box

The following code, used on the homepage of Ning Creators, will insert a "hero" module that spans two columns at the top of your network's Main page content area. This area could be used to insert an image, a custom Flash/JavaScript piece or just a simple text introduction.

Here's an example:

To get started, visit the "Appearance" area inside the "Manage" tab, then paste the following CSS snippet inside the "Advanced" section (underneath any other code that may already be there):

.space {height:270px;} /*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;}
Next, visit the "Analytics" area inside the "Manage" tab, then paste in the following snippet (underneath any other code that may already be there):

<script type="text/javascript">
if (typeof(x$) != 'undefined') {
x$("#xg_layout_column_2").attr({_maxembedwidth: "741"});
}
</script>
On the "Features" area inside the "Manage" tab, add one new Text Box at the top of the left column, then a second Text Box at the top of the center column. Save your changes.

Here's an example:

Back on the Main page, click the "Edit" button on the new Text Box in the left column, then insert the following snippet:
<div class="space"></div>
Now click the "Edit" button on the new Text Box in the center column, and insert this snippet:

<div id="spotlight" class="space">ADD HERO CONTENT HERE</div>
Replace the "ADD HERO CONTENT HERE" text with your custom content (whether it's an image, embed code, HTML, etc.), then save your changes.

Enjoy!

[solo]

thank you so much for this tip..8)

[Eric Suesz]

Yes, this is great. Thank you!

[BEAT YOUR PB]

Is there any way the 2-column module could run across all pages, not just the mainpage - would be another option for inserting a leaderboard ad into the site below the nav bar (which many NC's are wanting to do)?

[Laura]

Julian - check the FAQ here: http://help.ning.com/cgi-bin/ning.cfg/php/enduser/std_adp.php?p_faq...

[BEAT YOUR PB]

Thanks Laura. Don't think that's quite what I'm after....What I'm trying to achieve is to place a leaderboard ad under the main navigation as they have here: http://spill.com/. The ad would be pulled in using a jasvascript tag or alternatively an ifrrame tag from an ad server (open x). Any thoughts?

[Robert]

I don't have enough text boxes left over to accomplish this .. bummer

[Lubi]

it works.

[AjIt█▬█( Logic Gate™ )]

[Jim Robinson]

Is there any way to get more text boxes for sites that are content heavy??!

[Marilee Haney]

Thanks! I was looking for new ideas!