tricks (6)
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:
.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:
Now click the "Edit" button on the new Text Box in the center column, and insert this snippet:
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!
<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!
Welcome to the second in a series of Ning Creators blog posts focusing on simple design tricks you can use on your network.
Trick #2: Centering the Navigation
The following code, used on Carmen Electra's official community, will center your network's navigation area in all web browsers.
To do this, just 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):
#xg_navigation ul {text-align: center;margin: 0 auto;}#xg_navigation ul li {display: -moz-inline-box; /* inline-block for earlier versions of FF */-moz-box-orient: vertical; /* inline-block for earlier versions of FF */display: inline-block;vertical-align: middle;*display: inline; /* ie7+ hack */*vertical-align: auto; /* ie7+ hack */text-align: left;float: none;}#xg_navigation ul li a {display: inline;}
When you're done, click the "Save" button. Your navigation should now be centered. Enjoy!
Here's a handy way to load Ning Creators from your iPhone's home screen as a fullscreen standalone app (rather than a window within Safari):1. Visit https://creators.ning.com/fullscreen.html from Safari on your iPhone. You'll immediately be redirected to the iPhone version of Ning Creators.2. Click the back button in Safari and you'll go to a blank white page. Don't panic, this is normal.3. From this blank white page, press the "+" button at the bottom of the screen and choose the "Add to Home Screen" option. You'll see a preview of the Ning Creators icon and an option to edit the name. You can leave things as they are, then click the "Add" button in the upper-right corner.4. All done. You can now click the newly-added home screen icon to experience Ning Creators as a fullscreen standalone app.Enjoy!
Welcome to the first in a series of Ning Creators blog posts focusing on simple design tricks you can use on your network.Trick #1: Adding an Arrow Indicator to Navigation DropdownsThe pulldown menus created by our Tab Manager feature are extremely popular, however some Network Creators have expressed interest in displaying an arrow indicator next to tabs that have a dropdown menu (to make it clear to members that there's more content inside that tab). You can see this in action on Enrique Iglesias' official social network.To achieve this effect, visit the "Manage" tab, then the "Analytics" section. Paste in the following snippet underneath anything else that may already exist (don't delete anything):<script type="text/javascript">if (typeof(x$) != 'undefined') {//Adding "dropdown" class to nav tabs that have subtabsx$("li.xg_subtab[dojotype='SubTabHover']").addClass("dropdown");}</script>Save the changes. Now visit the "Manage" tab again, followed by the "Appearance" section. Click on the "Advanced" tab.If you have a light background color on your network, add the following code underneath anything else that may already exist (don't delete anything):.dropdown {padding-right:5px;background:url(https://static.ning.com/creators/design/black-arrow.png) no-repeat right center;}If you have a dark background color on your network, add the following code underneath anything else that may already exist (don't delete anything):.dropdown {padding-right:5px;background:url(https://static.ning.com/creators/design/white-arrow.png) no-repeat right center;}Save the changes. You're all set. You can adjust the "5px" number above to tweak the spacing that appears to the left of the arrow, and if you want to use a different arrow image or support legacy web browsers, you can create a new image with an image editing program, then swap out the existing black-arrow.png or white-arrow.png URL with your custom image's URL.Note that this technique works best on themes in which tabs don't have a separate background color when selected, though certainly feel free to experiment. Happy dropdowning!
