Current status of the Ning Platform is always available on the Ning Status Blog.

Blogs

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!
Email me when people comment –

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Comments

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

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

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

    Thanks

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

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

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

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

  • Is the an update for this with the design studio?

  • Nice work !!

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

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

This reply was deleted.

Meanwhile, you can check our social media channels