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!

[Dan O]

Has anyone figured this out? If you have, can you post IN DETAIL how it worked?

[Dan O]

I would love it if someone from Ning Creators could give some insight. I want to replicate EXACTLY what was done with this slider.

[Sandy Henson Corso]

is this the slider that is currently on the home page of the creators site?  the one with the dots.  it seems this one is too wide to be that one.

[pjcyto]

This is what is happening on mine. The members list floats under the banner that was made. This was just a test to see how it worked. I'd love to use it, but I don't know how to get that section below the banner. Is there a code to buffer it down? Or should I just push enter a lot of times?

[Jeff Bean]

Appears this only works with networks not using Design Studio? The instructions refer to a "manage" tab that doesn't exist anywhere in the Design Studio or the dashboard. The original instructions are more than two years old - I think that predates the Design Studio.

Too bad. I'd like to be able to do this.

[Laurie Swezey]

hi, do you know how i can get rid of the spaces below the hero box here:  http://woundtalkpro.com

[dave]

Nice work !!

[Rowald]

Is the an update for this with the design studio?

[Riccardo Rossini]

Great!!

http://www.fotografiapuntodincontro.com/main/

[Ningaholic]

Ricardo, can you show the code for how you got it to work with a two column layout.  It looks like the original code for three columns is not outdated...thanks!