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!

[Alejandra G.P.]

I need some help please. I need to lace this gallery over 2 colums on the home page and All spteps are done. It looks ok, but when I refresh the width size reduces to the size of the second column and it aligned to the left. Could anyone help me with this? It must be something small.

[Alejandra G.P.]

I need some help please. I need to lace this gallery over 2 colums on the home page and All spteps are done. It looks ok, but when I refresh the width size reduces to the size of the second column and it aligned to the left. Could anyone help me with this? It must be something small.

[Josh Hall]

I can't get this to work for a two column layout. Any help for this would be great.

Thanks

[Pahlavi R'AD]

Hello everyone, I followed the steps and everything worked perfectly. However, I did run into one problem. My slide doesn't show all the content. The pictures are there, but the text get's cut off for some reason. I have a 3 column lay out and I changed the width like was suggested, but I'm still having the same problem. Any help will be welcomed.

[Atheist Universe]

Using the trick here: http://atheistuniverse.net/

We're Design Studio and it worked fine with the first version.

[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!

[dave]

Nice work !!

[Laurie Swezey]

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

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

[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?