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!

[Diane L. Garrett]

How do you get the customized homepages? They are very elegant. What do I need to do to get one?

[Felipe]

this is cool but it WASTES our text boxes since we have LIMITED number of text boxes and NING won't do anything about that! and rumors that they might offer it as a premium service to have more text boxes. God, it's pissing me off.

[Eric Suesz]

Ann Marie and Sam: You are viewing them logged out and they show that way as well?

[Billy]

Hi all
Could anyone help I have obviously done something wrong trying to do the above any Help much appreciated. http://worldfishing.ning.com/
Thank you
Billy
World Fishing News Team

[Jose Ruiz]

I don't seem to be able to make it work and after following the instructions this is all I get:

[Billy]

all I have been able to do is add a picture by removing the words "Welcome to hotcast UK" and inserting a link to photo on photobucket I like you must be doing some thing wrong I am using IE8 ????????????

[Billy]

Thanks for the feed back so If I add two or more pictures it will scroll?

[Billy]

Strange that so many can not get this to work require more information to get it to work?

[Billy]

Considering that this came out in a news letter and so many now have a first page that looks PANTS is not very good and a good reason not to use the codes advertised in the news letter!

[Jose Ruiz]

I cannot get to work either. I just about manage to get one picture to show half properly but have no idea what to do with the second one to make it look like a carrousel. Definitely nothing like the one in network creators. Still waiting for that "AH" moment